前言
计时功能在网页上是非常多的，现在我就用原生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基础知识补充及持久化、备份介绍

    Redis知识补充 在上一篇博客<Redis基础认识及常用命令使用(一)–技术流ken>中已经介绍了redis的一些基础知识,以及常用命令的使用,本篇博客将补充一些基础知识以及redis持 ...

  2. archaius(3) 配置管理器

    基于上一节介绍的配置源,我们来继续了解配置管理器.配置源只是抽象了配置的获取来源,配置管理器是基于配置源的基础上对这些配置项进行管理.配置管理器的主要功能是将配置从目标位置加载到内存中,并且管理内存配 ...

  3. Spring学习（一）初识Spring

    什么是Spring 定义:Spring 是一个轻量级的 DI / IoC 和 AOP 容器的开源框架,目的为了简化java开发. DI:注入 IOC:控制反转 AOP:面向切面编程 原理:利用了jav ...

  4. keras中的mask操作

    使用背景 最常见的一种情况, 在NLP问题的句子补全方法中, 按照一定的长度, 对句子进行填补和截取操作. 一般使用keras.preprocessing.sequence包中的pad_sequenc ...

  5. subDomainsBrute安装（windows系统）

    step1:  安装python2.7(省略) step2:  下载subDomainsBrute 地址: https://github.com/lijiejie/subDomainsBrute 下载 ...

  6. Spring 系列之jdbcTemplate的使用

    Spring系列之 jdbcTemplate 啥是jdncTemplate? t他是spring框架中提供的一个对象,是对原始的jdbcAPI对象的简单封装,spring框架为我们提供了很多操作,模板 ...

  7. Kafka和RocketMQ底层存储之那些你不知道的事

    大家好,我是yes. 我们都知道 RocketMQ 和 Kafka 消息都是存在磁盘中的,那为什么消息存磁盘读写还可以这么快?有没有做了什么优化?都是存磁盘它们两者的实现之间有什么区别么?各自有什么优 ...

  8. Spring学习（八）--Spring的AOP

    自工作以后身不由己,加班无数,996.995不可控制,高高立起的flag无法完成,无奈,随波逐流,尽力而已! 1.advice通知 advice主要描述Spring AOP 围绕奥方法调用而注入的切面 ...

  9. Spring AOP系列(三) — 动态代理之JDK动态代理

    JDK动态代理 JDK动态代理核心是两个类:InvocationHandler和Proxy 举个栗子 为便于理解,首先看一个例子: 希望实现这样一个功能:使用UserService时,只需关注自己的核 ...

  10. 机器学习可解释性系列 - 是什么&为什么&怎么做

    机器学习可解释性分析 可解释性通常是指使用人类可以理解的方式,基于当前的业务,针对模型的结果进行总结分析: 一般来说,计算机通常无法解释它自身的预测结果,此时就需要一定的人工参与来完成可解释性工作: ...