前言
计时功能在网页上是非常多的，现在我就用原生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. Scala的递归函数应用

    使用递归函数实现累加: def sum(nums:Int*):Int={ if(nums.length == 0) 0 else nums.head + sum(nums.tail:_*) } 结果为 ...

  2. 现有 Vue.js 项目快速实现多语言切换的一种思路

    Web 项目多语言(i18n,即国际化)是比较常见的需求,常规的做法大概有以下几种: 每种语言单独开发页面,适用于 CMS 之类的网站 多语言文本和页面结构分离,运行时动态替换.适用于单页应用(SPA ...

  3. archaius(4) 属性对象

    讲完上一节,我们就可以使用合理的配置管理器或者实现自己的配置管理来管理我们的配置项了.archaius还提供了一种新的配置使用的方式. 动态属性对象 动态属性对象针对每个配置项以对象方式进行操作,并且 ...

  4. Python爬取天气预报，Ta的城市开始降温了

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取 python免费学习资 ...

  5. vulnhub靶机Os-hackNos-1

    vulnhub靶机Os-hackNos-1 信息搜集 nmap -sP 192.168.114.0/24 找到开放机器192.168.114.140这台机器,再对这台靶机进行端口扫描. 这里对他的端口 ...

  6. GameObject的==的一个坑和一点GameObject的内部构造

    一切都是因为==,才有了这篇博客 目录 测试 结果和分析 总结 测试 先放一段unity的一个普通的脚本 using UnityEngine; public class UnityEngineObje ...

  7. Spring及tomcat初始化日志

    Tomcat StandardContext初始化过程 //org.apache.catalina.core.StandardContext#startInternal // 子容器启动 for (C ...

  8. Java基础——HashMap

    1.HashMap底层的实现 JDK 1.7 中 HashMap 是以数组+链表的形式组成的 JDK 1.8 之后数组+链表/红黑树的组成的,当链表大于 8 并且容量大于 64 时,链表结构会转换成红 ...

  9. 089 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 使用包进行类管理（1）——创建包

    089 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...

  10. ASP。netcore,Angular2 CRUD动画使用模板包，WEB API和EF 1.0.1

    下载Angular2ASPCORE.zip - 1 MB 介绍 在本文中,让我们看看如何创建一个ASP.NET Core CRUD web应用程序与Angular2动画使用模板包,web API和EF ...