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 相关文章推荐
jQuery 三击事件实现代码
Sep 11 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
深入理解React高阶组件
Sep 28 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 Javascript
vue开发拖拽进度条滑动组件
Sep 21 Javascript
vscode中使用npm安装babel的方法
Aug 02 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中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
PHP分页类集锦
2014/11/18 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
python pygame模块编写飞机大战
2018/11/20 Python
Flask框架模板继承实现方法分析
2019/07/31 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
python实现滑雪游戏
2020/02/22 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
keras输出预测值和真实值方式
2020/06/27 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
聘任书的写作格式及范文
2014/03/29 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
心理学培训心得体会
2016/01/22 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
最新最全的手机号验证正则表达式
2022/02/24 Javascript