原生JS实现简单的倒计时功能示例

2020-05-19

字数统计: 638 | 阅读时长≈ 3 分钟

1. 原生JS实现倒计时

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net js倒计时</title>
  <style>
    *{
      margin: 0;
      padding:0;
    }
    p {
      font-size: 80px;
      text-align: center;
    }
    p span {
      color: red;
    }
    p span.time {
      color: black
    }
    body{padding-top:200px;}
  </style>
</head>
<body>
<p>距离2019年还有</p>
<p><span></span></p>
<script>
  var oSpan = document.getElementsByTagName('span')[0];
  function tow(n) {
    return n >= 0 && n < 10 ? '0' + n : '' + n;
  }
  function getDate() {
    var oDate = new Date();//获取日期对象
    var oldTime = oDate.getTime();//现在距离1970年的毫秒数
    var newDate = new Date('2019/1/1 00:00:00');
    var newTime = newDate.getTime();//2019年距离1970年的毫秒数
    var second = Math.floor((newTime - oldTime) / 1000);//未来时间距离现在的秒数
    var day = Math.floor(second / 86400);//整数部分代表的是天；一天有24*60*60=86400秒 ；
    second = second % 86400;//余数代表剩下的秒数；
    var hour = Math.floor(second / 3600);//整数部分代表小时；
    second %= 3600; //余数代表 剩下的秒数；
    var minute = Math.floor(second / 60);
    second %= 60;
    var str = tow(day) + '<span class="time">天</span>'
        + tow(hour) + '<span class="time">小时</span>'
        + tow(minute) + '<span class="time">分钟</span>'
        + tow(second) + '<span class="time">秒</span>';
    oSpan.innerHTML = str;
  }
  getDate();
  setInterval(getDate, 1000);
</script>
</body>
</html>

2.倒计时实现执行代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>5秒后返回首页</title>
    <style type="text/css">
        .changeFont {
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <span id="spanTime"></span>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
    //1.首先声明seconds
    var seconds = 5;
    //2.声明定时器
    var timer = null;
    //3.开启定时器
    timer = setInterval(show,1000);
    //开启定时器后要执行的函数
    function show(){
        if(seconds==0){
            clearInterval(timer);//清除定时器
            window.location.href = "http://www.baidu.com";//跳转到百度首页
            return;
        }
        //将不断变化的秒数显示在页面上
        document.getElementById('spanTime').innerHTML = '<span class="changeFont">'+seconds+'</span>' + "秒后返回首页！"; //这里添加的class仅仅是为了改变 变化的秒数的样式
        seconds--; 
    } 
};
</script>

版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！