（常用代码）原声JS 实现倒计时的效果。分/秒/毫秒/

（常用代码）原声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编写的地址选择器,使用select编写的三联选择器
这是用原声js编写的地址选择器,使用select编写的三联选择器 <!DOCTYPE html> <html lang="en"> <head> ...
## 原声js制作简单灯光开关
标签代码:html部分: 开灯关灯 Css样式: #left,#right{ border-radius: 50%; color: red; line-height: 30px; width: 40 ...
html广告倒计时代码,js实现倒计时广告效果
页面上经常弹出一些广告,过了几秒之后才出现关闭广告按钮(或者关闭按钮才可点)或者剩余指定时间才给你跳过广告(其实从用户的角度看,这个效果挺烦人的哈哈哈),效果大概如下图: js实现倒计时广告效果.gi ...
原声JS面向对象实现的简单轮播
为什么80%的码农都做不了架构师?>>> 给自己定下了一周上传一篇总结博客的计划,实行起来却是坎坷的.这一周还有不到两个小时就过去了,只得拿之前的一则轮播凑个数.代码中的参数尚 ...
原声js，取消事件冒泡，点击按钮，显示box,点击屏幕其他地方，box隐藏
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
原声JS判断程序运行平台Pc OR Mobile
var userAgent = navigator.userAgent.toLowerCase(); if(!userAgent.match(".*(ip(hone|od)).*" ...
原声js 的兼容（屏幕尺寸、事件处理程序、阻止事件冒泡、事件目标等等）
1.事件处理程序 function addEvent(obj, type, fn) { //添加事件兼容 if (obj.addEventListener) { obj.addEventListene ...
【常用代码11】js关闭当前页面，关闭当前浏览器窗口。
js版 window.open('','_self');window.close(); 可以放在a标签里面 <a href="javascript:window.opener=null ...
原声JS瀑布流加延迟加载
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...

（常用代码）原声JS 实现倒计时的效果。分/秒/毫秒/

（常用代码）原声JS 实现倒计时的效果。分/秒/毫秒/相关推荐

最新文章

热门文章