清明节倒计时
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery案例</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0}
body{background-color: #333;}
.box{width: 70%;height: 200px; line-height: 200px;text-align: center;color: #fff; margin: 50px auto;background: hsla(0,0%,100%,.15);border-radius: 20px;font-size: 35px;letter-spacing: 15px;}
</style>
</head>
<body>
<p class="box">距离清明节还有<span id="date"></span></p>
<script type="text/javascript">
// 清明节倒计时:
// 分析：得到清明节那天到1970年的总毫秒数 减去 现在到1970年的总毫秒数,在换算天，小时，分钟，秒
$(function(){
function Ro(){
//parse 方法可解析一个日期时间字符串，并返回1970/1/1 午夜距离该日期的毫秒数
$ftime = Date.parse('Apr 05 2019'); //得到清明节距离1970年的总毫秒数
$dtime = new Date(); //获取当前日期时间字符串
$time = $dtime.getTime(); //得到当前时间距离1970年的总毫秒数
$zmiao = Math.floor(($ftime-$time)/1000); //得到现在时间距离清明节的总秒数
$day = Math.floor($zmiao/86400); //得到天数 一天等于86400秒
$hours = Math.floor($zmiao%86400/3600); //取余 得到一天剩下的秒数，在除以3600得到小时
$mins = Math.floor($zmiao%3600/60);//总秒数除以3600得到还剩多少小时和多少秒，取余得到还有多少秒，在除以60得到分钟
$second = Math.floor($zmiao%60); //总秒数除以60得到还剩多少分钟，取余得到还有多少秒
$('#date').text($day+'天'+$hours+'小时'+$mins+'分钟'+$second+'秒');
}
setInterval(Ro,1000);
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例