实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 1500px;
height: 300px;
background: yellowgreen;
margin: 100px auto;
font-size: 30px;
text-align: center;
line-height: 300px;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
</head>
<body>
<div id="box">
距离五一还有<span></span>
</div>
<script>
function getWuyi(){
/*清明节倒计时案例*/
//var QingMing = Date.parse('Apr 5,2019'); //1970/1/1距离2019/4/5清明的时间（毫秒数）
var QingMing = Date.parse('May 1,2019'); //1970/1/1距离2019/5/1劳动节的时间（毫秒数）
//console.log(QingMing);
var now = new Date();//现在时间
var nowTime = now.getTime(); //返回现在距 1970 年 1 月 1 日之间的毫秒数
var difference = QingMing - nowTime;//时间差
//1秒等于1000毫秒 1分钟等于60000毫秒 1小时等于3600000毫秒 1天等于86400000毫秒
var day = Math.floor(difference/86400000); //天
var yushu=difference%86400000; // 余下的秒数
//document.write(day);
var hour = Math.floor(yushu/3600000); //小时
var hour_ys = yushu % 3600000; //除去小时余下的毫秒数
var fen = Math.floor(hour_ys/60000); //分钟
var fen_ys = hour_ys%60000; //除去分钟余下的毫秒数
var miao = Math.floor(fen_ys/1000); //秒
//console.log(day+'天'+hour+'时'+fen+'分'+miao+'秒');
$('span').text(day+'天'+hour+'时'+fen+'分'+miao+'秒');
}
setInterval(getWuyi,1000);
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例