• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > 介绍Javascript实现定时器倒计时

介绍Javascript实现定时器倒计时

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了Javascript,定时器,倒计时等相关知识,希望对您有所帮助

Javascript实现定时器倒计时,话不多说直接上代码:

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><body>    <p>        <span>1</span>        <span>2</span>        <span>3</span>    </p>    <script>        var hour = document.querySelector('.hour'); //小时的黑色盒子        var minute = document.querySelector('.minute'); //分钟的黑色盒子        var second = document.querySelector('.second'); //秒数的盒子        var inputTime = +new Date('2021-4-10 23:00:00'); //返回的是用户输入的时间总的毫秒数        // 封装好的计算时间的函数        //先调用一次函数防止开始出现空白        countDown();        //开启定时器        setInterval(countDown,1000);        function countDown() {            var nowTime = +new Date(); //返回的是当前时间的走毫秒数            var times = (inputTime - nowTime) / 1000; //times是剩余时间的总数            // 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;            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;//把剩余的秒数给盒子            // return d + '天' + h + '时' + m + '分' + s + '秒';        }    </script></body></html>

这里封装了一个时间转换的函数:

function countDown() {    var nowTime = +new Date(); //返回的是当前时间的走毫秒数    var times = (inputTime - nowTime) / 1000; //times是剩余时间的总数    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;    return d + '天' + h + '时' + m + '分' + s + '秒';}



分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 一起来聊聊JavaScript函数柯里化
  • 在javascript中,NaN是什么类型?
  • javascript调试之console.table()
  • Javascript中常见的内置对象有哪些
  • Javascript怎么实现字符串替换星号
  • 解决JavaScript中数组排序sort不发生改变
  • Javascript怎么实现红绿灯
  • 两行 Javascript 代码生成 UUID的方法
  • Javascript怎么实现四位随机验证码
  • javascript怎么判断是否为null

相关文章

  • 2022-04-29Illustrator创建立体风格的黑胶唱机图标
  • 2022-04-29改用Server酱Turbo版推送WordPress评论
  • 2022-04-29PHP如何实现获取验证码
  • 2022-04-29一起聊聊thinkphp6使用think-queue实现普通队列和延迟队列
  • 2022-04-29CDR制作冰块立体字
  • 2022-04-29在CSS中怎么给按钮添加背景图片(详解及实例)
  • 2022-04-29PHP处理字符中的emoji表情(判断/移除/存储)
  • 2022-04-29PhotoShop打造五彩抽象透明的圆球形图标制作教程
  • 2022-04-29为什么不建议使用@import引入css
  • 2022-04-29Phpcms V9导航循环下拉菜单的调用技巧

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • WordPress程序打开速度慢的三种解决方法
    • 微信小程序页面向下滚动时tab栏固定页面顶部实例讲解
    • JavaScript中如何判断函数、变量是否存在
    • Navicat for MySQL连接MySQL报2005错误怎么办
    • 屏蔽无用的WordPress默认小工具
    • Thinkphp6自定义配置文件以及调用(config文件夹下的配置)
    • 如何解决微信公众平台php乱码问题
    • phpMyadmin怎么使用空密码登入
    • 实例讲解Laravel队列的简单使用
    • 修改phpMyAdmin导入数据库文件大小限制的解决方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有