(常用代码)原声JS 实现倒计时的效果。分/秒/毫秒/
2018-01-30 14:39
851 查看
(常用代码)原声JS 实现倒计时的效果。分/秒/毫秒/
第一步:构建HTML 结构和样式
<!-- 构建 HTML --> <div class="timing"> <span class="minute date">07</span> <span class="colon">:</span> <span class="second date">16</span> <span class="colon">:</span> <span class="millisecond date">87</span> </div>
<!--编写CSS 美颜效果--> .timing{ color: #ed4123; font-size: 20px; font-weight: 600; font-family: sans-serif; display: flex; } .timing > span{ display: block; float: left; } .date{ width: 35px; text-align: center; }
第二步:JS setInterval 间断执行操作DOM
/** * 操作页面 倒计时模块的 时间节点 * @param {Object} minute 分 * @param {Object} second 秒 * @param {Object} millisecond 毫秒 */ function timingInterVal(minute,second,millisecond) { var timing = setInterval(function() { //设置毫秒数 if((Number(millisecond.innerHTML)) <= 0 ) { //设置秒数 if((Number(second.innerHTML)) <= 0) { //设置分数 if((Number(minute.innerHTML)) <= 0) { //分钟倒计时结束 clearInterval(timing); //结束 具体操作 return false; }else { (Number(minute.innerHTML)) <= 10 ? minute.innerHTML = ('0' + ((Number(minute.innerHTML)) - 1)) : minute.innerHTML = ((Number(minute.innerHTML)) - 1); } second.innerHTML = '60'; }else { (Number(second.innerHTML)) <= 10 ? second.innerHTML = ('0' + ((Number(second.innerHTML)) - 1)) : second.innerHTML = ((Number(second.innerHTML)) - 1); } millisecond.innerHTML = '99'; }else { (Number(millisecond.innerHTML)) <= 10 ? millisecond.innerHTML = ('0' + (Number(millisecond.innerHTML) - 1)) : millisecond.innerHTML = (Number(millisecond.innerHTML) - 1); } },9); } //遍历页面中定义的 存在的倒计时 HTML 模块。 var timing = document.getElementsByClassName('timing'); for(var i = 0;i<timing.length;i++) { //分 var minute = timing[i].querySelector('.minute'); //秒 var second = timing[i].querySelector('.second'); //毫秒 var millisecond = timing[i].querySelector('.millisecond'); timingInterVal(minute,second,millisecond); }
相关文章推荐
- 纯js实现的论坛常用的运行代码的效果
- JS简单实用的倒计时效果实现代码
- js实现精确到毫秒的倒计时效果
- Html js实现倒计时效果参考代码
- JS简单实用的倒计时效果实现代码
- js实现的奥运倒计时时钟效果代码
- js实现的奥运倒计时时钟效果代码
- JS 实现倒计时数字时钟效果【附实例代码】
- 纯js实现的论坛常用的运行代码的效果
- js实现tab效果的源代码代码
- js 分栏效果实现代码
- js下通过getList函数实现分页效果的代码
- 纯js实现背景图片切换效果代码
- [JS代码]用JavaScript实现网页轮换广告效果
- 走马灯效果代码js appendChild实现的无缝滚动
- js常用排序实现代码
- Js实现网站常用的评分效果!
- 整理:常用的网页特殊效果JS代码
- js下通过getList函数实现分页效果的代码
- 用js实现倒计时(js代码)