网站倒计时

来源：互联网发布：qq飞车神圣天使数据编辑：程序博客网时间：2024/06/06 08:16

html

css

*{
padding:0;
margin:0;
}
.wrap{
width:100%;
height:60px;
background:green;
margin-top:40px;
}
.inner{
width:200px;
height:60px;
margin:0 auto;
}
.inner>div{
float:left;
font-size:30px;
margin:0 5px;
text-align:center;
font-weight:700;
margin-top:10px;
color:#fff;
border-radius:5px;
}
#hour,#minute,#second{
width:40px;
height:40px;
background:rgba(0,0,0,0.5);
}

//第一种方法：

/**
* Created by SlzStar on 2017/8/8.
*/
window.onload = function () {
// 获取元素；
var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var second = document.getElementById("second");
var timeCha;
goTime(hour, minute, second, "2017/8/8 18:00:00");
if (timeCha > 0) {
setInterval(function () {
goTime(hour, minute, second, "2017/8/8 18:00:00");
}, 1000)
}
//将时间获取时间的封装到一个函数里，便于获取；
function goTime(h, m, s, time) {
//获取现在的时间戳
var now = new Date();
// 获取截止时间的时间戳；
var starTime = new Date(time);
//现在时间和截止时间的差值；
timeCha = starTime.getTime() - now.getTime(); //得到的是毫秒数；
if (timeCha <= 0) {
alert(" 已经停止活动！")
return;
}
// 相差的小时数；
var leftHour = Math.floor(timeCha / 1000 / 60 / 60);
h.innerHTML = zero(leftHour);
//相差的分钟数；
var leftMinut = Math.floor((timeCha - leftHour * 1000 * 60 * 60) / 1000 / 60);
m.innerHTML = zero(leftMinut);
//相差的秒数；
var leftSecond = Math.floor((timeCha - leftHour * 1000 * 60 * 60 - leftMinut * 1000 * 60) / 1000);
s.innerHTML = zero(leftSecond);
}

//定义小于10 前边加0；
function zero(num) {
if (num < 10) {
num = "0" + num;
}
return num;
}
}

//第二种方法；

/**
* Created by SlzStar on 2017/8/8.
*/
window.onload = function(){
var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var second = document.getElementById("second");
getTime(hour,minute,second,"2017/8/8 19:00:00");
var leftTime;
console.log(leftTime);
if(leftTime>0){
setInterval(function(){
getTime(hour,minute,second,"2017/8/8 19:00:00");
},1000)
};

function getTime(h,m,s,time){
var now = new Date();
var starTime = new Date(time);
leftTime = starTime.getTime()-now.getTime();//剩余的时间
if(leftTime<=0){
alert("已经停止活动");
return;
}
//剩余的小时；
var hours = Math.floor(leftTime/1000/60/60);
h.innerHTML = zero(hours);
//剩余的分钟数；剩余的模是分钟，前边整除的是小时；
var minute = Math.floor(leftTime/1000/60%60);
m.innerHTML = zero(minute);
//剩余的秒数；
var second = Math.floor(leftTime/1000%60);
s.innerHTML = zero(second);

}

// 前导0函数；
function zero(num){
if(num<10){
num = "0"+num;
}
return num;
}
}

阅读全文

0 0