<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript计时器</title>
<style>
.box{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
font-size:40px;
}
.font_size{
font-size:40px;
}
</style>
</head>
<body>
<div class="box">
<div>
<div><label>当前时间:</label></div>
<div><span id="current"></span></div>
</div>
<div>
<div>截至时间:</br>(截至时间需大于当前时间)</div>
<div><input type="text" class="font_size" id="endDate" placeholder="请输入截至日期" style="border: none;outline: none;" /></div>
<div style="margin-top: 10px;margin-left: 20px;">
<button id="beginTime" class="font_size" >开始倒计时</button>
<button id="endTime" class="font_size" >停止倒计时</button>
</div>
<div id="time" style="display: block;margin-top: 10px;margin-left: 25px;">
<span id="_d">00</span>
<span id="_h">00</span>
<span id="_m">00</span>
<span id="_s">00</span>
<span id="_ms">00</span>
</div>
</div>
</div>
<script type="text/javascript">
//初始化
document.getElementById("endDate").value = getDateYMDH();
document.getElementById("time").style.display="none";
//开始倒计时
document.getElementById("beginTime").onclick=function(){
document.getElementById("time").style.display="block";
countTime();
}
//停止倒计时
document.getElementById("endTime").onclick=function(){
document.getElementById("time").style.display="none";
countTime();
}
//显示当前时间
function getCurrent(){
document.getElementById("current").innerHTML = getDateFormate();
//递归每秒调用countTime方法,显示动态时间效果
setTimeout(getCurrent, 100);
}
getCurrent();
function countTime() {
var date = new Date();
var now = date.getTime();
var endDateStr = document.getElementById("endDate").value;
if(endDateStr == ""||document.getElementById("time").style.display=="none"||new Date(endDateStr)<new Date())
{
document.getElementById("time").style.display="none";
return;
}else{
document.getElementById("time").style.display="block";
}
var endDate = new Date(endDateStr);//设置截止时间
var end = endDate.getTime();
var leftTime = end - now; //时间差
var d, h, m, s, ms;
if(leftTime >= 0) {
d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
m = Math.floor(leftTime / 1000 / 60 % 60);
s = Math.floor(leftTime / 1000 % 60);
ms = Math.floor(leftTime % 1000);
if(ms < 100) {
ms = "0" + ms;
}
if(s < 10) {
s = "0" + s;
}
if(m < 10) {
m = "0" + m;
}
if(h < 10) {
h = "0" + h;
}
} else {
console.log('已截止')
}
//将倒计时赋值到div中
document.getElementById("_d").innerHTML = d + "天";
document.getElementById("_h").innerHTML = h + "时";
document.getElementById("_m").innerHTML = m + "分";
document.getElementById("_s").innerHTML = s + "秒";
document.getElementById("_ms").innerHTML = ms + "毫秒";
//递归每秒调用countTime方法,显示动态时间效果
setTimeout(countTime, 100);
}
//获取当前时间
function getDateFormate(){
var now = new Date();
return now.getFullYear()+"-"+(now.getMonth()+1)+"-"+now.getDate()+" "+now.getHours()+":"+now.getMinutes()+":"+now.getSeconds()+"."+now.getMilliseconds();
}
//获取当前时间
function getDateYMDH(){
var now = new Date();
return now.getFullYear()+"-"+(now.getMonth()+1)+"-"+now.getDate()+" 00:00:00";
}
</script>
</body>
</html>
javascript倒计时和即时时间显示
最新推荐文章于 2024-06-13 10:05:02 发布