首先把页面主体显示区域写出来。
<h3 id="loveTime">我们已经相爱：<span></span>天<span></span>小时<span></span>分<span></span>秒</h3> 下面来写JS语句
获取页面显示区域：
var loveTime = document.getElementById("loveTime").getElementsByTagName("span");先声明固定的日期时间和当前日期时间，计算两个时间差，取值取整，页面上显示出来即可，完整代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h3{
width: 400px;
height: 100px;
line-height: 95px;
border:1px solid #CCC;
border-radius: 10px;
box-shadow: 2px 2px 3px #CCC;
text-align: center;
margin: 10px auto;
}
</style>
</head>
<body>
<h3 id="loveTime">我们已经相爱：<span></span>天<span></span>小时<span></span>分<span></span>秒</h3>
</body>
<script>
var loveTime = document.getElementById("loveTime").getElementsByTagName("span");
setInterval(function(){
var love = "2019-05-07 05:20:14";
// 声明现在的时间和未来的时间
var onTime = new Date();
var time = new Date(love);
// 获得两个时间差
var num = onTime.getTime()-time.getTime();
// alert(num.substring(0, num.indexOf('-')));
// 计算天数(24小时60分钟60秒*1000毫秒) parseInt()取整
var day = parseInt(num/(24*60*60*1000));
// 获得去除天数后剩余的毫秒数
num = num%(24*60*60*1000);
// 计算小时和获得去除小时后剩余的毫秒数
var hour = parseInt(num/(60*60*1000));
num = num%(60*60*1000);
// 计算分钟和获得去除分钟后剩余的毫秒数
var minute = parseInt(num/(60*1000));
num = num%(60*1000);
// 计算秒
var seconde = parseInt(num/1000);
// 页面上显示
loveTime[0].innerHTML = day;
loveTime[1].innerHTML = hour;
loveTime[2].innerHTML = minute;
loveTime[3].innerHTML = seconde;
},100)
</script>
</html>
评论 (0)