工作中经常用到倒计时的功能，最近在整理之前做的项目的时候，发现自己写过一个倒计时的功能的效果，这里和大家分享下！实现这个功能是用原生js写的，不需要加载额外的库文件！功能比较简单，但是可以在此基础上扩展程序，得到想要的效果！
这里附上效果图先：
效果比较简单，只是简单的加了下样式！
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>倒计时功能</title>
<style type="text/css">
#box{width:300px; height:60px; background:#000;margin:0 auto;}
#box ul{margin:0; padding:0;width:300px; height:60px; clear:both;}
#box ul li{list-style:none; float:left;width:100px; height:60px; text-align:center; font:40px/60px 微软雅黑; color:#fff;}
.fr{float:right;}
</style>
</head>
<body>
<div id="box">
<ul>
<li id="hourseCon">00</li>
<li id="minuteCon">00</li>
<li id="secondCon">00</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var timer;
function ShowCountDown(year,month,day,hourss)
{
var now = new Date()
var endDate = new Date(year, month-1, day ,hourss);
var leftTime=parseInt(endDate.getTime())-parseInt(now.getTime());
if(leftTime <= 0)
{
leftTime = 0;
}
var leftsecond = parseInt(leftTime/1000);
var hour = Math.floor(leftsecond/3600).toString();
var minute = Math.floor((leftsecond-hour*3600)/60).toString();
var second = Math.floor(leftsecond-hour*3600-minute*60).toString();
var getHourseC = document.getElementById("hourseCon");
var getMinuteC = document.getElementById("minuteCon");
var getSecongC = document.getElementById("secondCon");
getHourseC.innerHTML = (hour.length < 2) ? ‘0‘+ hour : hour;
getMinuteC.innerHTML = (minute.length < 2) ? ‘0‘+ minute : minute;
getSecongC.innerHTML = (second.length < 2) ? ‘0‘+ second : second;
}
//开启计时功能
//timestring 时间戳（这里传过来的是2014-9-25） hours是截止的时间（这里以小时为例）
function startCount(timestring,hours)
{
var timef = timestring.toString();
var ss = [];
ss = timef.split("-");
var year = ss[0];
var month = ss[1];
var day = ss[2];
var hour = hours;
timer = window.setInterval(function()
{
day = parseInt(ss[2]);
ShowCountDown(year,month,day,hour);
var hourhtml = document.getElementById("hourseCon").innerHTML;
var minutehtml = document.getElementById("minuteCon").innerHTML;
var secondhtml = document.getElementById("secondCon").innerHTML;
//倒计时结束
if(hourhtml == ‘00‘ && minutehtml == ‘00‘ && secondhtml == ‘00‘)
{
window.clearInterval(timer);
}
}, 1000);
}
startCount(‘2014-9-28‘,16);
}
</script>
上面的js做了一点简单的处理，当位数只有1位的时候会在前面自动补0!
时间： 2024-10-16 16:14:51