【每日一练】倒计时小案例

样式：

<style>span {display: inline-block;width: 34px;height: 30px;background-color: rgb(14, 90, 255);color: #fff;font-size: 22px;text-align: center;line-height: 30px;margin: 100px auto;border-radius: 4px;}
</style>

JS代码如下：

let timeID = setInterval(function () {//1.获取页面时h 分m 秒s文本/* 细节： innerText是字符串，需要转成number后运算 */let h = +document.querySelector('#hour').innerTextlet m = +document.querySelector('#minute').innerTextlet s = +document.querySelector('#second').innerText//2.s--s--//3.如果s<0,则s = 59, m--if (s < 0) {s = 59m--}//4.如果 m<0, 则m = 59,h--if (m < 0) {m = 59h--}//5.数字补0 ： 如果<10则前面补0s = s < 10 ? '0' + s : sm = m < 10 ? '0' + m : mh = h < 10 ? '0' + h : h//6.需要将计算的结果，重新赋值给span标签的innerTextdocument.querySelector('#hour').innerText = hdocument.querySelector('#minute').innerText = mdocument.querySelector('#second').innerText = s//7.如果 h == 0 && m == 0 && s == 0if (h == 0 && m == 0 && s == 0) {clearInterval(timeID)}}, 1000)

【每日一练】倒计时小案例相关推荐

JavaScript每日一练经典小案例（一）
一.密码显示隐藏效果先看效果: 通过分析,我们可以看到通过改变文本属性可以实现文本显示代码实现原理:通过判断眼睛的点击事件改变 <!DOCTYPE html> <html lan ...
JavaScript每日一练经典小案例（二）
这些案例都是一些非常经典的案例,有帮助到大家可以点个赞一.禁止复制案例我们可以采用contextmenu的方法让需要复制文字不显示菜单代码如下: //禁用右键菜单document.addEven ...
click 点击图片不起作用_JavaScript 练手小案例：基于SVG的图片切换效果
最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解 ...
js定时器实现倒计时小案例
开发工具与关键技术: vscode /javascript 撰写时间:2022/8/19 案例介绍倒计时是网页中经常看到的一个小功能,其实也很简单,掌握了js的日期对象就能写出来了,注意获取时分秒的 ...
JavaScript 国庆倒计时小案例
本次实现js国庆倒计时小案例开发工具与关键技术:Visual Studio 2015 JavaScript 当然首先还是先写出大概样式如下图: 之后便是我的css样式了: 下图便是在页面加载完成的 ...
Python采集手机4K壁纸，又是一个练手小案例，也不用担心没壁纸换咯
前言又是一篇采集壁纸的文章,只不过这次是一个新的网站里面也有电脑桌面壁纸,只不过今天先来采集一些手机壁纸吧又是一个练手的小案例,还能保存很多壁纸,不用担心没得壁纸换咯一. 数据来源分析明确需 ...
超详细JavaScript入门基础+练手小案例
目录一.什么是JavaScript 二.使用方法 1.元素绑定事件 2.文档内嵌 3.外部链接三.JavaScript输出语句四.语法规则 4.1 输入语句 4.2 变量的定义 4.3 命名规范 ...
Python每日一练：小艺的口红（暴力、二分、图论三种方法）代写匿名信
文章目录前言 0.题目一.暴力查找二.二分查找三.有序二叉树总结(代写匿名信) 前言很明显小艺的口红问题是考的是查找算法,对于这种一次性查找,直接暴力就行了,当然咱是为了学习,所以用来练练 ...
【蓝桥杯每日一练：小z的序列游戏-k】
问题描述众所周知,小z对序列游戏特别感兴趣现在他又提出了一个新的序列游戏给你n个数的数组a 问有多少对(i,j) 满足(a[i] + a[j]) % k = 0 并且 [1 <= i & ...

【每日一练】倒计时小案例

【每日一练】倒计时小案例相关推荐

最新文章

热门文章