大家好，欢迎来到IT知识分享网。
倒计时 这个名词并不陌生，比如：天猫，京东等一些网上商城都会推出一些限时特价商品，今天我们就一起编写一个属于自己的倒计时；
Ps: 首先做一件事情的时候，不应该盲目的去做，应该首当其冲的去想，脑子里面出现大概的思路。
一、首先我们应该在HTML放一个容器（这里面没有什么可解释的就是为了呈现倒计时）；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时制作</title>
<style>
.otime span{display:inline-block;padding: 10px 20px;background-color: green;opacity: 0.5;margin-left: 10px;color:red;}
</style>
</head>
<body>
<div class="text">
<p>距离元旦还剩余:<span id="time" class="otime"></span></p>
<p>当前时间：<span id="time1" class="otime"></span></p>
</div>
</body>
</html>
二、编写JS代码
//这个函数是为了适应格式 比如：01分01秒; function p (n){ return n < 10 ? '0'+ n : n; } //倒计时函数 function newTime (){ //定义当前时间 var startTime = new Date(); //定义结束时间 var endTime = new Date("2017/1/1 00:00:00"); //算出中间差并且已毫秒数返回; 除以1000将毫秒数转化成秒数方便运算； var countDown = (endTime.getTime() - startTime.getTime())/1000; //获取天数 1天 = 24小时 1小时= 60分 1分 = 60秒 var oDay = parseInt(countDown/(24*60*60)); //获取小时数 //特别留意 %24 这是因为需要剔除掉整的天数; var oHours = parseInt(countDown/(60*60)%24); //获取分钟数 //同理剔除掉分钟数 var oMinutes = parseInt(countDown/60%60); //获取秒数 //因为就是秒数 所以取得余数即可 var oSeconds = parseInt(countDown%60); //下面就是插入到页面事先准备容器即可; var html = "<span>" + p(oDay) + "天</span>"+ "<span>" + p(oHours) + "时</span>" + "<span>" + p(oMinutes) + "分</span>" +"<span>" + p(oSeconds) + "秒</span>"; document.getElementById('time').innerHTML = html; //别忘记当时间为0的，要让其知道结束了; if(countDown < 0){ document.getElementById('time').innerHTML = '元旦到了'; } }
这样就实现了一个计时器的效果，如果想要好看一点，只需要加点样式即可；
三、制作当前时间的秒表（也就是第二个容器需要做的）
1、直接编写JS代码
1 function oldTime (){ 2 var oDate = new Date(); 3 //获取年 4 var oFullyear = oDate.getFullYear(); 5 //获取月份 6 var oMonth = oDate.getMonth()+1; 7 //获取日期 8 var oDta= oDate.getDate(); 9 //获取星期 10 var oDay = oDate.getDay(); 11 var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']; 12 //获取小时 13 var oHours = oDate.getHours(); 14 //获取分钟 15 var oMinutes = oDate.getMinutes(); 16 //获取秒数 17 var oSeconds = oDate.getSeconds(); 18 //插入到容器中 19 var b = "<span>"+ oFullyear +"年</span>" + "<span>"+ oMonth +"月</span>" + "<span>"+ oDta+"日</span>" + "<span>"+ week[oDay] +"</span>" + "<span>"+ p(oHours) +"时</span>" + "<span>"+ p(oMinutes) +"分</span>" + "<span>"+ p(oSeconds) +"秒</span>"; 20 document.getElementById('time1').innerHTML = b; 21 22 }
—》如果学会了，不妨自己试一下，看看能不能做出更高级的计时哦;
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/30562.html
