第一页 1 最后页 [ 显示模式： 摘要 | 列表 ]

Vue实现倒计时组件(可自定义时间倒计时功能的组件)：

[不指定 2023/07/27 14:12 | by 刘新修 ]

 一、创建countDown.vue（倒计时组件）：

XML/HTML代码
  1. <template>  
  2.     <span :endTime="endTime" :endText="endText">  
  3.         <slot>{{content}}</slot>  
  4.     </span>  
  5. </template>  
  6.   
  7. <script>  
  8.     export default {  
  9.         data(){  
  10.             return {  
  11.                 content: '',  
  12.             }  
  13.         },  
  14.         props:{//接收父组件的数据  
  15.             endTime:{type:String,default:''},  
  16.             endText:{type:String,default:'活动已结束'},  
  17.         },  
  18.         watch: {//监听时间的变化  
  19.             endTime() {  
  20.                 this.countdowm(this.endTime)  
  21.             }  
  22.         },  
  23.         mounted () {  
  24.             this.countdowm(this.endTime)  
  25.         },  
  26.         methods: {  
  27.             countdowm(timestamp){  
  28.                 let self = this;  
  29.                 let timer = setInterval(function(){  
  30.                     let nowTime = new Date();  
  31.                     let endTime = new Date(timestamp * 1000);  
  32.                     let t = endTime.getTime() - nowTime.getTime();  
  33.                     if(t>0){  
  34.                         let day = Math.floor(t/86400000);  
  35.                         let hour=Math.floor((t/3600000)%24);  
  36.                         let min=Math.floor((t/60000)%60);  
  37.                         let sec=Math.floor((t/1000)%60);  
  38.                         hourhour = hour < 10 ? "0" + hour : hour;  
  39.                         minmin = min < 10 ? "0" + min : min;  
  40.                         secsec = sec < 10 ? "0" + sec : sec;  
  41.                         let format = '';  
  42.                         if(day > 0){  
  43.                             format = `${day}天${hour}小时${min}分${sec}秒`;  
  44.                         }  
  45.                         if(day <= 0 && hour > 0 ){  
  46.                             format = `${hour}小时${min}分${sec}秒`;  
  47.                         }  
  48.                         if(day <= 0 && hour <= 0){  
  49.                             format =`${min}分${sec}秒`;  
  50.                         }  
  51.                         self.content = format;  
  52.                     }else{  
  53.                         clearInterval(timer);  
  54.                         selfself.content = self.endText;  
  55.                     }  
  56.                 },1000);  
  57.             }  
  58.         }  
  59.     }  
  60. </script>  

 二、vue倒计时组件的使用方法（父组件里面）：

XML/HTML代码
  1. <template>  
  2.     <count-down :endTime="endTime" :endText="endText " />  
  3. </template>  
  4.   
  5. <script>  
  6. import countDown from '@/components/countDown'//引入路径，可更改  
  7.   
  8. export default {  
  9.     data() {  
  10.         return{  
  11.             endTime:new Date("2022/04/18 08:00:20").getTime() / 1000 +  ' ',  
  12.             //  console.log(endTime)=>得到毫秒  1658030420 可在方法里面放入后台数据,new Date('放后台数据').getTime() / 1000 +  ' ',但要记得调用方法  
  13.             endText:'',  
  14.         }  
  15.     },  
  16.     components: {  
  17.          countDown  
  18.     },  
  19. }  
  20. </script>  

说明一下：

XML/HTML代码
  1. 1）endTime是一个时间戳，而且是字符串数据类型，需要处理下  
  2.   
  3. let endTime = new Date("2022/04/18 08:00:20").getTime() / 1000 +  ' '  
  4.   
  5. 2）endText是倒计时结束显示的内容  

三、vue倒计时组件效果如下：

vue | 评论(0) | 引用(0) | 阅读(1655)

Linux shell命令 批量删除子目录下的文件，保留指定数量的最新文件

[不指定 2023/07/26 16:26 | by 刘新修 ]
C#代码
  1. #!/bin/bash  
  3. #保留文件数  
  4. ReservedNum=2  
  5. #要删除文件的，父级目录  
  6. FileDir=/usr/docker/springCloud/project/  
  8. #循环子目录列表  
  9. for element in `ls $FileDir`  
  10. do  
  11.     # 拼接成完成目录 （父目录路径/子目录名）  
  12.     dir_or_file=$FileDir$element  
  13.     # 获取子目录下的指定文件格式的总数量  
  14.     FileNum=$(ls -l $dir_or_file | grep 'keda-' |wc -l)  
  15.     # 输出 删除前的 指定格式的文件数量  
  16.     echo  $element "jar num:" $FileNum  
  17.     # 如果 数量大于保留数量，那就循环删除 文件  
  18.     while(( $FileNum > $ReservedNum))  
  19.     do  
  20.        OldFile=$(ls -rt $dir_or_file | grep 'keda-'| head -1)  
  21.        echo  $element "Delete jar:"$OldFile  
  22.        rm -rf $dir_or_file/$OldFile  
  23.        let "FileNum--"  
  24.     done  
  25. done  
  27. # 删除完后，再循环输出一下 每个子目录下的文件数量  
  28. for element in `ls $FileDir`  
  29. do  
  30.     dir_or_file=$FileDir$element  
  31.     FileNum=$(ls -l $dir_or_file | grep 'keda-' |wc -l)  
  32.     echo  $element "jar num:" $FileNum  
  33. done  
Linux/Unix | 评论(0) | 引用(0) | 阅读(1020)

纯前端让浏览器下载pdf文件

[不指定 2023/07/18 10:20 | by 刘新修 ]

 

XML/HTML代码
  1. <!--  
  2.  * @Description: npage.vue  
  3.  * @Version: 1.0  
  4.  * @Author: LiuXia  
  5.  * @Date: 2022-08-01 20:32:06  
  6.  * @LastEditors: Jesse Liu  
  7.  * @LastEditTime: 2023-07-17 20:38:42  
  8. -->  
  9. <template>  
  10.   <div class="wscn-http404-container">  
  11.       <h1 style="line-height:300px; text-align:center">npage.vue (新测试文件)</h1>  
  12.       <div>time:</div>  
  13.   </div>  
  14. </template>  
  15.   
  16.   
  17.   
  18. <script>  
  19. import { parseTime } from '@/utils'  
  20. import { downloadFile } from "@/utils/getFile";  
  21. import { fileLinkToStreamDownload , urlFile } from '@/utils/down'  
  22. export default {  
  23.   name: 'PageTest',  
  24.   computed: {  
  25.     message() {  
  26.       return 'PageTest'  
  27.     },  
  28.     parseTime: parseTime  
  29.   },  
  30.   methods:{  
  31.     downfile(filePath){  
  32.       //https://bbwx.kaitaiming.com/image/group1/M00/24/AE/rBBlxWS0vaqAR8ltAAGsWlc-FnY677.pdf  
  33.   
  34.       // 后端上传文件返回请求的filePath地址  
  35.       console.log( filePath, 3333333 );  
  36.       //  获取文件名  
  37.       let fileName = urlFile(filePath, 1);  
  38.       //  获取文件后缀  
  39.       let fileExtension = urlFile(filePath, 2);  
  40.       //  url下载  
  41.       fileLinkToStreamDownload(filePath,fileName,fileExtension);  
  42.     }  
  43.   },  
  44.   mounted() {  
  45.     this.downfile('http://localhost:9527/image/group1/M00/24/AE/rBBlxWS0vaqAR8ltAAGsWlc-FnY677.pdf');  
  46.     this.$store.dispatch("case/casesList/downloadFile",{}).then((res)=>{  
  47.         let data = res.data;  
  48.         let headers = res.headers;  
  49.           
  50.         /*** 调用下载文件 ***/  
  51.         //downloadFile(data, headers)  
  52.     })  
  53.   },  
  54. }  
  55. </script>  
  56.   
  57.   
  58. <style lang="scss" scoped>  
  59. </style>  
JavaScript代码
  1. /* 
  2.  * @Description: down.js 
  3.  * @Author: Jesse Liu 
  4.  * @Date: 2023-02-06 16:27:18 
  5.  * @LastEditors: Jesse Liu 
  6.  * @LastEditTime: 2023-07-17 20:20:05 
  7.  */  
  8. export function fileLinkToStreamDownload(url, fileName, type) {  
  9.   let reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+).)+([A-Za-z0-9-~\/])+$/;  
  10.   if (!reg.test(url)) {  
  11.     throw new Error("传入参数不合法,不是标准的文件链接");  
  12.   } else {  
  13.     let xhr = new XMLHttpRequest();  
  14.     xhr.open('get', url, true);  
  15.     xhr.setRequestHeader('Content-Type', `application/${type}`);  
  16.     xhr.responseType = "blob";  
  17.     xhr.onload = function () {  
  18.       if (this.status == 200) {  
  19.         //接受二进制文件流  
  20.         console.log(this)  
  21.         var blob = this.response;  
  22.         const blobUrl = window.URL.createObjectURL(blob);  
  23.           // 这里的文件名根据实际情况从响应头或者url里获取  
  24.           const a = document.createElement('a');  
  25.           a.href = blobUrl;  
  26.           a.download = fileName;  
  27.           a.click();  
  28.           window.URL.revokeObjectURL(blobUrl);  
  29.       }  
  30.     }  
  31.     xhr.send();  
  32.   }  
  33. }  
  34.   
  35. // 获取url中需要的数据  type  1: 获取文件名  2：获取后缀  3：获取文件名+后缀  4:获取文件前缀  
  36. export function urlFile(url, type) {  
  37.   let filename = url.substring(url.lastIndexOf('/') + 1)  
  38.   switch (type){  
  39.       case 1: return filename; break;  
  40.       case 2: return filename.substring(filename.lastIndexOf(".") + 1); break;  
  41.       case 3: return filename.substring(0, filename.lastIndexOf(".")); break;  
  42.       case 4: return url.substring(0, url.lastIndexOf('/') + 1)  
  43.   }     
  44. }  

 

vue | 评论(0) | 引用(0) | 阅读(1031)
第一页 1 最后页 [ 显示模式： 摘要 | 列表 ]