一、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;
//getTime():getTime 方法返回一个整数值,这个整数代表了从 1970 年 1 月 1 日开始计算到 Date 对象中的时间之间的毫秒数。 //获取天数 1天 = 24小时 1小时= 60分 1分 = 60秒 var oDay = parseInt(countDown/(24*60*60));
//parseInt:返回由字符串转换得到的整数。 //获取小时数 //特别留意 %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 = '元旦到了'; } }