js实现有趣的倒计时效果

js有趣的倒计时小案例，供大家参考，具体内容如下

代码：

!DOCTYPE htML>
    html lang="en">
     head>
      meta charset="UTF-8">
      meta name="viewport" content="width=device-width, inITial-scale=1.0">
      title>
    Document/title>
      style>
    * {
          margin: 0;
          padding: 0;
    }
        .wrap {
          overflow: hidden;
          width: 500px;
          height: 500px;
          background-color: #eeeeee;
          margin: 0 auto;
    }
        h2 {
          margin-top: 20px;
          text-align: center;
          color: #fff;
    }
        input {
          width: 70px;
    }
        .ipt {
          text-align: center;
          margin-top: 50px;
    }
        .run {
          width: 100px;
          height: 100px;
          background-color: #000;
          text-align: center;
          line-height: 100px;
          color: #fff;
          font-Size: 30px;
          border-radius: 50%;
          margin: 30px auto 0;
    }
        .juli {
          text-align: center;
          margin-top: 30px;
    }
        .sytime {
          text-align: center;
          margin-top: 60px;
          font-size: 25px;
          color: #fff;
    }
        .sytime span {
          font-size: 30px;
          color: red;
    }
        .juli span {
          font-size: 18px;
          color: red;
    }
      /style>
    /head>
     body>
      div class="wrap">
        h2>
    倒计时/h2>
        !-- 表单 -->
        div class="ipt">
          请输入: input type="text">
    年input type="text">
    月input type="text">
    日    /div>
        !-- 开始按钮 -->
        div class="run">
    开始/div>
        !-- 距离时间 -->
        p class="juli">
    现在距离-span class="julitime">
    0000/span>
    -还剩:/p>
        !-- 剩余时间 -->
        div class="sytime">
          span>
    00/span>
    天      span>
    00/span>
    小时      span>
    00/span>
    分      span>
    00/span>
    秒    /div>
      /div>
      script>
        // 获取元素    // 表单    VAR ipt = document.getelementsbytagname('input');
        // 按钮    var BTn = document.getElementsByclassname('run')[0];
        // 距离年份    var julitime = document.getElementsByClassName('julitime')[0];
        // 倒计时    var sytime = document.getElementsByClassName('sytime')[0];
        var time = sytime.getElementsByTagName('span');
        console.LOG(ipt, btn, julitime, time);
         var timerId = null;
    // 点击事件     btn.onclick = function() {
          if (ipt[1].value >
     12 || ipt[2].value >
 30) {
            alert('月份要小于12且日要小于30');
            return;
      }
 else if (ipt[0].value.trim() == '' || ipt[1].value.trim() == '' || ipt[2].value.trim() == '') {
            alert('内容不能为空');
            return;
      }
          timerId = setInterval(countTime, 1000);
     }
       function countTime() {
          // 获取输入年份      var ipty = ipt[0].value;
          // 获取输入月份      var iptm = ipt[1].value;
          // 获取输入日份      var iptd = ipt[2].value;
          // console.log(ipty, iptm, iptd);
          var str = ipty + '-' + iptm + '-' + iptd;
          // console.log(str);
          // 赋值给距离时间      julitime.innerHTML = str;
          // 当前距离1970，1,1毫秒数      var nowDate = +new Date();
          // 输入时间距离1970，1,1毫秒数      var inputFr = +new Date(ipty + '-' + iptm + '-' + iptd)        // 未来减去现在 秒数      var times = (inputFr - nowDate) / 1000;
          var d = parseInt(times / 60 / 60 / 24) //天      d = d  10 ? '0' + d : d;
          var h = parseInt(times / 60 / 60 % 24) //时      h = h  10 ? '0' + h : h;
           var m = parseInt(times / 60 % 60);
     //分      m = m  10 ? '0' + m : m;
           var s = parseInt(times % 60);
     //秒      s = s  10 ? '0' + s : s;
           // console.log(d, h, m, s);
          time[0].innerHTML = d;
          time[1].innerHTML = h;
          time[2].innerHTML = m;
          time[3].innerHTML = s;
    }
      /script>
    /body>
     /html>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• JS 倒计时实现代码(时、分，秒)
• JS实现倒计时(天数、时、分、秒)
• 简单易用的倒计时js代码
• js代码实现点击按钮出现60秒倒计时
• 2种简单的js倒计时方式
• 原生JS实现简单的倒计时功能示例
• js几秒以后倒计时跳转示例
• 一个不错的js html页面倒计时可精确到秒
• js实现点击获取验证码倒计时效果
• Javascript实现商品秒杀倒计时（时间与服务器时间同步）

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！