简单的倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<textarea name="" id="txt1" cols="30" rows="10"></textarea>
<textarea name="" id="txt2" cols="30" rows="10"></textarea>
<button id="time_btn">测试倒计时</button>
<div id="timelayer" class="timelayer">
<div class="con">
<h4>离活动开始还有</h4>
<p>
<span id="t_d"></span> 天
<span id="t_h"></span> 小时
<span id="t_m"></span> 分钟
<span id="t_s"></span> 秒
</p>
<button id="close" class="close">关闭</button>
</div>
</div>
<script type="text/javascript">
var txt1 = document.getElementById('txt1');
var txt2 = document.getElementById('txt2');
// 设置活动时间的格式为 2017-11-27 00:00:00
var theTime = "2019-11-28 00:00:00";
var timeLayer = document.getElementById("timelayer");
var timeLayerClose = document.getElementById("close");
var timeBtn = document.getElementById('time_btn');
timeBtn.onclick = function () {
//注意：必须将字符-转换为/，否则IOS不能识别
var setDate = new Date(Date.parse(theTime.replace(/-/g, "/")))
.getTime(); //Date.parse(new Date()); //字符串转换为时间戳
var nowDate = new Date().getTime();
console.log(setDate);
console.log(nowDate);
if (setDate <= nowDate) {
//活动开始
console.log('start')
} else {
//活动未开始，倒计时
setInterval(GetRTime, 0);
timeLayer.classList.add('show')
}
}
//弹框JS
timeLayerClose.onclick = function () {
timeLayer.classList.remove('show')
}
// 倒计时JS
function GetRTime() {
var EndTime = new Date(Date.parse(theTime.replace(/-/g, "/"))).getTime();
var NowTime = new Date().getTime();
txt1.innerText = EndTime;
txt2.innerText = NowTime;
var t = EndTime - NowTime;
var d = 0;
var h = 0;
var m = 0;
var s = 0;
if (t >= 0) {
d = Math.floor(t / 1000 / 60 / 60 / 24);
h = Math.floor(t / 1000 / 60 / 60 % 24);
m = Math.floor(t / 1000 / 60 % 60);
s = Math.floor(t / 1000 % 60);
}
document.getElementById("t_d").innerHTML = d;
document.getElementById("t_h").innerHTML = h;
document.getElementById("t_m").innerHTML = m;
document.getElementById("t_s").innerHTML = s;
}
</script>
<style>
.timelayer {
display: none;
position: fixed;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
">rgba(0, 0, 0, .6);
}
.timelayer.show {
display: block !important;
}
.timelayer .con {
">#fff;
width: 260px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -73px;
padding: 35px 20px;
border-radius: 8px;
overflow: hidden;
margin-left: -150px;
}
.timelayer h4 {
line-height: 45px;
font-size: 20px;
font-weight: 700;
color: #7e28c2;
text-align: center;
margin: 0px;
}
.timelayer p {
margin-top: 10px;
text-align: center;
font-size: 16px;
}
.timelayer p span {
padding: 0px 3px;
color: red;
font-weight: 700;
}
.timelayer .close {
position: absolute;
height: 35px;
width: 35px;
right: 0px;
top: 0px;
/*background: url(images/close3.png) center center no-repeat;*/
background-size: 20px;
}
</style>
</body>
</html>
