JS实现倒计时效果

时间:2021-07-18 22:01:49

1. 显示当前系统时间

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>当前系统时间</title>
<script type="text/javascript" language="javascript">
window.onload=function()
{
showTime();
}
function checkTime(i)
{
if(i<10)
{
i="0"+i;
}
return i;
}
function showTime()
{
var myDate = new Date();
var year = myDate.getFullYear();
var month = myDate.getMonth();
var date = myDate.getDate();
var d = myDate.getDay();
var h = myDate.getHours();
var m = myDate.getMinutes();
var s = myDate.getSeconds();
m = checkTime(m);
s = checkTime(s);
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
document.getElementById('show').innerHTML = year+'年'+month+'月'+date+'日'+' '+weekday[d]+' '+h+':'+m+':'+s;
setTimeout(showTime,500);
}

</script>
</head>
<body>
<div class="content1">
<div id="show">显示时间的位置</div>
</div>
</body>
</html>
效果截图:

              JS实现倒计时效果

2. 倒计时(精确到某一天)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>回校倒计时</title>
</head>
<script type="text/javascript" language="javascript">
window.onload = function()
{
var curtime = new Date();
var endtime = new Date("2017,8,25")
var lefttime = Math.ceil((endtime.getTime()-curtime.getTime())/(24*60*60*1000));
// 1 天= 24小时 1小时= 60分 1分=60秒 1秒=1000毫秒
document.getElementById('timeShow').innerHTML ="回校倒计时:"+" "+lefttime+"天";
}
</script>
<body>
<div class="content2">
<div class="txtshow"><span id="timeShow"></span></div>
</div>
</body>
</html>

效果截图:

        JS实现倒计时效果

3. 限时抢购

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>限时抢</title>
</head>
<body>
<div class="content3">
<div class="time">还剩<span id="LeftTime"></span></div>
</div>
<script type="text/javascript" language="javascript">
window.onload = function()
{
showTime();
function showTime()
{
var curtime = new Date();
var endtime = new Date("2017/8/10,15:30:12")
var lefttime = parseInt((endtime.getTime()-curtime.getTime())/1000);
var d = parseInt(lefttime/(24*60*60));
var h= parseInt(lefttime/(60*60)%24);
var m = parseInt(lefttime/60%60);
var s = parseInt(lefttime%60);
document.getElementById('LeftTime').innerHTML=d+'天'+h+'小时'+m+'分'+s+'秒';
if (lefttime<=0)
{
document.getElementById('LeftTime').innerHTML="团购结束!"
}
setTimeout(showTime,500);
}

}
</script>
</body>
</html>
效果截图:

        JS实现倒计时效果