JavaScript计时器

JavaScript计时器

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>JavaScript计时器</title><style>body {padding: 40px;margin: 0;}.timeTitle {font-size: 28px;line-height: 80px;}#timeNow {color: #67c23a;}.btn {display: inline-flex;justify-content: center;align-items: center;line-height: 1;height: 32px;white-space: nowrap;cursor: pointer;color: #FFFFFF;text-align: center;box-sizing: border-box;outline: none;transition: .1s;font-weight: 500;user-select: none;vertical-align: middle;-webkit-appearance: none;background-color: #409eff;border: 1px solid #dcdfe6;border-color: #409eff;padding: 8px 15px;font-size: 14px;border-radius: 4px;margin-right: 16px;}.btn:last-child {margin-right: 0;}.btn:hover {background-color: #79bbff;border-color: #79bbff;}.warning {background-color: #e6a23c;border-color: #e6a23c;}.warning:hover {background-color: #eebe77;border-color: #eebe77;}.danger {background-color: #f56c6c;border-color: #f56c6c;}.danger:hover {background-color: #f89898;border-color: #f89898;}</style>
</head><body><div class="timeTitle">当前时间为：<span id="timeNow">00:00:00</span></div><button class="btn" id="timeBegin">计时开始</button><button class="btn warning " id="timeEnd">计时结束</button><button class="btn danger" id="timeClear">计时清除</button><script>// 定义初始值 计时器var timer = "";// 开始计时var beginBtn = document.getElementById("timeBegin");var endBtn = document.getElementById("timeEnd");var clearBtn = document.getElementById("timeClear");var beginNum = 0;// 定义：分  秒  毫秒var min, second, millisecond;// 初始化数据min = second = millisecond = 0;// 定时器function time() {millisecond += 50;if (millisecond >= 1000) {millisecond = 0second += 1;}if (second >= 60) {second = 0min += 1;}counts = min + ':' + second + ':' + millisecond;document.getElementById("timeNow").innerText = counts;}//开始计时function BeginTime() {beginBtn.onclick = function () {if (beginNum > 0) {return;}beginNum++;timer = setInterval(time, 50);}}//结束计时function EndTime() {endBtn.onclick = function () {beginNum = 0;clearInterval(timer);}}//计时清除function ClearTime() {clearBtn.onclick = function () {beginNum = 0;clearInterval(timer);document.getElementById("timeNow").innerHTML = "00:00:00";}}BeginTime();EndTime();ClearTime()</script>
</body></html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/238305.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【即插即用篇】YOLOv8改进实战 | 引入 Involution（内卷），用于视觉识别的新一代神经网络！涨点神器！

【即插即用篇】YOLOv8改进实战 | 引入 Involution（内卷），用于视觉识别的新一代神经网络！涨点神器！

YOLOv8专栏导航：点击此处跳转 前言 YOLOv8 是由 YOLOv5 的发布者 Ultralytics 发布的最新版本的 YOLO。它可用于对象检测、分割、分类任务以及大型数据集的学习，并且可以在包括 CPU 和 GPU 在内的各种硬件上执行。 YOLOv8是一种尖端的、最先进的 (SOTA) 模型，它建立在以前成…
阅读更多...
【华为机试】2023年真题B卷（python）-城市聚集度

【华为机试】2023年真题B卷（python）-城市聚集度

一、题目 题目描述&#xff1a; 一张地图上有n个城市&#xff0c;城市和城市之间有且只有一条道路相连&#xff1a;要么直接相连&#xff0c;要么通过其它城市中转相连&#xff08;可中转一次或多次&#xff09;。城市与城市之间的道路都不会成环。 当切断通往某个城市 i 的所有…
阅读更多...
CSS 网页制作-学成在线

CSS 网页制作-学成在线

1、 准备工作 1.1 项目目录 网站根目录是指存放网站的第一层文件夹&#xff0c;内部包含当前网站的所有素材&#xff0c;包含HTML、CSS、图片、JavaScript等等。 1.2 版心效果 可以发现都是呈现版心居中的效果&#xff0c;但是每次都写一次太麻烦了&#xff0c;可以把版心居中…
阅读更多...
python可以做小程序研发嘛,python能做微信小程序吗

python可以做小程序研发嘛,python能做微信小程序吗

大家好&#xff0c;给大家分享一下python可以做微信小程序开发吗&#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看&#xff01; 大家好&#xff0c;给大家分享一下用python编写一个小程序&#xff0c;很多人还不知道这一点。下面详细解释一下用python代码…
阅读更多...
java设计模式学习之【命令模式】

java设计模式学习之【命令模式】

文章目录 引言命令模式简介定义与用途实现方式 使用场景优势与劣势在Spring框架中的应用股票示例代码地址 引言 想象一下&#xff0c;你在一个忙碌的厨房里&#xff0c;厨师们正忙于准备各种菜肴。每当服务员带来一个新订单时&#xff0c;他们不会直接对厨师说需要做什么菜。相…
阅读更多...
flutter开发实战-设置bottomNavigationBar中间按钮悬浮效果

flutter开发实战-设置bottomNavigationBar中间按钮悬浮效果

flutter开发实战-设置bottomNavigationBar中间按钮悬浮的效果 在使用tabbar时候&#xff0c;可以使用bottomNavigationBar来设置中间凸起的按钮&#xff0c;如下 一、效果图 中间按钮凸起的效果图如下 二、实现代码 我们使用BottomAppBar 一个容器&#xff0c;通常与[Sscaf…
阅读更多...
2023年PMP证书的含金量有多高？对于企业来说有多大的价值？

2023年PMP证书的含金量有多高？对于企业来说有多大的价值？

PMP含金量更多的是“敲门砖”作用&#xff0c;公司招聘的门槛 当然现在PMP管理模式也很热门&#xff0c;各大企业都有引进改良应用在公司的项目上&#xff0c;之前在校友群里面大家在讨论PMP 的作用也有说到这一点&#xff0c;给大家看看吧。 至于为什么PMP认证从国外引进大陆…
阅读更多...
⭐Unity 读取本地图片再区域裁剪

⭐Unity 读取本地图片再区域裁剪

现在需求是将本地的图片读取之后再区域截图成新的图片 话不多说直接上代码 using UnityEngine; using System.IO;public class LocalRegionCapture : MonoBehaviour {public string fullScreenImagePath "Assets/SavedImages/fullScreenScreenshot.png";public str…
阅读更多...
【PyQt学习篇 · ⑭】：QTableView的使用

【PyQt学习篇 · ⑭】：QTableView的使用

文章目录 QTableView的使用示例 QTableView的使用 QTableView 是 PyQt 中用于显示表格数据的窗口部件&#xff0c;它提供了一个灵活的方式来显示和编辑数据。下面是一些关于 QTableView 的使用的具体信息&#xff1a; 创建 QTableView 对象&#xff1a; from PyQt5.QtWidgets …
阅读更多...
Mac 生成Android签名证书 .keystore文件

Mac 生成Android签名证书 .keystore文件

工具下载地址 https://www.oracle.com/java/technologies/downloads/#jdk21-mac1. 找到安装jdk的路径&#xff0c;并进入bin目录下 1.1 查找JDK命令 /usr/libexec/java_home -v结果为: java_home: option requires an argument -- v /Library/Java/JavaVirtualMachines/jdk…
阅读更多...
python/C 生成beta分布的随机数

python/C 生成beta分布的随机数

python/C 生成beta分布的随机数 文章目录 python/C 生成beta分布的随机数前言一、beta分布理论知识二、python 生成服从beta分布的随机数三、C语言生成服从beta分布的随机数 前言 想把一个算法用C语言实现&#xff0c;其中涉及到了beta分布取随机数&#xff0c;记录一下结果 一…
阅读更多...
雀巢困在业绩和质量里

雀巢困在业绩和质量里

撰稿|行星 来源|贝多财经 雀巢集团CEO马克施奈德曾在2023年中报中表示&#xff0c;后疫情时代居家消费已恢复常态&#xff0c;从而消除了制约雀巢部分品类增长的阻碍。 但就雀巢前三季度财报而言&#xff0c;该公司在全球及大中华区的销售额均有所下降&#xff0c;有机增长主…
阅读更多...
如何使用Java的GeoTools地理库计算WGS84坐标下的两个经纬度之间得距离

如何使用Java的GeoTools地理库计算WGS84坐标下的两个经纬度之间得距离

介绍 本章讲解如何使用Java的GeoTools地理库计算基于WGS84坐标的两点之间的距离。适用于后台服务的距离计算。 GeoTools介绍 GeoTools是开源的Java地理信息计算库。GeoServer地图引擎就是基于GeoTools库构建得地图服务，可以说非常强大。 官网地址：https://docs.geotools.o…
阅读更多...
Baumer工业相机堡盟工业相机如何通过BGAPI SDK实现Raw格式的图像保存（C#）

Baumer工业相机堡盟工业相机如何通过BGAPI SDK实现Raw格式的图像保存（C#）

Baumer工业相机堡盟工业相机如何通过BGAPI SDK实现Raw格式的图像保存&#xff08;C#&#xff09; Baumer工业相机Baumer工业相机通过SDK实现Raw格式的图像保存的技术背景通过SDK获取相机信息的代码分析Baumer工业相机回调函数里保存原始图像数据Baumer保存Raw图像格式重要核心代…
阅读更多...
TikTok真题第1天 | 666.路径和IV、 207.课程安排、210.课程安排

TikTok真题第1天 | 666.路径和IV、 207.课程安排、210.课程安排

666.路径和IV 题目链接&#xff1a;666.路径和IV 解法&#xff1a; 参考这篇题解&#xff1a;【LeetCode - 666】路径和 IV_力扣666路径总和4-CSDN博客 关键点在于&#xff1a; &#xff08;1&#xff09;使用map来存node&#xff1a;key 为整数的前两位&#xff0c;value…
阅读更多...
龙芯loongarch64服务器编译安装paddlepaddle

龙芯loongarch64服务器编译安装paddlepaddle

前言 PaddlePaddle （Parallel Distributed Deep Learning，中文名飞桨）是百度公司推出的开源，易学习，易使用的分布式深度学习平台，现阶段各行各业均追求国产化，软件行业也一样，所有需要在龙芯服务器上编译安装paddlepaddle。 官方教程 官方教程里面很多没有讲解到，安…
阅读更多...
SQL编写规范及性能排查一些方法

SQL编写规范及性能排查一些方法

SQL 语句编写规范 避免使用select *&#xff0c;对于宽表来说&#xff0c;这是灾难&#xff1b;严禁不加任何where条件读取数据&#xff1b;MySQL中的text类型字段独立存储&#xff0c;数据量少的表除外&#xff1a;Where条件中的过滤条件字段上严禁使用任何函数&#xff0c;包…
阅读更多...
ubuntu 搭建本地私有pip源

ubuntu 搭建本地私有pip源

# 搭建本地私有pip源 pip install pip2pi# 创建目录 mkdir /data/work/PyPip/ mkdir /data/work/PyPip/packages cd /data/work/PyPip/# 创建需要从外网源同步的package touch requirements_roop.txt# 批量同步 pip2tgz /data/work/PyPip/packages -r requirements_roop.txt# 同…
阅读更多...
【JS】按照a＞b＞c＞d＞e＞f的优先级，将a,b,c,d,e,f元素进行筛选，选出三个不为空字符的元素进行字符拼接

【JS】按照a＞b＞c＞d＞e＞f的优先级，将a,b,c,d,e,f元素进行筛选，选出三个不为空字符的元素进行字符拼接

设计思路&#xff1a; 1、定义一个数组&#xff0c;把元素按照优先级进行排序&#xff1b; 2、 使用 filter() 方法过滤掉空字符串元素&#xff0c;得到一个新的数组; 3、在排序函数中&#xff0c;循环数组&#xff0c;使用 indexOf() 方法获取元素 a 和 b 在数组中的索引&a…
阅读更多...
描述一个bug及定义bug的级别

描述一个bug及定义bug的级别

&#xff08;一&#xff09;描述一个bug 描述一个bug&#xff0c;需要以下几个因素&#xff1a; 故障标题、故障发现的版本、故障类别&#xff08;功能/兼容/界面&#xff09;、故障优先级、故障描述&#xff08;测试环境、测试步骤、预期结果、实际结果&#xff09;。 举个例…
阅读更多...
最新文章

Copyright @ 2022~2023