当前位置: 首页 > news >正文

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>

 

 

相关文章:

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

setTimeout("函数","未来指定毫秒后调用函数"); clearTimeout(setTimeout("函数","未来指定毫秒后调用函数")); <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title>…...

使用群晖实现Videostation电影的大容量存储及分享教程

文章目录 1.使用环境要求2.制作视频分享链接3.制作永久固定视频分享链接 李哥和他的女朋友是一对甜蜜的情侣&#xff0c;但不幸的是&#xff0c;由于工作原因&#xff0c;他们目前分隔两地&#xff0c;无法常常亲密相伴。 这个距离让李哥特别怀念和女朋友一起在电影院观看电影的…...

后端大厂面试-15道题

1. 说说计算机存储结构 计算机存储结构通常包括这几个层次&#xff1a; 主存储器&#xff08;Main Memory&#xff09;&#xff1a;也称为内存&#xff08;RAM&#xff0c;Random Access Memory&#xff09;&#xff0c;主要用于存储当前正在执行的程序和数据。它是计算机中最…...

C++: 冒泡排序(Bubble Sort)

假设你有一列由数字组成的玻璃珠&#xff0c;这些珠子的重量不同&#xff0c;你希望将它们按照重量从轻到重排列。你会这样做&#xff1a; 从左到右&#xff0c;比较相邻的两颗珠子的重量。如果左边的珠子比右边的珠子重&#xff0c;就交换它们的位置。然后&#xff0c;继续向…...

跨域的解决方案

文章目录 概念一、什么是跨域问题二、为什么会发生跨域问题三、跨域解决方案1、JSONP2、添加响应头3、Spring注解CrossOrigin4、配置文件&#xff08;常用&#xff09;5、nginx跨域 概念 一、什么是跨域问题 前端调用的后端接口不属于同一个域&#xff08;域名或端口不同&…...

如何使用Java语言判断出geek是字符串参数类型,888是整数参数类型,[hello,world]是数组参数类型,2.5是双精度浮点数类型?

如何使用Java语言判断出geek是字符串参数类型&#xff0c;888是整数参数类型&#xff0c;[hello,world]是数组参数类型&#xff0c;2.5是双精度浮点数类型&#xff1f; Java是一种静态类型的编程语言&#xff0c;这意味着我们需要在编译时为变量指定具体的类型。但是&#xff…...

9.20华为机试-后端

1、丢失报文的位置 某通信系统持续向外发送报文&#xff0c;使用数组 nums 保存 n个最近发送的报文&#xff0c;用于在报文未达到对端的情况下重发。报文使用序号 sn 表示&#xff0c;序号 sn 按照报文发送顺序从小到大排序&#xff0c;相邻报文 sn 不完全连续且有可能相同。报…...

LC926. 将字符串翻转到单调递增(JAVA - 动态规划)

将字符串翻转到单调递增 题目描述动态规划 题目描述 难度 - 中等 LC926. 将字符串翻转到单调递增(JAVA - 动态规划) 如果一个二进制字符串&#xff0c;是以一些 0&#xff08;可能没有 0&#xff09;后面跟着一些 1&#xff08;也可能没有 1&#xff09;的形式组成的&#xff0…...

【高阶数据结构】哈希的应用 {位图;std::bitset;位图的应用;布隆过滤器;布隆过滤器的应用}

一、位图 1.1 位图概念 面试题 给40亿个不重复的无符号整数&#xff0c;没排过序。给一个无符号整数&#xff0c;如何快速判断一个数是否在这40亿个数中。【腾讯】 遍历查找&#xff1a;内存中无法存放40亿个整数&#xff08;约占内存15-16G&#xff09;&#xff1b;时间复杂…...

金融生产存储亚健康治理:升级亚健康 3.0 ,应对万盘规模的挑战

随着集群规模的不断扩大&#xff0c;硬盘数量指数级上升&#xff0c;信创 CPU 和操作系统、硬盘多年老化、物理搬迁等多种复杂因素叠加&#xff0c;为企业的存储亚健康管理增加了新的挑战。 在亚健康 2.0 的基础上&#xff0c;星辰天合在 XSKY SDS V6.2 实现了亚健康 3.0&#…...

C语言自定义类型讲解:结构体,枚举,联合(2)

&#x1f435;本篇文章将会对位段、枚举和联合的相关知识进行讲解 1. 位段&#x1f4da; 1.1 什么是位段 位段的声明和结构体类似&#xff0c;但是有两点不同&#xff1a; 1.位段的成员必须是int&#xff0c;unsigned int&#xff0c;signed int (C99之后也可以是其他成员&am…...

AI编程助手 Amazon CodeWhisperer 全面解析与实践

目录 引言Amazon CodeWhisperer简介智能编程助手智能代码建议代码自动补全 提升代码质量代码质量提升安全性检测 支持多平台多语言 用户体验和系统兼容性用户体验文档和学习资源个性化体验系统兼容性 功能全面性和代码质量功能全面性代码生成质量和代码安全性 CodeWhisperer的代…...

利用EXCEL进行XXE攻击

利用EXCEL进行XXE攻击 原因 原因 Microsoft Office从2007版本引入了新的开放的XML文件格式&#xff0c;新的XML文件格式基于压缩的ZIP文件格式规范&#xff0c;由许多部分组成。 我们可以将其解压缩到特定的文件夹中来查看其包含的文件夹和文件&#xff0c;可以发现其中多数是…...

芯片验证就是一次旅行

如果你国庆希望去一个你不曾去过的城市旅行&#xff0c;比如“中国苏州”。对游客来说&#xff0c;它是个蛮大的城市&#xff0c;有许多景点可以游玩&#xff0c;还有许多事情可以做。但实际上&#xff0c;即使最豪也最清闲的游客也很难看苏州的所有方方面面。同样的道理也适用…...

Java深入理解线程的三大特性

目录 1 CPU缓存导致可见性问题2 线程切换导致原子性问题3 性能优化导致有序性问题4 JMM(Java Memory Model)5 volatile6 synchronized 1 CPU缓存导致可见性问题 线程的三大特性&#xff1a; 可见性&#xff1a;Visibility有序性&#xff1a;Ordering原子性&#xff1a;Atomic…...

2025快手校招面试真题汇总及其解答(二)

6. hashmap数据结构 HashMap 是一种散列表,它是一种根据键值对来存储数据的数据结构。HashMap 的特点是插入、查找和删除操作的时间复杂度都是 O(1),因此它是一种非常高效的数据结构。 HashMap 的工作原理是将键值对存储在一个数组中,每个键值对都由一个哈希函数来映射到数…...

PHP生成带中文的图片

imagettftext() 函数是 PHP 中的一个内置函数&#xff0c;用于使用 TrueType 字体将文本写入图像。 句法&#xff1a; 数组imagettftext&#xff08;资源$image&#xff0c;float $size&#xff0c;float $angle&#xff0c; int $x&#xff0c;int $y&#xff0c;…...

java框架-Dubbo

Dubbo整合Springboot BIO NIO Netty Dubbo 原理 在这里插入图片描述...

Vue+iview 组件中通过v-for循环动态生成form表单进行表单校验

在做项目时&#xff0c;需要根据需要动态添加或新增表单&#xff0c;同时还需要对表单做校验。详情如下图&#xff1a; 刚开始做表单验证的时候&#xff0c;对于这个动态的表单验证有点难搞&#xff0c;试了好几种方法都没有搞定。最后按照下面这种方法实现了&#xff0c;以此…...

sns.load_dataset(“iris“)报错原因探究+解决办法

问题描述 import seaborn as sns # 读取数据 iris sns.load_dataset("iris")在代码中使用了seaborn &#xff0c;并加载iris数据&#xff0c;结果产生了报错信息如下所示 问题分析 原因很简单&#xff0c;我们使用了sns.load_dataset("iris")来加载数据…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...