js实现倒计时效果

2023年3月3日 261次阅读 来源: jia林

倒计时主要用于电商网站、抢购商品等等，我们先了解相关基础知识：
首先定义对象的关键词
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>
    原文作者：jia林
    原文地址: https://www.jianshu.com/p/f71abdd03698
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞