倒计时 男娘i 2023-05-31 06:38 45阅读 0赞 **js部分:** export default function CalcTime(endtime) { var obj = {}; var endDate = new Date(endtime); //当前时间 var nowDate = new Date(); //相差的总秒数 var totalSeconds = parseInt((endDate - nowDate) / 1000); //天数 var days = Math.floor(totalSeconds / (60 * 60 * 24)); //取模(余数) var modulo = totalSeconds % (60 * 60 * 24); //小时数 var hours = Math.floor(modulo / (60 * 60)); modulo = modulo % (60 * 60); //分钟 var minutes = Math.floor(modulo / 60); //秒 var seconds = modulo % 60; if (hours < 10) { hours ='0'+hours } if (minutes < 10) { minutes ='0'+minutes } if (seconds < 10) { seconds ='0'+seconds } obj.days = days; obj.hours = hours; obj.seconds = seconds; obj.minutes = minutes; return obj } **vue部分:** <template> <div> <!-- 倒计时 --> <div class="count-down"> <span>{ {leftTime.hours}}</span> <i>时</i> <span>{ {leftTime.minutes}}</span> <i>分</i> <span class="last">{ {leftTime.seconds}}</span> <i>秒</i> </div> </div> </template> <script> import CalcTime from "@/utils/time"; export default { data() { return { timer: null, leftTime: { hours: "", minutes: "", seconds: "" }, endTime: "2019/10/23 24:00" }; }, created() { //一秒执行一次 this.timer = setInterval(() => { //计算时间 var a = CalcTime(this.endTime); this.leftTime.hours = a.hours; this.leftTime.minutes = a.minutes; this.leftTime.seconds = a.seconds; }, 1000); }, //组件销毁时,释放定时器 destroyed() { this.timer = null; }, components: { Bar } }; </script> <style lang="less" scoped> .count-down { text-align: center; span { width: 19px; height: 25px; line-height: 25px; background: #323232; color: white; display: inline-block; border-radius: 5px; } .last { background: #f3344a; } i { font-style: normal; padding: 0 5px; } } </style>
相关 倒计时 js部分: export default function CalcTime(endtime) { var obj = {}; var 男娘i/ 2023年05月31日 06:38/ 0 赞/ 46 阅读
相关 C#倒计时 C\新手,记录一下倒计时,30s的倒计时,附上效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6 柔光的暖阳◎/ 2023年01月19日 03:09/ 0 赞/ 306 阅读
相关 js 天数倒计时 时间倒计时 export function getOverTimeDown(endDateStr: string, outValue?: { value: string }, fn àì夳堔傛蜴生んèń/ 2022年09月11日 12:10/ 0 赞/ 322 阅读
相关 倒计时 验证输入手机号 验证码倒计时 ![这里写图片描述][SouthEast]![这里写图片描述][SouthEast 1] \如上图所示 要实现验证码的倒计时的效果 不念不忘少年蓝@/ 2022年06月02日 10:12/ 0 赞/ 403 阅读
相关 JS-实现秒表倒计时+缓存倒计时 实现秒表倒计时+缓存倒计时功能 <!DOCTYPE html> <html> <head> <meta ch 约定不等于承诺〃/ 2022年05月17日 12:38/ 0 赞/ 405 阅读
相关 倒计时程序 倒计时程序的设计 /对于一个数字倒计时的设计 问题描述:在日常工作中经常见到倒计时的设计,那么,如何设计倒计时呢? 给出一个数字,每隔一秒减一 红太狼/ 2022年04月02日 04:46/ 0 赞/ 354 阅读
相关 javascript倒计时 <script type="text/javascript"> clock();//一开始来去初始化倒计时 setI 阳光穿透心脏的1/2处/ 2022年01月26日 15:01/ 0 赞/ 348 阅读
相关 倒计时 js代码 var EndTime= new Date('2017/2/18 00:00:00'); //设置到期时间 var NowTime = ne - 日理万妓/ 2021年12月23日 08:41/ 0 赞/ 538 阅读
相关 js倒计时 ![20190820151447888.png][] function tow(n) { return n >= 0 && - 日理万妓/ 2021年10月19日 09:52/ 0 赞/ 479 阅读
相关 JS 倒计时 经常遇到需要倒计时的地方,下面的JS可以简单实现倒计时,当然可以加上Css使得界面更加美观! `<script type=` `"text/javascript"` `>` 约定不等于承诺〃/ 2021年09月29日 17:34/ 0 赞/ 579 阅读
还没有评论,来说两句吧...