计时器效果代码仅供参考

效果图：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.big{width: 400px;height: 100px;position: absolute;left: 50%;top: 150px;transform: translate(-60%);}.box{width: 100px;height: 100px;background-color: beige;float: left;margin-left: 30px;font-size: 20px;font-weight: 800;text-align: center;line-height: 100px;}button{margin-left: 20px;margin-top: 20px;}
</style>
<body><div class="big"><div class="box"></div><div class="box"></div><div class="box"></div><button id="but">开始</button></div></body>
<script>var s = 0; //秒var m = 0; //分var h = 0; //时var box = document.getElementsByClassName('box');  //获取div的dom元素var but = document.getElementById('but');  //获取按钮的dom元素function second(){if(s === 60){s=1m++}else{s++}if(m === 60){m = 1h++}s >=10 ? box[2].innerHTML = `${s}` : box[2].innerHTML = `0${s}`m >=10 ? box[1].innerHTML = `${m} :` : box[1].innerHTML = `0${m} :`h >=10 ? box[0].innerHTML = `${h} :` : box[0].innerHTML = `0${h} :`}var timer = null;but.addEventListener('click',function(){if(but.innerHTML === '开始'){but.innerHTML = '停止'timer = setInterval(second,1000)}else if(but.innerHTML === '停止'){but.innerHTML = '开始'clearInterval(timer)}})</script>
</html>

计时器效果代码仅供参考相关推荐

【vue+pc端】实现微信扫码登录pc端，后端通过微信开发平台，前端生成二维码（仅供参考）
这两周的需求是通过微信扫码登录pc端,刚定下需求原型图还没出来前,后端特意发了微信开发平台的链接给我,关于如何生成二维码的文档,以及扫码跳转后如何传code给他. 请戳这里准备工作|微信开放文档我最 ...
快手极速版脚本代码（仅供参考）
home(); sleep(1500); while(click("快手极速版")) sleep(5000)//等待5svar num = 200;//想要循环几次,自己输入 ne ...
网络面经总结-仅供参考
网络面经总结-仅供参考 1 服务器如何判断客户端连接不上了 1.1 recv 1.2 服务器一段时间内没接收到客户端心跳包反馈 1.3 struct tcp_info info 1.4[保活参数](h ...
浅谈短视频背后的社会道德伦理问题（个人观点，仅供参考）
浅谈短视频背后的科技伦理问题(个人观点,仅供参考) 本文根据最近发布的一则新闻:<真实的现场:快手移动连麦技术在抗疫报道中的创新应用>和之前的一篇报道: <算法不是三观不正的&quo ...
使用模板快速制作H5网页（仅供参考）
#[转载] 使用模板快速制作H5网页(仅供参考) 教程来源: 零基础30分钟学会制作网站--如何使用HTML网页模板(更新P2字幕版) 作者:SolidifieRay 1.HTML整体框架: < ...
【Aegisub快速上手】ASS特效标签合集（仅供参考）
[活用外挂字幕提升工作效率] ASS标签:[url]http://aegi.vmoe.info/docs/3.2/ASS_Tags[/url] 大部分初学者用Aegisub时最容易觉得迷惑的地方就是A ...
如何有效防止DEDE织梦系统被挂木马安全设置（仅供参考）
尊敬的客户,您好! 感谢广大客户对我司工作的信任和支持! 我司在最近的一个多月内陆续发现多起因 DedeCMS 安全漏洞造成网站被上传恶意脚本的事件,入侵者可利用恶意脚本对外发送大量数据包,严重占用C ...
操作系统P,V(wait,signal原语)操作讲解，以及两个例题(答案仅供参考)
操作系统的pv操作是很核心的概念. 临界区 : 我们把并发进程中与共享变量有关的程序段称为临界区. 信号量 : 信号量的值与相应资源的使用情况有关.当它的值大于0时,表示当前可用资源的数量:当它的值小 ...
链表知识体会总结（仅供参考）
仅供参考: 链表分单向,双向,循环三种. 链表的基本操作包括:顺序建表,逆建,结点插入,删除,链表的合并,拆分等. 顺建:需要定义三个结构体指针***head, t, p.申请头结点head----h ...

计时器效果代码仅供参考

计时器效果代码仅供参考相关推荐

最新文章

热门文章

计时器效果 代码仅供参考

计时器效果 代码仅供参考相关推荐

最新文章

热门文章

计时器效果代码仅供参考

计时器效果代码仅供参考相关推荐