JavaScript实现前端倒计时效果


Posted in Javascript onFebruary 09, 2021

本文实例为大家分享了JavaScript实现前端倒计时效果的具体代码,供大家参考,具体内容如下

JavaScript实现前端倒计时效果

代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      padding: 10px;
      font-size: 100px;
    }
    
    p {
      float: left;
      width: 300px;
      height: 300px;
      border: 1px solid #000000;
      color: #ffffff;
      background-color: #333333;
      text-align: center;
      line-height: 300px;
    }
  </style>
</head>

<body>
  <div>
    <p class="hour">1</p>
    <p class="minute">2</p>
    <p class="second">3</p>
  </div>
  <script>
    window.addEventListener('load', function() {
      //获取元素
      var hour = document.querySelector('.hour'); //小时的黑盒子
      var minute = document.querySelector('.minute'); //分钟的黑色盒子
      var second = document.querySelector('.second'); //秒数的黑色盒子
      var inputTime = +new Date('2021-2-6 18:00:00'); //返回的是用户输入时间总的毫秒数
      countDown(); //先调用一次这个函数,防止第一次刷新页面有空白
      //开启定时器
      setInterval(countDown, 1000);

      function countDown() {
        var nowTime = +new Date(); //返回的是当前时间总的毫秒数
        var times = (inputTime - nowTime) / 1000; //tiems是剩余时间总的毫秒数
        var h = parseInt(times / 60 / 60 % 24); //时
        h = h < 10 ? '0' + h : h;
        hour.innerHTML = h; //把剩余的小时给小时黑盒子
        var m = parseInt(times / 60 % 60); //分
        m = m < 10 ? '0' + m : m;
        minute.innerHTML = m;
        var s = parseInt(times % 60); //当前的秒
        s = s < 10 ? '0' + s : s;
        second.innerHTML = s;
      }
    })
</script>

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

Javascript 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
Javascript 模式实例 观察者模式
Oct 24 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
JS判断一个数是否是水仙花数
Jun 11 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 #Vue.js
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 #Javascript
详解Vue的七种传值方式
Feb 08 #Vue.js
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 #Javascript
js 执行上下文和作用域的相关总结
Feb 08 #Javascript
微信小程序tab左右滑动切换功能的实现代码
Feb 08 #Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 #Javascript
You might like
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
js数组Array sort方法使用深入分析
2013/02/21 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python验证企业工商注册码
2015/10/25 Python
Python中str.format()详解
2017/03/12 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
Python装饰器原理与用法分析
2018/04/30 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
某公司Java工程师面试题笔试题
2016/03/27 面试题
解释一下钝化(Swap out)
2016/12/26 面试题
后勤岗位职责
2013/11/26 职场文书
毕业生求职自荐信怎么写
2014/01/08 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
顶撞老师检讨书
2014/02/07 职场文书
优秀党员获奖感言
2014/02/18 职场文书
中学生寄语大全
2014/04/03 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
建筑安全员岗位职责
2015/02/15 职场文书