JS 倒计时展示小工具

废话开篇：JS 通过操控标签的隐藏与显示来实现倒计时展示小工具

一、实现效果

1、默认展示数字

2、数字倒计时

3、数字倒计时展示虚位

4、数字倒计时不展示虚位

5、小数

6、负数

7、小数倒计时

每一个单独数字都是由一个独立的标签进行的绘制，再通过数字的处理将独立数字组合成一个完整的数字展示。

二、代码

1、HTML

<div class="numer_wsl_contain"><div id="number1"></div><div id="number2"></div><div id="number3"></div><div id="number4"></div>
</div><script> let wholeNumberManage1 = new WholeNumberManage(21921,document.getElementById('number1'),1000)let wholeNumberManage2 = new WholeNumberManage(21921,document.getElementById('number2'),1000)wholeNumberManage2.isCountDown = truelet wholeNumberManage3 = new WholeNumberManage(1021,document.getElementById('number3'),50)wholeNumberManage3.isCountDown = truelet wholeNumberManage4 = new WholeNumberManage(1021,document.getElementById('number4'),50)wholeNumberManage4.isCountDown = truewholeNumberManage4.isShowVirtualNum = false </script>

大部分的布局操作全部放到 JS 里，简化 html 内容。

2、CSS

.numer_wsl_contain{width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;
}.number_wsl {margin-top: 50px;width: 100%;position: relative;display: flex;flex-direction: row;justify-content: center;align-items: center;
}.num_wsl {position: relative;width: 23px;height: 30px;
}/* 绘制横杠 */
.num_wsl_cross {position: absolute;left: 0px;width: 100%;height: 10%;background:linear-gradient(135deg,transparent 0, transparent 50%,black 50%,black 100%),linear-gradient(45deg,transparent 0, transparent 50%,black 50%,black 100%),linear-gradient(-135deg,transparent 0, transparent 50%,black 50%,black 100%),linear-gradient(-45deg,transparent 0, transparent 50%,black 50%,black 100%);background-repeat: no-repeat;background-position:0% 0%,0% 100%,100% 0%,100% 100%;background-size:50% 50%,50% 50%,50% 50%,50% 50%;
}/* 3个横杠位置区分 */
.num_wsl_cross_one {top: 0px;
}.num_wsl_cross_two {top: 45%;
}.num_wsl_cross_three {top: 90%;
}/* 绘制竖杠 */
.num_wsl_vertical {position: absolute;top: -5%;width: 12%;height: 65%;background:linear-gradient(135deg,transparent 0, transparent 50%,black 50%,black 100%),linear-gradient(45deg,transparent 0, transparent 50%,black 50%,black 100%),linear-gradient(-135deg,transparent 0, transparent 50%,black 50%,black 100%),linear-gradient(-45deg,transparent 0, transparent 50%,black 50%,black 100%);background-repeat: no-repeat;background-position:0% 0%,0% 100%,100% 0%,100% 100%;background-size:50% 50%,50% 50%,50% 50%,50% 50%;
}/* 6个绘制竖杠位置区分 */
.num_wsl_vertical_one {left: 16.2%;
}.num_wsl_vertical_two {left: 72.8%;
}.num_wsl_vertical_three {top: 40.8%;left: 16.2%;
}.num_wsl_vertical_four {top: 40.8%;left: 72.8%;
}/* 小数点 */
.num_wsl_point {position: absolute;left: 35%;top: calc(90% - 7.5% * (23 / 30));width: 15%;height: calc(15% * (23 / 30));background-color: black;
}

3、数字管理类

NumberSingleManage 单数字展示类

// 单数字操作
class NumberSingleManage {// 操作dom对象el = nullmap = {}// 当前数字_num = 0constructor(num,el){if(el){this.el = el} else {// 没有dom传入对象，进行创建this.el = this.createElement(['num_wsl'])}// 创建单数字节点（3横，4竖）this.createSingleNumNode()this.getSingleMapRelationship()this.overwriteSetMethod()this.num = num}// 重写set方法overwriteSetMethod(){Object.defineProperty(this, 'num', {get: function () {return this._num},set: function (newValue) {this._num = newValuethis.changeNum(this._num)}})}// 创建单数字节点createSingleNumNode(){//样式集合let classes = [['num_wsl_cross','num_wsl_cross_one'],['num_wsl_cross','num_wsl_cross_two'],['num_wsl_cross','num_wsl_cross_three'],['num_wsl_vertical','num_wsl_vertical_one'],['num_wsl_vertical','num_wsl_vertical_two'],['num_wsl_vertical','num_wsl_vertical_three'],['num_wsl_vertical','num_wsl_vertical_four'],['num_wsl_point']]//添加节点classes.forEach(classNames => {this.el.appendChild(this.createElement(classNames))});}// 创建el并赋予样式createElement(classNames){let div = document.createElement('div')classNames.forEach((className)=>{div.classList.add(className)})return div}// 建立映射关系（数字对应数字节点的隐藏与显示）getSingleMapRelationship(){let num_cross_one = this.el.getElementsByClassName('num_wsl_cross_one')[0]let num_cross_two = this.el.getElementsByClassName('num_wsl_cross_two')[0]let num_cross_three = this.el.getElementsByClassName('num_wsl_cross_three')[0]let num_vertical_one = this.el.getElementsByClassName('num_wsl_vertical_one')[0]let num_vertical_two = this.el.getElementsByClassName('num_wsl_vertical_two')[0]let num_vertical_three = this.el.getElementsByClassName('num_wsl_vertical_three')[0]let num_vertical_four = this.el.getElementsByClassName('num_wsl_vertical_four')[0]this.map = {reset:()=>{this.elHide(num_wsl_point)this.elShow(num_cross_one)this.elShow(num_cross_two)this.elShow(num_cross_three)this.elShow(num_vertical_one)this.elShow(num_vertical_two)this.elShow(num_vertical_three)this.elShow(num_vertical_four)},allHide:()=>{this.elHide(num_wsl_point)this.elHide(num_cross_one)this.elHide(num_cross_two)this.elHide(num_cross_three)this.elHide(num_vertical_one)this.elHide(num_vertical_two)this.elHide(num_vertical_three)this.elHide(num_vertical_four)},'-':()=>{this.elHide(num_wsl_point)this.elHide(num_cross_one)this.elShow(num_cross_two)this.elHide(num_cross_three)this.elHide(num_vertical_one)this.elHide(num_vertical_two)this.elHide(num_vertical_three)this.elHide(num_vertical_four)},'.':()=>{this.elShow(num_wsl_point)this.elHide(num_cross_one)this.elHide(num_cross_two)this.elHide(num_cross_three)this.elHide(num_vertical_one)this.elHide(num_vertical_two)this.elHide(num_vertical_three)this.elHide(num_vertical_four)},0:()=>{this.elHide(num_wsl_point)this.elShow(num_cross_one)this.elHide(num_cross_two)this.elShow(num_cross_three)this.elShow(num_vertical_one)this.elShow(num_vertical_two)this.elShow(num_vertical_three)this.elShow(num_vertical_four)},1:()=>{this.elHide(num_wsl_point)this.elHide(num_cross_one)this.elHide(num_cross_two)this.elHide(num_cross_three)this.elHide(num_vertical_one)this.elShow(num_vertical_two)this.elHide(num_vertical_three)this.elShow(num_vertical_four)},2:()=>{this.elHide(num_wsl_point)this.elShow(num_cross_one)this.elShow(num_cross_two)this.elShow(num_cross_three)this.elHide(num_vertical_one)this.elShow(num_vertical_two)this.elShow(num_vertical_three)this.elHide(num_vertical_four)},3:()=>{this.elHide(num_wsl_point)this.elShow(num_cross_one)this.elShow(num_cross_two)this.elShow(num_cross_three)this.elHide(num_vertical_one)this.elShow(num_vertical_two)this.elHide(num_vertical_three)this.elShow(num_vertical_four)},4:()=>{this.elHide(num_wsl_point)this.elHide(num_cross_one)this.elShow(num_cross_two)this.elHide(num_cross_three)this.elShow(num_vertical_one)this.elShow(num_vertical_two)this.elHide(num_vertical_three)this.elShow(num_vertical_four)},5:()=>{this.elHide(num_wsl_point)this.elShow(num_cross_one)this.elShow(num_cross_two)this.elShow(num_cross_three)this.elShow(num_vertical_one)this.elHide(num_vertical_two)this.elHide(num_vertical_three)this.elShow(num_vertical_four)},6:()=>{this.elHide(num_wsl_point)this.elShow(num_cross_one)this.elShow(num_cross_two)this.elShow(num_cross_three)this.elShow(num_vertical_one)this.elHide(num_vertical_two)this.elShow(num_vertical_three)this.elShow(num_vertical_four)},7:()=>{this.elHide(num_wsl_point)this.elShow(num_cross_one)this.elHide(num_cross_two)this.elHide(num_cross_three)this.elHide(num_vertical_one)this.elShow(num_vertical_two)this.elHide(num_vertical_three)this.elShow(num_vertical_four)},8:()=>{this.elHide(num_wsl_point)this.elShow(num_cross_one)this.elShow(num_cross_two)this.elShow(num_cross_three)this.elShow(num_vertical_one)this.elShow(num_vertical_two)this.elShow(num_vertical_three)this.elShow(num_vertical_four)},9:()=>{this.elHide(num_wsl_point)this.elShow(num_cross_one)this.elShow(num_cross_two)this.elShow(num_cross_three)this.elShow(num_vertical_one)this.elShow(num_vertical_two)this.elHide(num_vertical_three)this.elShow(num_vertical_four)}}}//显示全部节点showAllNode(){this.map['reset']()}//隐藏全部节点hideAllNodel(){this.map['allHide']()}//变更数字changeNum(num){this.map[num] && this.map[num]()}//显示elShow(el){el.style.visibility="visible"}//隐藏elHide(el){el.style.visibility="hidden"}
}

WholeNumberManage 完整数字展示与操作类

// 整串数字操作
class WholeNumberManage {//单数字存储 numberSingleManages = [] //完整数字 wholeNum = null //展示的dom对象 mountedEl = null//定时器 timer = null //是否显示虚位isShowVirtualNum = true//是否开始倒计时 _isCountDown = null //倒计时时间间隔 _countDownInterval = 1000//初始整数位数_integerNumberLength = nullconstructor(wholeNum,el,countDownInterval){this.mountedEl = elthis.mountedEl.classList.add("number_wsl")this.wholeNum = wholeNumthis._countDownInterval = countDownIntervalthis.createWholeNumShowEl(this.parseWholeNum(wholeNum))this.overwriteSetMethod()}// 重写set方法overwriteSetMethod(){// 是否进行倒计时Object.defineProperty(this, 'isCountDown', {get: function () {return this._isCountDown},set: function (newValue) {if(newValue){this._isCountDown = newValuethis.startCountDown()} else {clearInterval(this.timer)}}})}// 倒计时startCountDown(){if(!this.wholeNum || this.wholeNum <= 0){return}if(this.timer){clearInterval(this.timer)}this.timer = setInterval(()=>{if(this.wholeNum < 0){clearInterval(this.timer)}this.wholeNum = math.subtract(math.bignumber(this.wholeNum),math.bignumber(1)).toString()this.countDownRefreshNum(this.parseWholeNum(this.wholeNum))},this._countDownInterval)}// 解析数字parseWholeNum(wholeNum){//获取整数部分长度this.setInitialIntegerNumberLength(wholeNum)//解析数字if(String(wholeNum).indexOf('.') == -1){return this.parseWholeIntegerlNum(wholeNum)} else {return this.parseWholeFloatNum(wholeNum)}}//设置初始整数位数setInitialIntegerNumberLength(wholeNum){if(!this._integerNumberLength){this._integerNumberLength = this.getIntegerLength(wholeNum)}}//获取整数位数getIntegerLength(wholeNum){return String(Math.abs(wholeNum)).split('.')[0].length}// 浮点型数字解析parseWholeFloatNum(wholeNum){let nums = []let numsByPoint = String(wholeNum).split('.')numsByPoint.forEach((num,index)=>{nums = nums.concat([...String(num)])if(index==0 && this.isShowVirtualNum){nums = this.complementInteger(nums,this._integerNumberLength - num.length)}nums.push('.')})nums.splice(-1)return nums}// 补位complementInteger(nums,complementLength){if(complementLength > 0){let zeroArr = new Array(complementLength)zeroArr.fill(0,complementLength,0)nums = [...zeroArr,...nums]}return nums}// 整型数字解析parseWholeIntegerlNum(wholeNum){let nums = [...String(wholeNum)]if(this.isShowVirtualNum){let currentIntegerNumberLength = this.getIntegerLength(wholeNum)let integerNumberLengthDifference = (this._integerNumberLength - currentIntegerNumberLength)nums = this.complementInteger(nums,integerNumberLengthDifference)}return nums}// 创建数字展示区createWholeNumShowEl(nums){nums.forEach((num)=>{this.numberSingleManages.push(new NumberSingleManage(num))if(this.mountedEl){this.mountedEl.appendChild(this.numberSingleManages.slice(-1)[0].el)}})}// 刷新数字countDownRefreshNum(nums){//删除多余的domlet virtualNum = (this.numberSingleManages.length - nums.length)if(virtualNum){let needMoveNumberSingleManages = this.numberSingleManages.splice(0,virtualNum)needMoveNumberSingleManages.forEach((numberSingleManages)=>{numberSingleManages.el.remove()}) }//重置所有数据位0this.numberSingleManages.forEach((numberSingleManage)=>{numberSingleManage.num = 0})//进行数据填充nums.forEach((num,index)=>{if(index < this.numberSingleManages.length){let numberSingleManage = this.numberSingleManages[index]numberSingleManage.num = num} else {this.numberSingleManages.push(new NumberSingleManage(num))this.mountedEl.appendChild(this.numberSingleManages.slice(-1)[0].el)}})}
}

三、总结与思考

其实就是单纯的dom操作，没有特别难理解的内容。代码拙劣，大神勿笑[抱拳][抱拳][抱拳]

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取

JS 倒计时展示小工具相关推荐

分享JS压缩混淆小工具
JS压缩混淆工具一.功能介绍编写了一个JS压缩混淆小工具. 选择目录文件夹,指定当前目录下需要压缩的JS文件, 合并(复选框): 勾选表示把当面目录下的所有JS文件合并压缩混淆成一个独立的 al ...
js密码生成器小工具
此小工具是我突发奇想想的一个密码加密算法, 通过对一个小数的幂指数的不断迭代运算, 可以取得完全打乱字符排列的效果, 用户只要略微更改这密码初值,密码模板,计算指数中的任何一个, 所运算的结果都千差万 ...
win7倒计时桌面小工具_iOS 14系统面板截图曝光，新增桌面小工具，越来越像安卓了...
商务合作请联系QQ:710035765 大家好,我是波老师.随着iOS 14越来越多的爆料,波老师预测距离iOS 14测试版的发布也要越来越近了.近日,有博主在Twitter上曝出了iOS 14墙纸设 ...
win7倒计时桌面小工具_这些小工具，彻底解放了我的电脑桌面
为了方便找到文件,我们都会习惯性得将文档都放在桌面上,一开始可能还好. 当文件夹.图片.视频文件各种素材堆积在一起以致于几乎满屏的时候,我们就开始难受了. 其实这样凌乱的桌面列表,是很影响我们工作效率 ...
发条js调试工具_小工具大帮手，利用 @open-node/antman 实现 node.js 进程线上调试，无须重启...
@open-node/antman 窥探进程内部,让 Node.js 生产环境线上调试成为可能解决了什么问题? 日常在开发服务端代码,很多是服务类型的,比如基于http的api,或者一些任务脚本,需 ...
js 创建书签小工具并实现自动表单填写
1.最近学校布置网课视频,贼心不改,就找了一个自动刷题软件就处理好了,本来是一件完美的事情,可是作为学计算机的同学,我是不允许有什么神奇的事情发上,必须研究研究怎么实现的 2.虽然只是有了一小点了解, ...
饿了么同事拼单，单人价格计算JS 拼单小工具
经常和同事拼单点外卖直接写了一个计算工具方便使用 //浏览器F12 粘贴运行,自行修改变量 //每份订单的价格 let array = [17,16,18,16] //配送费 let p = 5.5 ...
html倒计时代码原理,最全面的JS倒计时代码
本文实例为大家分享了JS倒计时展示的具体代码,供大家参考,具体内容如下第一种:精确到秒的javascript倒计时代码 HTML代码: 离2010年还有: startclock() var time ...
小工具发布，QCountDown-语音倒计时
为什么80%的码农都做不了架构师?>>> [软件名称]QCountDown 语音倒计时 [开发平台]Windows Visual Basic [软件简介]小工具哈,可以设置不同 ...