js实现从0开始计时及显示当前时间

2024-06-22 20:32

本文主要是介绍js实现从0开始计时及显示当前时间,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

需求:

页面点击进来,就从0开始计时,动态显示用户停留在该页面的时间。

思路:

记录用户进入该页面的时间(初始时间);

不断用当前时间-初始时间=在该页面的停留时间;

需要注意的是,应该将js函数Time()放到<body>的onload中,即页面一加载就执行

js函数应该放在<head>标签中

js:

<script type="text/javascript">/** 显示当前时间函数* YQ*/function Time(){var today=new Date(); var h=today.getHours();var m=today.getMinutes();var s=today.getSeconds();duration(h,m,s);// add a zero in front of numbers<10m=checkTime(m);s=checkTime(s);document.getElementById('timeshow').value=h+":"+m+":"+s;t=setTimeout('Time()',500); //暂停0.5后执行Time()函数}/** 个位数时补0*/function checkTime(i) {if (i<10) {i="0" + i}return i}/** 历时:当前时间-开始时间* @author YQ*/function duration(nh,nm,ns){var beginTime = document.getElementById('beginTime').value; //获取计时初始值var beginT = new Array();beginT = beginTime.split(" ");beginT = beginT[1].split(":");var sh = Number(beginT[0]);var sm = Number(beginT[1]);var ss = Number(beginT[2]);//换算历时 h:m:svar allS = (nh*3600+nm*60+ns)-(sh*3600+ sm*60 +ss);var dh = parseInt(allS/3600);var dm = parseInt((allS-dh*3600)/60);var ds = allS - dh*3600 - dm*60;document.getElementById('duration').value = dh+':'+dm+':'+ds;}</script>

html:

<body οnlοad="Time()"> 

<b>历时:</b><input type="text" id="duration" style="border:0px;background-color:transparent;width:80px;" />
<b>当前时间:</b><input type="text" id="timeshow" style="border:0px;background-color:transparent;width:80px;" />
</body>


这篇关于js实现从0开始计时及显示当前时间的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1085335

相关文章

Qt实现对Word网页的读取功能

《Qt实现对Word网页的读取功能》文章介绍了几种在Qt中实现Word文档(.docx/.doc)读写功能的方法,包括基于QAxObject的COM接口调用、DOCX模板替换及跨平台解决方案,重点讨论... 目录1. 核心实现方式2. 基于QAxObject的COM接口调用(Windows专用)2.1 环境

MySQL查看表的历史SQL的几种实现方法

《MySQL查看表的历史SQL的几种实现方法》:本文主要介绍多种查看MySQL表历史SQL的方法,包括通用查询日志、慢查询日志、performance_schema、binlog、第三方工具等,并... 目录mysql 查看某张表的历史SQL1.查看MySQL通用查询日志(需提前开启)2.查看慢查询日志3.

Java实现字符串大小写转换的常用方法

《Java实现字符串大小写转换的常用方法》在Java中,字符串大小写转换是文本处理的核心操作之一,Java提供了多种灵活的方式来实现大小写转换,适用于不同场景和需求,本文将全面解析大小写转换的各种方法... 目录前言核心转换方法1.String类的基础方法2. 考虑区域设置的转换3. 字符级别的转换高级转换

使用Python实现局域网远程监控电脑屏幕的方法

《使用Python实现局域网远程监控电脑屏幕的方法》文章介绍了两种使用Python在局域网内实现远程监控电脑屏幕的方法,方法一使用mss和socket,方法二使用PyAutoGUI和Flask,每种方... 目录方法一:使用mss和socket实现屏幕共享服务端(被监控端)客户端(监控端)方法二:使用PyA

MyBatis-Plus逻辑删除实现过程

《MyBatis-Plus逻辑删除实现过程》本文介绍了MyBatis-Plus如何实现逻辑删除功能,包括自动填充字段、配置与实现步骤、常见应用场景,并展示了如何使用remove方法进行逻辑删除,逻辑删... 目录1. 逻辑删除的必要性编程1.1 逻辑删除的定义1.2 逻辑删php除的优点1.3 适用场景2.

C#借助Spire.XLS for .NET实现在Excel中添加文档属性

《C#借助Spire.XLSfor.NET实现在Excel中添加文档属性》在日常的数据处理和项目管理中,Excel文档扮演着举足轻重的角色,本文将深入探讨如何在C#中借助强大的第三方库Spire.... 目录为什么需要程序化添加Excel文档属性使用Spire.XLS for .NET库实现文档属性管理Sp

Python+FFmpeg实现视频自动化处理的完整指南

《Python+FFmpeg实现视频自动化处理的完整指南》本文总结了一套在Python中使用subprocess.run调用FFmpeg进行视频自动化处理的解决方案,涵盖了跨平台硬件加速、中间素材处理... 目录一、 跨平台硬件加速:统一接口设计1. 核心映射逻辑2. python 实现代码二、 中间素材处

Java数组动态扩容的实现示例

《Java数组动态扩容的实现示例》本文主要介绍了Java数组动态扩容的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录1 问题2 方法3 结语1 问题实现动态的给数组添加元素效果,实现对数组扩容,原始数组使用静态分配

Python实现快速扫描目标主机的开放端口和服务

《Python实现快速扫描目标主机的开放端口和服务》这篇文章主要为大家详细介绍了如何使用Python编写一个功能强大的端口扫描器脚本,实现快速扫描目标主机的开放端口和服务,感兴趣的小伙伴可以了解下... 目录功能介绍场景应用1. 网络安全审计2. 系统管理维护3. 网络故障排查4. 合规性检查报错处理1.

Python轻松实现Word到Markdown的转换

《Python轻松实现Word到Markdown的转换》在文档管理、内容发布等场景中,将Word转换为Markdown格式是常见需求,本文将介绍如何使用FreeSpire.DocforPython实现... 目录一、工具简介二、核心转换实现1. 基础单文件转换2. 批量转换Word文件三、工具特性分析优点局