JS实现页面计时
2024-09-07 23:53:37
前言
计时功能在网页上是非常多的，现在我就用原生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>
后言
本文结束了，如果觉得本技术文章对你有帮助请给我点个赞,如果有什么不足的地方，给我提意见，让我加以改进
最新文章
- 不重新编译php安装配置eAccelerator
- org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter与org.apache.struts.dispatcher.FilterDispatcher是什么区别？
- 使用RMAN对控制文件进行restore
- 【JQuery NoviceToNinja系列】目录
- POJ 3415 Max Sum of Max-K-sub-sequence （线段树+dp思想）
- java类固定值代替基表写法
- windows安装设备的驱动程序软件遇…
- 二逼平衡树 Tyvj 1730 BZOJ3196 Loj#106
- Flask三种导入配置文件的方式
- mongodb ----> 从入门到。。。
- Java框架spring Boot学习笔记（一）：开始第一个项目
- python语法小应用---列表和元组
- Hive错误：Permission denied: user=anonymous, access=EXECUTE, inode=”/tmp”
- egret学习
- java基础-day28
- select函数用法详解
- 网络请求+Gson解析--Retrofit 2
- ArcGIS中的AddIn开发示例
- 微信小程序 --- 事件绑定
- java算法----------常用的加密算法