js计时器

news/2024/12/29 16:18:34/

样式

 <style>.dahe {width: 300px;height: 400px;margin: auto;background-color: pink;}.shijian {color: white;font-size: 40px;text-align: center;line-height: 80px;}.anniu {width: 250px;margin: auto;}button {width: 250px;font-size: 30px;margin-top: 20px;}</style>

HTML静态

<body><div class="dahe"><div class="shijian"><span id="shi">00</span><span id="fen">00</span><span id="miao">00</span></div><div class="anniu"><button id="kai">开始</button><button id="zan">暂停</button><button id="jie">结束</button></div></div>
</body>

JS

<script>function $(id) {return document.getElementById(id)}var shi = $('shi'),fen = $('fen'),miao = $('miao'),kai = $('kai'),zan = $('zan'),jie = $('jie')var i = 0;var time;kai.onclick = function () {kai.disabled = truezan.disabled = falsejie.disabled = falsetime = setInterval(shijian, 100)}zan.onclick = function () {kai.disabled = falsezan.disabled = truejie.disabled = falseclearInterval(time)}jie.onclick = function () {kai.disabled = falsejie.disabled = trueclearInterval(time)i=0moveTime()}function shijian() {i++;moveTime()}function moveTime() {miao.innerText = formTime(i%60)fen.innerText = formTime(parseInt(i/60)%60)shi.innerText = formTime(parseInt(i/60/60)%60)}function formTime(j) {return j < 10 ? "0" + j : j}
</script>


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

相关文章

手摸手带你撸一个拖拽效果

目录 前言 准备 创建所需要结构 编写样式 js编写拖拽效果 解释方法 所有代码 结尾 前言 最近看见一个拖拽效果的视频&#xff0c;看好多人评论说跟着敲也没效果&#xff0c;还有就是作者也不回复大家提出的一些疑问&#xff0c;本着知其然必要知其所以然的心理&#xf…

【使用 BERT 的问答系统】第 6 章 :BERT 模型应用:其他任务

&#x1f50e;大家好&#xff0c;我是Sonhhxg_柒&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f4dd;个人主页&#xff0d;Sonhhxg_柒的博客_CSDN博客 &#x1f4c3; &#x1f381;欢迎各位→点赞…

Codeforces Round #833 (Div. 2)A — C

Codeforces Round #833 (Div. 2) A. The Ultimate Square 题目分析 除以二向上取整即为答案 code #include<bits/stdc.h>using namespace std;int n, m, k, t;void solve() {cin >> n;cout << (n 1) / 2 << "\n"; }int main() {cin &g…

[附源码]Python计算机毕业设计Django交通事故档案管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

【网络编程】第三章 网络套接字(TCP协议程序+多进程+多线程+线程池)

&#x1f3c6;个人主页&#xff1a;企鹅不叫的博客 ​ &#x1f308;专栏 C语言初阶和进阶C项目Leetcode刷题初阶数据结构与算法C初阶和进阶《深入理解计算机操作系统》《高质量C/C编程》Linux ⭐️ 博主码云gitee链接&#xff1a;代码仓库地址 ⚡若有帮助可以【关注点赞收藏】…

react路由v6版本NavLink的两个小坑及解决

本人新人&#xff0c;是按照文档进行学习的&#xff0c;今遇到两个小坑&#xff0c;现记录如下&#xff1a; 第一点&#xff0c;当前版本的NavLink的style或者className当中的isActive&#xff0c;不需要你对isActive进行任何操作&#xff0c;基本上照官网抄就可以了&#xff…

【电商项目实战】上传头像(详细篇)

&#x1f341;博客主页&#xff1a;&#x1f449;不会压弯的小飞侠 ✨欢迎关注&#xff1a;&#x1f449;点赞&#x1f44d;收藏⭐留言✒ ✨系列专栏&#xff1a;&#x1f449;SpringBoot电商项目实战 ✨学习社区&#xff1a; &#x1f449;不会压弯的小飞侠 ✨知足上进&#x…

nginx配置文件 location语法

1&#xff1a;nginx官方文档给出location语法如下&#xff1a; location [|~|~*|^~] uri { ....... }2&#xff1a;路径匹配 开头表示精确匹配。如 A 中只匹配根目录结尾的请求&#xff0c;后面不能带任何字符串&#xff1b;^~ 开头表示uri以某个常规字符串开头&#xff0c;不是…