js计时器

js计时器本示例利用 JavaScript 设计一个倒计时显示牌 实现方法 用结束时间减去现在时 获取时间差 再利用数学方法从时间差中分别获取日 时 分 秒等信息 最后通过定时器设置每秒执行一次 实现实时更新 操作步骤 1 使用 newDate 获取当前时间 使用 new 调用一个带有参数的 Date 对象 定义结束的时间 endtime newDate 2020 8 8 使用 getTime 方法获取现在时和结束时距离 1970 年 1 月 1 日的毫秒数 然后 求两个时间差 把时间差转

本示例利用 JavaScript 设计一个倒计时显示牌,实现方法:用结束时间减去现在时,获取时间差,再利用数学方法从时间差中分别获取日,时、分、秒等信息,最后通过定时器设置每秒执行一次,实现实时更新。

【操作步骤】

var showtime = function () { var nowtime = new Date(), //获取当前时间 endtime = new Date("2020/8/8"); //定义结束时间 var lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数 leftd = Math.floor(lefttime/(1000*60*60*24)), //计算天数 lefth = Math.floor(lefttime/(1000*60*60)%24), //计算小时数 leftm = Math.floor(lefttime/(1000*60)%60), //计算分钟数 lefts = Math.floor(lefttime/1000%60); //计算秒数 return leftd + "天" + lefth + ":" + leftm + ":" + lefts; //返回倒计时的字符串 }
var div = document.getElementById("showtime"); setInterval (function () { div.innerHTML = showtime(); }, 1000); //反复执行函数本身

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/211066.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月18日 下午11:16
下一篇 2026年3月18日 下午11:17


相关推荐

  • linux环境nginx启动命令_linux查看redis版本

    linux环境nginx启动命令_linux查看redis版本命令:/usr/local/nginx/sbin/nginx-c/usr/local/nginx/conf/nginx.conf、、、、、、、、、、、[root@localhostsbin]#ps-ef|grepnginxroot239571015:30?00:00:00nginx:masterprocess/usr/local/ng…

    2022年10月5日
    7
  • Matlab画图 线条的颜色、宽度等相关设置

    Matlab画图 线条的颜色、宽度等相关设置线条的属性有:Color——颜色、LineWidth——线条宽度、LineStyle——线型、LineJoin——线条边角的样式、AlignVertexCenters——锐化垂直线和水平线线条属性的默认值为([0,0,0],’-‘,’0.5′,’round’,’off’)颜色、线型、一、线条颜色二、线条宽度线条宽度的默认值为0.5,线条宽度只能指定正值。三、线条类型实例:plot(t…

    2022年5月29日
    423
  • MYSQL中 datediff、timestampdiff函数的使用

    MYSQL中 datediff、timestampdiff函数的使用对 mysql 中日期范围搜索的大致有三种方式 1 betweenand 语句 2 datediff 函数 3 timestampdif 函数 下面就具体说明下这三种方式 第一种 betweenand 语句 select fromdat documentwher datebetween 2018 07 01 and 2018 07 04 nbsp nbsp 结果是 1 号到 3 号的数据 这

    2026年3月19日
    1
  • 毕业设计之Qt播放器[通俗易懂]

    毕业设计之Qt播放器[通俗易懂]一、功能介绍1、有拖拉功能,将视频直接拖进,播放器即可播放视频2、可以有加密视频,将放视频的文件夹加密3、有定时开关机的功能4、有网上直接看视频的功能5、有打开本地视频的功能6、可以浏览照片7、可以播放歌曲8、有最新电影推荐功能9、播放列表10、1499小游戏,在线玩二、llplayer  以完成功能1、正常播放ok2、文件夹打开ok,

    2022年6月5日
    49
  • 苹果系统自带的计算机怎么恢复出厂设置,苹果Macbook电脑怎么恢复出厂设置【图文】…

    苹果系统自带的计算机怎么恢复出厂设置,苹果Macbook电脑怎么恢复出厂设置【图文】…苹果电脑预装Mac系统,简洁又安全,不过使用时间长了,难免会碰到一些问题,导致系统运行速度变得卡顿。恢复出厂设置是一个不错的办法,之前windows系统恢复出厂设置比较简单,但苹果Macbook电脑怎么恢复出厂设置?Mac系统提供恢复出厂系统的功能,主要分为离线和在线两种方法,感兴趣的一起来学习。苹果Macbook恢复出厂设置删除数据的方法:提醒:恢复出厂设置前请做好数据备份,以免对您造成损失。1…

    2022年6月17日
    62
  • 使用百度地图——入门

    使用百度地图——入门

    2022年1月17日
    46

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号