HTML计时事件(JavaScript)网页电子钟+网页计时器

news/2024/12/22 20:05:10/

 setTimeout("函数","未来指定毫秒后调用函数");

clearTimeout(setTimeout("函数","未来指定毫秒后调用函数"));

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><button onclick="starTime()">开始</button><button onclick="stopTime()">停止</button><script>var t;function fun() {alert("Hello World");}function starTime() {t=setTimeout("fun()",300);}function stopTime(){clearTimeout(t);alert(t);}</script></body>
</html>

 setInterval("fun()",3000);每隔指定时间调用

clearInterval(t);取消setIntval()

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><button onclick="starTime()">开始</button><button onclick="stopTime()">停止</button><script>var t;function fun() {alert("Hello World");}function starTime() {t=setInterval("fun()",3000);}function stopTime(){clearInterval(t);alert(t);}</script></body>
</html>

计时器:

三个功能  开始 复位 停止 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div {height: 50px;width: 100px;background-color: skyblue;padding: auto;text-align: center;line-height: 50px;border: 2px solid black;position: relative;cursor: pointer;border-radius: 5px;font-weight: 200px;font-size: 20px;}.start {top: 100px;right: -500px;}.stop {top: 45px;right: -700px;}.zero {top: -100px;right: -600px;}.time {height: 100px;width: 300px;top: 50px;right: -500px;font-size: 80px;text-align: center;line-height: 100px;font-family: "宋体";font-weight: 1000;}div:hover {background-color: darkgray;}</style></head><body><div class="start" onclick="start()">开始</div><div class="stop" onclick="stop()">停止</div><div class="zero" onclick="reset()">复位</div><div class="time" id="time">0</div><script>var s = 0;var t;function start() //开始计时{if (!t)t = setInterval("change()", 1000);}function reset() //复位{clearInterval(t);s = -1;change();t = null;}function stop() // 停止计时{clearInterval(t);t = null;}function change() {s++;var x = document.getElementById("time");x.innerHTML = s;}</script></body>
</html>

电子钟:每秒更新一次页面 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>电子表</title><style>.table {height: 100px;width: 500px;background-color: grey;text-align: center;margin: auto;border-radius: 5px;border: 4px solid black;font-size: 20px;}</style><script>function updateTime() {var date = new Date();document.getElementById("year").innerText = date.getFullYear();document.getElementById("month").innerText = date.getMonth() + 1;document.getElementById("day").innerText = date.getDate();document.getElementById("hour").innerText = date.getHours();document.getElementById("minutes").innerText = date.getMinutes();document.getElementById("second").innerText = date.getSeconds();}setInterval(updateTime, 1000);</script></head><body onload="updateTime()"><table class="table"><th id="year"></th><th>年</th><th id="month"></th><th>月</th><th id="day"></th><th>日</th><th id="hour"></th><th>:</th><th id="minutes"></th><th>:</th><th id="second"></th></table></body>
</html>

 

 


http://www.ppmy.cn/news/1124776.html

相关文章

常用工具使用

ubuntu 1.1 ubuntu与windows 互相复制问题 方法一、 打开虚拟机 &#xff0c;点击上方导航栏 ‘虚拟机’ 查看VMware Tools是否安装&#xff0c;安装即可 方法二、 apt-get autoremove open-vm-tools apt-get install open-vm-tools apt-get install open-vm-tools-desktop…

使用 PyTorch 的计算机视觉简介 (1/6)

一、说明 Computer Vision&#xff08;CV&#xff09;是一个研究计算机如何从数字图像和/或视频中获得一定程度的理解的领域。理解这个定义具有相当广泛的含义 - 它可以从能够区分图片上的猫和狗&#xff0c;到更复杂的任务&#xff0c;例如用自然语言描述图像。 二、CV常见的问…

Tomcat 开启远程调试

Tomcat 部署的 war包工程开启远程调试 Linux服务器下&#xff0c;编辑Tomcat bin 目录下的 startup.sh 文件 vim startup.sh在第一行加入&#xff1a;(不换行&#xff0c;在同一行) declare -x CATALINA_OPTS"-server -Xdebug -Xnoagent -Djava.compilerNONE -Xrunjdwp:…

【从0学习Solidity】45. 时间锁

【从0学习Solidity】45. 时间锁 博主简介&#xff1a;不写代码没饭吃&#xff0c;一名全栈领域的创作者&#xff0c;专注于研究互联网产品的解决方案和技术。熟悉云原生、微服务架构&#xff0c;分享一些项目实战经验以及前沿技术的见解。关注我们的主页&#xff0c;探索全栈开…

IDEA新建.xml文件显示为普通文本

情况如下&#xff1a; 1. 在XML文件中添加*.xml的文件名模式 2. 在文本中&#xff0c;选中*.xml进行删除

【洛谷 P1403】[AHOI2005] 约数研究 题解(数学)

[AHOI2005] 约数研究 题目描述 科学家们在 Samuel 星球上的探险得到了丰富的能源储备&#xff0c;这使得空间站中大型计算机 Samuel II 的长时间运算成为了可能。由于在去年一年的辛苦工作取得了不错的成绩&#xff0c;小联被允许用 Samuel II 进行数学研究。 小联最近在研究…

企业如何实现设备管理数字化?企业有什么办法做到降本增效?

随着时代的发展&#xff0c;科学技术的进步以及自动化水平的不断提高&#xff0c;设备的维护保养成为日常工作中不可或缺的事项。但是&#xff0c;许多工作人员对于设备操作和保养规程的不熟悉&#xff0c;导致误操作、保养不到位或不能及时发现设备故障隐患等情况的大量出现。…

vue3 + elementPlus实现select下拉框插入确定和取消按钮。

实现思路 Select 选择器 | Element Plus 1、select方法visible-change这个方法是下拉框出现/隐藏时触发&#xff0c;当显示的时候将两个按钮插入到下拉框里面&#xff0c;是基于原生插入DOM的这种方式&#xff1b; 2、通过vue3 ref获取selectDOM&#xff0c;在获取select的p…