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

 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.xdnf.cn/news/145936.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

【力扣周赛】第 364 场周赛⭐(前后缀分解+单调栈DFS技巧)

文章目录 竞赛链接Q1&#xff1a;2864. 最大二进制奇数&#xff08;贪心&#xff09;写法1——手动模拟&#xff08;代码长&#xff0c;运行快&#xff09;写法2——API&#xff08;代码短&#xff0c;运行慢&#xff09; Q2&#xff1a;2865. 美丽塔 I竞赛时代码——枚举山顶 …

WPF 实现点击按钮跳转页面功能

方法1. 配置环境 首先添加prism依赖项&#xff0c;配置好所有文件。需要配置的有两个文件&#xff1a;App.xaml.cs和App.xaml App.xaml.cs using System.Data; using System.Linq; using System.Threading.Tasks; using System.Windows;namespace PrismDemo {/// <summa…

正点原子嵌入式linux驱动开发——STM32MP1启动详解

STM32单片机是直接将程序下载到内部 Flash中&#xff0c;上电以后直接运行内部 Flash中的程序。 STM32MP157内部没有供用户使用的 Flash&#xff0c;系统都是存放在外部 Flash里面的&#xff0c;比如 EMMC、NAND等&#xff0c;因此 STM32MP157上电以后需要从外部 Flash加载程序…

Linux高性能服务器编程 学习笔记 第九章 IO复用

IO复用使程序能同时监听多个文件描述符&#xff0c;这可以提高程序的性能&#xff0c;通常网络程序在以下情况需要使用IO复用&#xff1a; 1.客户端进程需要同时处理多个socket。 2.客户端进程需要同时处理用户输入和网络连接。 3.TCP服务器要同时处理监听socket和连接socket…

配置OSPF路由

OSPF路由 1.OSPF路由 1.1 OSPF简介 OSPF(Open Shortest Path First&#xff0c;开放式最短路径优先&#xff09;路由协议是另一个比较常用的路由协议之一&#xff0c;它通过路由器之间通告网络接口的状态&#xff0c;使用最短路径算法建立路由表。在生成路由表时&#xff0c;…

【通意千问】大模型GitHub开源工程学习笔记(2)--使用Qwen进行推理的示例代码解析,及transformers的库使用

使用Transformers来使用模型 如希望使用Qwen-chat进行推理,所需要写的只是如下所示的数行代码。请确保你使用的是最新代码,并指定正确的模型名称和路径,如Qwen/Qwen-7B-Chat和Qwen/Qwen-14B-Chat 这里给出了一段代码 from transformers import AutoModelForCausalLM, Aut…

机器学习笔记 - 基于强化学习的贪吃蛇玩游戏

一、关于深度强化学习 如果不了解深度强化学习的一般流程的可以考虑看一下下面的链接。因为这里的示例因为在PyTorch 之上实现深度强化学习算法。 机器学习笔记 - Deep Q-Learning算法概览深度Q学习是一种强化学习算法,它使用深度神经网络来逼近Q函数,用于确定在给定状态下采…

ROS2 中的轻量级、自动化、受控回放

一、说明 这篇文章描述了一种在 ROS2 中实现受控重播器的轻量级方法。用以测试中将现象重新播放一遍&#xff0c;以实现调参或故障定位的目的。所有源代码都可以在这里找到。该帖子也可在此处获得。 二、问题&#xff1a;不同步重播 任何曾经认真开发过 ROS2 的人都会知道这个问…

springboot和vue:八、vue快速入门

vue快速入门 新建一个html文件 导入 vue.js 的 script 脚本文件 <script src"https://unpkg.com/vuenext"></script>在页面中声明一个将要被 vue 所控制的 DOM 区域&#xff0c;既MVVM中的View <div id"app">{{ message }} </div…

uboot启动流程涉及reset汇编函数

一. uboot启动流程中函数 之前了解了uboot链接脚本文件 u-boot.lds。 从 u-boot.lds 中我们已经知道了入口点是 arch/arm/lib/vectors.S 文件中的 _start。 本文了解 一下&#xff0c;uboot启动过程中涉及的 reset 函数。本文继上一篇文章学习&#xff0c;地址如下&#xff…

统计模型----决策树

决策树 &#xff08;1&#xff09;决策树是一种基本分类与回归方法。它的关键在于如何构建这样一棵树。决策树的建立过程中&#xff0c;使用基尼系数来评估节点的纯度和划分的效果。基尼系数是用来度量一个数据集的不确定性的指标&#xff0c;其数值越小表示数据集的纯度越高。…

揭秘:机构招生电子传单制作的五个黄金法则

机构招生微传单制作一直都是让很多人在意的事情。一款好的微传单不仅可以吸引更多的学生&#xff0c;还可以省去很多招生工作的时间和精力。但是&#xff0c;很多人却不知道如何制作一款精美的微传单。下面就让我们来学习一下如何制作一款机构招生的微传单吧。 首先&#xff0c…

Egg 封装接口返回信息

中间件封装 代码 const msgArr {"200":成功,"401":token失效 } module.exports (option, app) > {return async function(ctx, next) {try{//成功是返回的信息ctx.emit(code,data,msg)>{console.log(1111,code,data,msg)ctx.body {code,data:dat…

springboot 简单配置mongodb多数据源

准备工作&#xff1a; 本地mongodb一个创建两个数据库 student 和 student-two 所需jar包&#xff1a; # springboot基于的版本 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId>&l…

C++之std::atomic解决多线程7个问题(二百四)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

竞赛选题 多目标跟踪算法 实时检测 - opencv 深度学习 机器视觉

文章目录 0 前言2 先上成果3 多目标跟踪的两种方法3.1 方法13.2 方法2 4 Tracking By Detecting的跟踪过程4.1 存在的问题4.2 基于轨迹预测的跟踪方式 5 训练代码6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习多目标跟踪 …

uniapp使用scroll-into-view实现锚点定位和滚动监听功能【楼层效果 / 侧边导航联动效果】

大佬网址&#xff1a; https://blog.csdn.net/weixin_47136265/article/details/132303570 效果 代码 <template><!-- 这里面有2个bug&#xff0c;已经解决&#xff0c;需要知道的地方1.methods里的scrollEvt(e)方法里面的 this.tabIndex index ! -1 ? index :…

MySQL - DML数据增删改

功能介绍&#xff1a; DML&#xff08;Data Manipulation Language&#xff09;数据操作语言&#xff0c;用来对数据库中表的数据记录进 行增、删、改操作。 添加数据&#xff08;INSERT&#xff09; 基本语法&#xff1a;insert into 表名(字段列表) values (值列表); …

el-collapse 嵌套中 el-checkbox作为标题,选中复选框与el-tree联动

<el-drawertitle"应用授权":visible.sync"menuDrawer"><el-collapse accordion style"padding: 15px"><el-collapse-item v-for"item in platList"><template slot"title"><el-checkbox v-model…

Mysql各种锁

一.不同存储引擎支持的锁机制 Mysql数据库有多种数据存储引擎&#xff0c;Mysql中不同的存储引擎支持不同的锁机制 MyISAM和MEMORY存储引擎采用的表级锁 InnoDB存储引擎支持行级锁&#xff0c;也支持表级锁&#xff0c;默认情况下采用行级锁 二.锁类型的划分 按照数据操作…