倒计时主要用于电商网站、抢购商品等等,我们先了解相关基础知识:
首先定义对象的关键词
var date = new Date()
- getFullYear()获取年
- getMonth()获取月 ——从0开始,需要+1
- getDate()获取日
- getDay() 获取星期
- getHours()获取时
- getMinutes()获取分
- getSeconds()获取秒
- getTime()获取毫秒
demo
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="content"></div>
</body>
<script type="text/javascript">
function checkTime(i){
if(i<10){
i = '0'+i;
}
return i;
}
function showTime(){
var obj = new Date();
var year = obj.getFullYear();
var month = obj.getMonth()+1;
var dates = obj.getDate();
var day = obj.getDay();
var minutes = obj.getMinutes();
var seconds= obj.getSeconds();
var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
m = checkTime(minutes); //之所以这样赋值,是因为当小于10上,会出现01、02等
s = checkTime(seconds);
getEle('.content').innerHTML = year+'年'+month+"月"+dates+'日'+week[day]+m+'分'+s+"秒";
setTimeout(showTime,1000);
}
function getEle(name){
return document.querySelector(name)
}
showTime()
// console.log(obj.yearMonthDay())
setTimeout(showTime,500);
</script>
</html>
倒计天数
<body>
<div class="content"></div>
</body>
<script type="text/javascript">
// 首先要知道开始天数和结束天数,然后进行相减
var start = new Date();
var end = new Date('2018,2,14');//可以设置时间
//其次1天=24小时 1小时=60分钟 1分钟=60秒 1秒等于1000毫秒
var retule = (end.getTime() - start.getTime())/(24*60*60*1000);//用总共的秒数除以一天的秒数
//最后用math方法取整
retule = Math.ceil(retule)
document.querySelector('.content').innerHTML = "距离过年还有"+retule+"天"
</script>
过年回家倒计时
<body>
<div class="content"></div>
</body>
<script type="text/javascript">
function countDown(){
var start = new Date(); //开始时间
var end = new Date('2018/2/14,23:10:59');//结束时间,可以设置时间
//parseInt()取整
var result = parseInt((end.getTime()-start.getTime())/1000);//计算出豪秒
var d = parseInt(result/(24*60*60));//用总共的秒数除以1天的秒数
var h = parseInt(result/(60*60)%24);//精确小时,用去余
var m = parseInt(result/60%60);//剩余分钟就是用1小时等于60分钟进行趣余
var s = parseInt(result%60);
document.querySelector('.content').innerHTML = '距离过年回家还有'+d+'天'+h+'时'+m+'分'+s+'秒';
setTimeout(countDown,500);
//当倒计时结束时,改变内容
if(result<=0){
document.querySelector('.content').innerHTML = '过年喽'
}
}
countDown()
</script>