您的位置：首页 > Web前端 > JavaScript

原生js实现倒计时

2017-11-14 15:44 295 查看

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>原生js 当前时间倒计时代码</title>

<style>

*{margin:0;padding:0;}

body{text-align:center;}

.text{margin-top:150px;font-size:14px;}

</style>

<script>

window.onload=function(){

getMyTime();

getMyTime1();

}

//1.前面补0

function p(n){

return n<10?'0'+n:n;

}

//2.倒计时

function getMyTime(){

var startDate=new Date();

var endDate=new Date('2017/11/14 16:00:00');

var countDown=(endDate.getTime()-startDate.getTime())/1000;

var day=parseInt(countDown/(24*60*60));

var h=parseInt(countDown/(60*60)%24);

var m=parseInt(countDown/60%60);

var s=parseInt(countDown%60);

document.getElementById('time').innerHTML=day+'天'+p(h)+'时'+p(m)+'分'+p(s)+'秒';

setTimeout('getMyTime()',500);

if(countDown<=0){

document.getElementById('time').innerHTML='活动结束';

}

}

//3.当前时间

function getMyTime1(){

var myDate=new Date();

var year=myDate.getFullYear();

var month=myDate.getMonth()+1;

var day=myDate.getDate();

var week=myDate.getDay();

var array=['星期日','星期一','星期二','星期三','星期四','星期五','星期六',];

var hour=myDate.getHours();

var minute=myDate.getMinutes();

var second=myDate.getSeconds();

document.getElementById('time1').innerHTML=year+'年'+month+'月'+day+'日'+' '+array[week]+' '+p(hour)+':'+p(minute)+':'+p(second);

setTimeout('getMyTime1()',500);

}

</script>

</head>

<body>

<div class="text">

<p>倒计时间：<span id="time"></span></p>

<p>当前时间：<span id="time1"></span></p>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航