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 相关文章推荐
一段批量给页面上的控件赋值js
Jun 19 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 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
php实现斐波那契数列的简单写法
2014/07/19 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
python sorted方法和列表使用解析
2019/11/18 Python
如何定义TensorFlow输入节点
2020/01/23 Python
Django框架models使用group by详解
2020/03/11 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
Python自动登录QQ的实现示例
2020/08/28 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
英语专业毕业个人求职自荐信
2013/09/21 职场文书
优秀导游先进事迹材料
2014/01/25 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
干部培训工作总结2015
2015/05/25 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL