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 进度条效果实现代码整理
May 21 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
angular十大常见问题
Mar 07 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 Javascript
vue 修改 data 数据问题并实时显示操作
Sep 07 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 类型转换函数intval
2009/06/20 PHP
php 小乘法表实现代码
2009/07/16 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
PHP 图片水印类代码
2012/08/27 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
Javascript MD4
2006/12/20 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
Python列表切片用法示例
2017/04/19 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
html5时钟实现代码
2010/10/22 HTML / CSS
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
工商管理专业应届生求职信
2013/11/04 职场文书
运动会领导邀请函
2014/01/10 职场文书
代办社保委托书范文
2014/10/06 职场文书
房贷收入证明范本
2015/06/12 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
Python中的嵌套循环详情
2022/03/23 Python
TS 类型收窄教程示例详解
2022/09/23 Javascript
Python  序列化反序列化和异常处理的问题小结
2022/12/24 Python