前言
计时功能在网页上是非常多的，现在我就用原生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. redis哨兵机制--配置文件sentinel.conf详解

    转载自 https://blog.csdn.net/u012441222/article/details/80751390 Redis的哨兵机制是官方推荐的一种高可用(HA)方案,我们在使用Redis ...

  2. VMware-workstation-full-安装教程

    网盘提取 图1中的包 链接:https://pan.baidu.com/s/11BnY2_v9cDfP1SXPoqOUWQ 提取码:jhfa (1) 点击Vware-workstation-full ...

  3. php第二天-函数的用法及封装，变量范围，匿名函数，递归函数

    1.函数 <?php function test($info){ return $info; } echo test("hello") ?> 输出hello 2.函数实 ...

  4. 2020年的100天——FLAGS

    2020年的100天--FLAGS Reading <爱的博弈>-- 作者: 约翰·戈特曼 (John Gottman) / 娜恩·西尔弗 (Nan Silver) <人间失格> ...

  5. Redis 发布订阅，小功能大用处，真没那么废材！

    今天小黑哥来跟大家介绍一下 Redis 发布/订阅功能. 也许有的小伙伴对这个功能比较陌生,不太清楚这个功能是干什么的,没关系小黑哥先来举个例子. 假设我们有这么一个业务场景,在网站下单支付以后,需要 ...

  6. Python推导式（列表推导式、元组推导式、字典推导式和集合推导式)

    列表表达式 a_range = range(10) # 对a_range执行for表达式 a_list = [x * x for x in a_range] # a_list集合包含10个元素 pri ...

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

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

  8. NLP常见任务

    借助BERT论文, 梳理下自然语言处理当前常见的任务. NLP任务 根据判断主题的级别, 将所有的NLP任务分为两种类型: token-level task: token级别的任务. 如完形填空(Cl ...

  9. 【Java并发编程】面试常考的ThreadLocal，超详细源码学习

    目录 ThreadLocal是啥?用来干啥? ThreadLocal的简单使用 ThreadLocal的实现思路? ThreadLocal常见方法源码分析 ThreadLocal.set(T valu ...

  10. spring javabean以及反射机制

    spring是一个管理java对象的一个容器,注入到容器中的对象称之为javabean: spring配置的bean,配置的不是bean而是实例. 反射机制:一个类中的方法,属性等都可以获取本类然后获 ...