前言
计时功能在网页上是非常多的，现在我就用原生JS做个计时功能吧
HTML

<div><label>得到毫</label>

	<h5></h5>

</div>

<div><label>得到秒</label>

	<h4></h4>

</div>

<div><label>得到分</label>

	<h3></h3>

</div>

<div><label>得到时</label>

	<h2></h2>

</div>

<div><label>得到天</label>

	<h1></h1>

</div>

JS

var StarTime = new Date().getTime();

			setInterval(function() {

				NotRetain();

			}, 500)

			function Retain() {

				//保留小数点

				var NowTime = new Date().getTime();

				//毫

				document.querySelectorAll("h5")[0].innerHTML = NowTime - StarTime + "毫秒";

				//秒

				document.querySelectorAll("h4")[0].innerHTML = (NowTime - StarTime) / 1000  + "秒"

				//分

				document.querySelectorAll("h3")[0].innerHTML = (NowTime - StarTime) / (1000 * 60)  + "分"

				//时

				document.querySelectorAll("h2")[0].innerHTML = (NowTime - StarTime) / (1000 * 60 * 60) + "时"

				//天

				document.querySelectorAll("h1")[0].innerHTML = (NowTime - StarTime) / (1000 * 50 * 60 * 24) + "天"

			}

			function NotRetain() {

				//不保留小数点

				var NowTime = new Date().getTime();

				//毫

				document.querySelectorAll("h5")[0].innerHTML = NowTime - StarTime + "毫秒";

				//秒

				document.querySelectorAll("h4")[0].innerHTML = parseInt((NowTime - StarTime) / 1000)  + "秒"

				//分

				document.querySelectorAll("h3")[0].innerHTML = parseInt((NowTime - StarTime) / (1000 * 60))  + "分"

				//时

				document.querySelectorAll("h2")[0].innerHTML = parseInt((NowTime - StarTime) / (1000 * 60 * 60)) + "时"

				//天

				document.querySelectorAll("h1")[0].innerHTML = parseInt((NowTime - StarTime) / (1000 * 50 * 60 * 24)) + "天"

			}

效果
保留小数点

不保留小数点

完整代码

<html>

	<head>

		<meta charset="utf-8" />

		<title>JS实现页面计时</title>

	</head>

	<body>

		<div><label>得到毫</label>

			<h5></h5>

		</div>

		<div><label>得到秒</label>

			<h4></h4>

		</div>

		<div><label>得到分</label>

			<h3></h3>

		</div>

		<div><label>得到时</label>

			<h2></h2>

		</div>

		<div><label>得到天</label>

			<h1></h1>

		</div>

		<script>

			var StarTime = new Date().getTime();

			setInterval(function() {

				Retain();

			}, 500)

			function Retain() {

				//保留小数点

				var NowTime = new Date().getTime();

				//毫

				document.querySelectorAll("h5")[0].innerHTML = NowTime - StarTime + "毫秒";

				//秒

				document.querySelectorAll("h4")[0].innerHTML = (NowTime - StarTime) / 1000  + "秒"

				//分

				document.querySelectorAll("h3")[0].innerHTML = (NowTime - StarTime) / (1000 * 60)  + "分"

				//时

				document.querySelectorAll("h2")[0].innerHTML = (NowTime - StarTime) / (1000 * 60 * 60) + "时"

				//天

				document.querySelectorAll("h1")[0].innerHTML = (NowTime - StarTime) / (1000 * 50 * 60 * 24) + "天"

			}

			function NotRetain() {

				//不保留小数点

				var NowTime = new Date().getTime();

				//毫

				document.querySelectorAll("h5")[0].innerHTML = NowTime - StarTime + "毫秒";

				//秒

				document.querySelectorAll("h4")[0].innerHTML = parseInt((NowTime - StarTime) / 1000)  + "秒"

				//分

				document.querySelectorAll("h3")[0].innerHTML = parseInt((NowTime - StarTime) / (1000 * 60))  + "分"

				//时

				document.querySelectorAll("h2")[0].innerHTML = parseInt((NowTime - StarTime) / (1000 * 60 * 60)) + "时"

				//天

				document.querySelectorAll("h1")[0].innerHTML = parseInt((NowTime - StarTime) / (1000 * 50 * 60 * 24)) + "天"

			}

		</script>

	</body>

</html>

后言
本文结束了，如果觉得本技术文章对你有帮助请给我点个赞,如果有什么不足的地方，给我提意见，让我加以改进

JS实现页面计时的更多相关文章

  1. JS实现页面进入、返回定位到具体位置

    最为一个刚入职不久的小白...慢慢磨练吧... JS实现页面返回定位到具体位置 其实浏览器也自带了返回的功能,也就是说,自带了返回定位的功能.正常的跳转,返回确实可以定位,但是有些特殊场景就不适用了. ...

  2. js jquery 页面加载初始化方法

    js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...

  3. WOW.js – 在页面滚动时展现动感的元素动画效果

    在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...

  4. js中页面刷新和页面跳转的方法总结

    .js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.histor ...

  5. Progress.js – 为页面上的任意对象创建进度条效果

    Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress ...

  6. JS刷新页面总和！多种JS刷新页面代码!

    1)<meta http-equiv="refresh"content="10;url=跳转的页面">10表示间隔10秒刷新一次2)<scri ...

  7. js控制页面的全屏展示和退出全屏显示

    <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...

  8. js刷新页面和跳转

    javascript返回上一页: 1.返回上一页 history.go(-1); 返回上两个页面 history.go(-2); <a href="javascript:history ...

  9. 大神：python怎么爬取js的页面

    大神:python怎么爬取js的页面 可以试试抓包看看它请求了哪些东西, 很多时候可以绕过网页直接请求后面的API 实在不行就上 selenium (selenium大法好) selenium和pha ...

随机推荐

  1. Java编程系列文章序言

    Java编程系列分为基础编程和高级编程两部分: 其中基础编程包括基础语法如变量和标识符,流程控制等,数组如一维数组二位数组等,及面向对象,异常处理: 高级部分多线程,常用类,注解,Java集合,泛型, ...

  2. 分布式系统监视zabbix讲解三之用户和用户组

    概述 Zabbix 中的所有用户都通过 Web 前端去访问 Zabbix 应用程序.并为每个用户分配唯一的登陆名和密码. 所有用户的密码都被加密并储存于 Zabbix 数据库中.用户不能使用其用户名和 ...

  3. （专题一）04 matlab矩阵表示

    矩阵的建立 1. 直接输入法建立矩阵, 建立一个三行三列的矩阵 >>A=[1,2,3;4,5,6;7,8,9] 建立一个三行两列的矩阵 >>B=[1,2;4,5;7,8] 2. ...

  4. CSS、bootstrap4等相关疑难杂症

    说明 本篇博客仅用于个人随笔,所以内容比较随意. 在bootstrap4中,引入样式后,按钮.输入框等组件的选取状态会出现黑色加重边框,该如何解决? 解决示例: input:focus{outline ...

  5. IntelliJ IDEA编辑器激活码

    2020-3-31 日 亲自测试有效,什么时候失效就母鸡了 激活码一: T3ACKYHDVF-eyJsaWNlbnNlSWQiOiJUM0FDS1lIRFZGIiwibGljZW5zZWVOYW1lI ...

  6. 刷题[NPUCTF2020]ezlogin

    xpath注入 xpath注入这篇文章有关于xpath很详细的解答,包括原理等,详细了解请见此篇. 我个人再稍微讲一讲: 首先它的网站目录下会有一个xml文件,大概格式是这样: <?xml ve ...

  7. kmt字符串匹配

    # -*- coding:utf-8 -*-class StringPattern: def findAppearance(self, A, lena, B, lenb): pos=0 tmp = 0 ...

  8. myBatis 日记

    一级缓存默认开启, 有效范围是在当前sqlsession, 同一个SqlSession对象执行相同的sql并参数也要相同,缓存才有效. 在同一个会话里面,多次执行相同的SQL 语句,会直接从内存取到缓 ...

  9. 票房和口碑称霸国庆档，用 Python 爬取猫眼评论区看看电影《我和我的家乡》到底有多牛

    今年的国庆档电影市场的表现还是比较强势的,两名主力<我和我的家乡>和<姜子牙>起到了很好的带头作用. <姜子牙>首日破 2 亿,一举刷新由<哪吒之魔童降世&g ...

  10. 注册表“CLSID”下面的“InprocServer32”子键是什么？

    这个键值有什么用?每个CLSID下基本都有,即使没有其它项也会有此项.谁能详细说下,"InprocServer32"子键起什么作用?谢了. 刚好遇到这问题了,这是我找到的:Inpr ...