javaScript系列笔记 - JS生成倒计时

以动态修改p标签值为主

1、html 代码

<!-- daojishi -->
<div class="mask-app" style="height: 17%;"><div class="mask-time-box3" style="margin-top: -.1rem;"><div><p id="lazy">00:00</p></div></div>
</div>

2、js 代码

let one_second,one_minute, one_hour, elapsed, face;(function(){//倒计时函数 设置倒计时时间 单位：毫秒 36000为6分钟timeShow(36000);})();function timeShow(millisecond){one_second = 1000;                       //设置一秒为1000毫秒one_minute = one_second * 60;            //设置一分为60000毫秒one_hour = one_minute * 60;              //设置小时为3600000毫秒face = document.getElementById('lazy');  //上面定义的p标签  00:00elapsed = millisecond; //赋值给倒计时函数tick();
}function tick() {if (elapsed == 0) {elapsed = 361000;}elapsed = elapsed - 1000;let parts = [];parts[0] = '' + Math.floor( (elapsed % one_hour) / one_minute );parts[1] = '' + Math.floor( ( (elapsed % one_hour) % one_minute ) / one_second );console.info(parts[0]+ "-----" + parts[1]);parts[0] = (parts[0].length == 1) ? '0' + parts[0] : parts[0];  //分parts[1] = (parts[1].length == 1) ? '0' + parts[1] : parts[1];  //秒face.innerText = parts.join(':');setTimeout(tick, 1000);           //每过一秒重新计算 时间
}

3、css 代码

<style>.mask-app{bottom: 0;width:100%;border-top-right-radius:.2rem;border-top-left-radius:.2rem;background-color:#fff;height: 25%;position: fixed;}.mask-app-box3{align-items:center;justify-content:center;border-top:1px solid #9B9688;height: .6rem;width: 90%;margin: .1rem .2rem 0 .2rem;}.mask-app-box3 div{width:50%;text-align: center;align-items: center}.mask-app-box3 div span{color: #9B9688;font-size: .13rem;font-family: PingFangSC-Semibold, PingFang SC;width: 20%}
</style>

4、如果所设倒计时值大于一个小时，见如下代码：

function tick() {let now = new Date();let elapsed = now - new Date(startDate);let parts = [];parts[0] = '' + Math.floor( elapsed / one_hour );parts[1] = '' + Math.floor( (elapsed % one_hour) / one_minute );parts[2] = '' + Math.floor( ( (elapsed % one_hour) % one_minute ) / one_second );parts[0] = (parts[0].length == 1) ? '0' + parts[0] : parts[0];   //时parts[1] = (parts[1].length == 1) ? '0' + parts[1] : parts[1];   //分parts[2] = (parts[2].length == 1) ? '0' + parts[2] : parts[2];   //秒face.innerText = parts.join(':');requestAnimationFrame(tick);
}

设置p标签 <p id="lazy">00:00:00</p> 即可。

<!-- daojishi -->
<div class="mask-app" style="height: 17%;"><div class="mask-time-box3" style="margin-top: -.1rem;"><div><p id="lazy">00:00:00</p></div></div>
</div>

思路解析：

parts[0] = '' + Math.floor( (elapsed % one_hour) / one_minute ); 即：

parts[0] = '' + Math.floor( (360000 % 3600000) / 60000 );

.1 360000 (表示当前毫秒值为360000，即6分钟)，除以3600000(即60分钟，一个小时) == 0, 我们设置的毫秒值并不够一个小时。

360000%360000=360000；取余为 360000 毫秒

.2 余数 360000\60000 = 6; 得出总分钟数为 6分钟。下面写到如果 parts[0].length == 1，就在前面追加一个0" ，即 06:00；

parts[0] = (parts[0].length == 1) ? '0' + parts[0] : parts[0];

.3 计算秒同理。都是基于总毫秒值计算的。

.4 设置延迟器，每过1秒，调用方法为p标签重新赋值。

setTimeout(tick, 1000);

javaScript系列笔记 - JS生成倒计时相关推荐

javaScript系列笔记 - JS实现MP4播放
1.html,引入代码(供参考,调用方式自行定义)  <div class="container-row explain- ...
【JavaScript系列】JS基础语法_从变量到数组一网打尽_有教程有实战
[JavaScript系列]基础语法_从变量到数组一网打尽_有教程有实战 JavaScript基础语法目录基础语法延迟和异步脚本变量数据类型数据类型简介简单数据类型与复杂数据类型栈和堆 ...
现代JavaScript教程---笔记---js部分
github地址:-js-/笔记.md at master · xiaochuanbbd/-js- · GitHub 教程地址:现代 JavaScript 教程转数字: NaN的情况: undefi ...
tom大叔blog--------深入理解javascript系列-----------笔记
之前一直收藏着tom大叔的blog,只是自己懒了下下...每个blog都像一个秘籍,每次看都有收获,也许自己道行太浅吧..不过还是很高兴,记下..也为了督促自己坚持下去... 一.深入理解JavaSc ...
JavaScript学习笔记——JS基础0
JavaScript的起源: JavaScript诞生于1995年,它的出现主要是用于处理网页中的前端验证.所谓的前端验证,就是指检查用户输入的内容是否符合一定的规则.比如:用户名的长度,密码的长度, ...
JavaScript学习笔记——JS中的变量复制、参数传递和作用域链
今天在看书的过程中,又发现了自己目前对Javascript存在的一个知识模糊点:JS的作用域链,所以就通过查资料看书对作用域链相关的内容进行了学习.今天学习笔记主要有这样几个关键字:变量.参数传递.执 ...
菜鸟教程-Javascript学习笔记-JS函数之前
教程连接是: https://www.runoob.com/js/js-tutorial.html DOM(一些操作页面元素的方法) BOM(一些操作浏览器的方法) ################# ...
JavaScript学习笔记——JS错误处理
JavaScript 错误 try 语句测试代码块的错误 catch 语句处理错误 throw 语句创建自定义错误 JavaScript抛出错误当错误发生时,当事情出问题时,JavaScript 引 ...
JavaScript学习笔记——JS基础9
90邮件的正则 <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...

javaScript系列笔记 - JS生成倒计时

javaScript系列笔记 - JS生成倒计时相关推荐

最新文章

热门文章