前言
计时功能在网页上是非常多的，现在我就用原生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. python字符串和列表小案例

    python 目录 python 一.字符串 1.给定一个字符串,利用切片将字符串反转 2.给定一个字符串,将空格替换为逗号 3.给定一个字符串,大写改为小写 4.str = '' ,li = ['l ...

  2. 使用vue-cli（vue脚手架）快速搭建项目

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目.这篇文章将会从实操的角度,介绍整个搭建的过程. 1. 避坑前言 其实这次使用vue-cli的 ...

  3. Redis学习（三）java使用redis

    一.操作步骤 Redis除了命令行操作以外,还可以通过java代码进行操作,流程如下: 下载Jedis依赖包,并丢入工程中合适的位置 在Maven中引入redis的包 <!--引入redis包- ...

  4. Spring学习（三）Spring AOP 简介

    一.简介 定义 aop就是面向切面编程,在数据库事务中切面编程被广泛使用. 在面向切面编程的思想里面,把功能分为核心业务功能,和周边功能. 核心业务:比如登陆,增加数据,删除数据都叫核心业务 周边功能 ...

  5. Asp.Net Core Log4Net 配置分多个文件记录日志（不同日志级别）

    本文所有配置都是在core3.1环境下. 首先看看最终的效果. 请求监控:对每次请求的相关信息做一个记录. 全局异常:我不想我的错误信息,跟其他的信息混合在一起,查看的时候不大方便. 应用日志:这个主 ...

  6. 解决pycharm py文件运行后停止按钮变成了灰色的问题

  7. 从一段 Dubbo 源码到 CPU 分支预测的一次探险之旅

    每个时代,都不会亏待会学习的人. 大家好,我是 yes. 这次本来是打算写一篇 RocketMQ 相关文章的,但是被插队了,我也是没想到的. 说来也是巧最近在看 Dubbo 源码,然后发现了一处很奇怪 ...

  8. Redis 作者 Antirez 与 Contributor Mattsta 之间关于 CRC 的 Battle

    大家好,我是 yes. 昨天表弟说有个学妹问他 Redis 为什么要用 CRC16(key) mod 16384 来计算 key 所处槽的位置,我想这 CRC 一般都是用来校验的,通过多项式转换成二进 ...

  9. Hbuilder MUI 页面刷新及页面传值问题

    一.页面刷新问题 1.父页面A跳转到子页面B,B页面修改数据后再跳回A页面,刷新A页面数据 (1).父页面A代码 window.addEventListener("pageflowrefre ...

  10. 腾讯云Elasticsearch集群规划及性能优化实践

    ​一.引言 随着腾讯云 Elasticsearch 云产品功能越来越丰富,ES 用户越来越多,云上的集群规模也越来越大.我们在日常运维工作中也经常会遇到一些由于前期集群规划不到位,导致后期业务增长集群 ...