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

  1. <div><label>得到毫</label>
  2. 	<h5></h5>
  3. </div>
  4. <div><label>得到秒</label>
  5. 	<h4></h4>
  6. </div>
  7. <div><label>得到分</label>
  8. 	<h3></h3>
  9. </div>
  10. <div><label>得到时</label>
  11. 	<h2></h2>
  12. </div>
  13. <div><label>得到天</label>
  14. 	<h1></h1>
  15. </div>

JS

  1. var StarTime = new Date().getTime();
  3. 			setInterval(function() {
  4. 				NotRetain();
  5. 			}, 500)
  7. 			function Retain() {
  8. 				//保留小数点
  9. 				var NowTime = new Date().getTime();
  10. 				//毫
  11. 				document.querySelectorAll("h5")[0].innerHTML = NowTime - StarTime + "毫秒";
  12. 				//秒
  13. 				document.querySelectorAll("h4")[0].innerHTML = (NowTime - StarTime) / 1000  + "秒"
  14. 				//分
  15. 				document.querySelectorAll("h3")[0].innerHTML = (NowTime - StarTime) / (1000 * 60)  + "分"
  16. 				//时
  17. 				document.querySelectorAll("h2")[0].innerHTML = (NowTime - StarTime) / (1000 * 60 * 60) + "时"
  18. 				//天
  19. 				document.querySelectorAll("h1")[0].innerHTML = (NowTime - StarTime) / (1000 * 50 * 60 * 24) + "天"
  20. 			}
  22. 			function NotRetain() {
  23. 				//不保留小数点
  24. 				var NowTime = new Date().getTime();
  25. 				//毫
  26. 				document.querySelectorAll("h5")[0].innerHTML = NowTime - StarTime + "毫秒";
  27. 				//秒
  28. 				document.querySelectorAll("h4")[0].innerHTML = parseInt((NowTime - StarTime) / 1000)  + "秒"
  29. 				//分
  30. 				document.querySelectorAll("h3")[0].innerHTML = parseInt((NowTime - StarTime) / (1000 * 60))  + "分"
  31. 				//时
  32. 				document.querySelectorAll("h2")[0].innerHTML = parseInt((NowTime - StarTime) / (1000 * 60 * 60)) + "时"
  33. 				//天
  34. 				document.querySelectorAll("h1")[0].innerHTML = parseInt((NowTime - StarTime) / (1000 * 50 * 60 * 24)) + "天"
  35. 			}

效果
保留小数点

不保留小数点

完整代码

  1. <html>
  2. 	<head>
  3. 		<meta charset="utf-8" />
  4. 		<title>JS实现页面计时</title>
  5. 	</head>
  6. 	<body>
  7. 		<div><label>得到毫</label>
  8. 			<h5></h5>
  9. 		</div>
  10. 		<div><label>得到秒</label>
  11. 			<h4></h4>
  12. 		</div>
  13. 		<div><label>得到分</label>
  14. 			<h3></h3>
  15. 		</div>
  16. 		<div><label>得到时</label>
  17. 			<h2></h2>
  18. 		</div>
  19. 		<div><label>得到天</label>
  20. 			<h1></h1>
  21. 		</div>
  22. 		<script>
  23. 			var StarTime = new Date().getTime();
  25. 			setInterval(function() {
  26. 				Retain();
  27. 			}, 500)
  29. 			function Retain() {
  30. 				//保留小数点
  31. 				var NowTime = new Date().getTime();
  32. 				//毫
  33. 				document.querySelectorAll("h5")[0].innerHTML = NowTime - StarTime + "毫秒";
  34. 				//秒
  35. 				document.querySelectorAll("h4")[0].innerHTML = (NowTime - StarTime) / 1000  + "秒"
  36. 				//分
  37. 				document.querySelectorAll("h3")[0].innerHTML = (NowTime - StarTime) / (1000 * 60)  + "分"
  38. 				//时
  39. 				document.querySelectorAll("h2")[0].innerHTML = (NowTime - StarTime) / (1000 * 60 * 60) + "时"
  40. 				//天
  41. 				document.querySelectorAll("h1")[0].innerHTML = (NowTime - StarTime) / (1000 * 50 * 60 * 24) + "天"
  42. 			}
  44. 			function NotRetain() {
  45. 				//不保留小数点
  46. 				var NowTime = new Date().getTime();
  47. 				//毫
  48. 				document.querySelectorAll("h5")[0].innerHTML = NowTime - StarTime + "毫秒";
  49. 				//秒
  50. 				document.querySelectorAll("h4")[0].innerHTML = parseInt((NowTime - StarTime) / 1000)  + "秒"
  51. 				//分
  52. 				document.querySelectorAll("h3")[0].innerHTML = parseInt((NowTime - StarTime) / (1000 * 60))  + "分"
  53. 				//时
  54. 				document.querySelectorAll("h2")[0].innerHTML = parseInt((NowTime - StarTime) / (1000 * 60 * 60)) + "时"
  55. 				//天
  56. 				document.querySelectorAll("h1")[0].innerHTML = parseInt((NowTime - StarTime) / (1000 * 50 * 60 * 24)) + "天"
  57. 			}
  58. 		</script>
  59. 	</body>
  60. </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 语言中,本质只有值传递,而无引用传递,解释和证明详见正文. 说到值传递和引用传递我们不得不提到两个概念:值类型和引用类型. 1.值类型 通俗意义上来说,所谓的值类型指的就 ...

  2. matlab数据插值

    由图可见采样点前段比较稀疏,比较有规律,后段比较密集,比较复杂 这里的spline是三次样条插值 随着次数的增高,曲线在两端震荡的越来越剧烈 用上其他插值的方法 线性插值 最近点插值 分段三次米勒插值 ...

  3. Vue 3.0 来了，我们该做些什么？

    靓仔路过,不要错过 想必 Vue3.0 发布这件事,大家都知道了. 我也是从朋友圈的转发得知此事,博客平台.公众号.朋友圈基本都有这么一条新闻,可见 Vue3.0 的被期待程度,因为 React 16 ...

  4. python常用os模块

    OS 模块 #os模块就是对操作系统进行操作,使用该模块必须先导入模块: import os #getcwd() 获取当前工作目录(当前工作目录默认都是当前文件所在的文件夹) result = os. ...

  5. 2018尚硅谷最新SpringCloud免费视频教程

    [课程内容] 01.前提概述 02.大纲概览 03.从面试题开始 04.微服务是什么 05.微服务是什么2 06.微服务与微服务架构 07.微服务优缺点 08.微服务技术栈有哪些 09.为什么选择Sp ...

  6. C#编写一个较完整的记事本程序

    开发环境 Visual Studio 2019 至少需安装 .NET桌面开发 创建项目并配置 创建窗体文件 配置项目名称及框架 设计界面 创建窗体文件,将控件摆放位置如下,参考系统自带的记事本程序 窗 ...

  7. MacOS如何正确配置Idea自带Maven插件的环境变量？（亲测）

    背景 安装了IDEA开发工具,想执行Maven的命令.但是又没有通过自己下载Maven的安装包进行安装,只是想直接使用IDEA自带的Maven插件来执行Maven的各种命令.由于刚开始使用macos对 ...

  8. 091 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 02 static关键字 01 static关键字（上）

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

  9. matlab find函数使用语法

    find 找到非零元素的索引和值 语法: 1. ind = find(X) 2. ind = find(X, k) 3. ind = find(X, k, 'first') 4. ind = find ...

  10. P 2568 GCD

    对于这道题,我们要求的是 \(\displaystyle \sum_{i=1}^{N}\sum_{j = 1} ^{N}\) gcd(i,j)为质数 首先我们很容易想出来怎么打暴力,我们可以对于每个 ...