倒计时
来源:互联网 发布:淘宝小号哪里买 编辑:程序博客网 时间:2024/06/05 23:57
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<styletype="text/css">
html{
height:500px;
background-color: black;
padding-top:300px;
text-align: center;
background:url(img/love.jpg)no-repeat ;
background-size:100% 100%;
}
#title{
color: white;
font-size:60px;
text-shadow:0px 0px5px rgb(251,79, 234),0px 0px15px rgb(251,79, 234),0px 0px25px rgb(251,79, 234),0px 0px35px rgb(251,79, 234),0px 0px45px rgb(251,79, 234),0px 0px55px rgb(251,79, 234), 0px 0px 65px rgb(251, 79, 234);
}
</style>
</head>
<body>
<h1id="title"></h1>
<scripttype="text/javascript">
varoH1 = document.querySelector("#title");
oH1.innerHTML = "00天00小时00秒00";
// 原理:获取到需要倒计时的两个日期
// 通过日期获取到距离1970-1-1的毫秒数
// 然后计算差值,处理为计时信息
functionkong() {
// 获取现在时间
varnow = new Date();
// 获取未来时间
varfuture = new Date(2016, 7, 6, 7);
// 获取毫秒
varkong = (future.getTime() - now.getTime()) / 1000;
// 86400 = 60 * 60 * 24
varday = parseInt(kong / 86400);
kong = kong % 86400;
varhour = parseInt(kong / 3600);
kong = kong % 3600;
varminute = parseInt(kong / 60);
kong = kong % 60;
varsecond = parseInt(kong);
if(second < 10) {
second= "0" +second;
}
if(minute < 10) {
minute= "0" +minute;
}
oH1.innerHTML = "距离里约奥运会还有:" +day + "天"+ hour + "小时"+ minute + "分"+ second + "秒";
}
kong();
setInterval(function() {
kong();
}, 1000);
</script>
</body>
</html>