js实现有趣的倒计时效果


Posted in Javascript onJanuary 19, 2021

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 建立对象的方法
Apr 21 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
吐槽一下我所了解的Node.js
Oct 08 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
浅析node.js的模块加载机制
May 25 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
JavaScript接口实现方法实例分析
May 16 Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 #Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 #Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 #Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 #Vue.js
js数组的基本使用总结
Jan 18 #Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 #Javascript
js加减乘除精确运算方法实例代码
Jan 17 #Javascript
You might like
聊天室php&amp;mysql(一)
2006/10/09 PHP
PHP 一个页面执行时间类代码
2010/03/05 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
JavaScript之自定义类型
2012/05/04 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
AngularJS实现根据变量改变动态加载模板的方法
2016/11/04 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
深入理解python对json的操作总结
2017/01/05 Python
同时安装Python2 &amp; Python3 cmd下版本自由选择的方法
2017/12/09 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
几个Linux面试题笔试题
2016/08/01 面试题
校园新闻广播稿
2014/01/10 职场文书
室内拓展活动方案
2014/02/13 职场文书
党员示范岗材料
2014/12/19 职场文书
学生评语集锦
2015/01/04 职场文书
小学工作总结2015
2015/05/04 职场文书
检讨书格式范文
2015/05/07 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers
golang语言指针操作
2022/04/14 Golang