JS 实现一个倒计时
你看到这篇文章时,倒计时应该已经结束了。
又到了金三银四季节,每年这个时候大家都在拼命刷题准备各大公司的招聘,这个时候我们需要对一些常见的面试题有所了解,比如今天要说的就是我在网上看到的,要你手写一个 js 倒计时效果,手写代码是什么感觉?速度 70 迈,心情真是嗨,本想好好秀一下的,谁知刚落笔就 … … 告辞!不过,多写代码确实可以保持手感,虽然刚开始会一直支支吾吾写不出,不过越写越顺手,越能发现自己的知识盲点,查漏补缺。
原理
既然是倒计时,肯定是要涉及到时间日期的操作了。js 里可以用 new Date()
来创建各种格式的时间日期。要能够倒计时,我们需要设置一个起始时间以及一个终止时间,计算出这两段时间的差,然后通过循环调用,每隔 1 秒刷新一次就实现了。假设我们以当前电脑的时间作为起始时间,然后定死一个终止时间,由于起始时间一直在递增,而终止时间不变,那么通过递归后就是一个倒计时了。整体思路不难理解,不过真正实现其代码来还是有诸多需要注意的。
实战
知道了大致实现思路后,你可以试着开始手写代码。我们定义一个函数,名为 countDown
。首先获取当前时间,现在是北京时间 2019 年 3 月 16 日,16 时 57 分
,倒计时 1 小时,那么终止时间是 2019 年 3 月 16 日,17 时 57 分
。
function countDown(){var nowtime = new Date();var endtime = new Date("2019/03/16,17:57:00");var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
}
lefttime
保存着两个时间的差值,getTime()
方法获取到时间戳,由于它是以 ms
为单位的,我们需要精确到秒就可以,所以除以 1000 就是以 s
为单位。
接着,我们可以将这个时间分别计算为 天,时,分,秒
了。代码如下
var d = parseInt(lefttime / (24*60*60))var h = parseInt(lefttime / (60 * 60) % 24);var m = parseInt(lefttime / 60 % 60);var s = parseInt(lefttime % 60);
1 天 24 小时,1 小时 60 分钟,1 分钟 60 秒,稍微转换就能计算出上面几个变量的值。到了这里,有个小细节需要注意,如果是 10 以下的数我们要进行补零!。于是我们在写一个补零函数,名为 addZero
.
function addZero(){return i < 10 ? "0" + i: i + "";
}
好了,接下来对上面求得的 d,h,m,s
进行补零。
d = addZero(d)h = addZero(h);m = addZero(m);s = addZero(s);
最后我们只需要利用 setTimeout
循环调用,每隔 1 s 刷新就可以了。
setTimeout(showtime, 1000);
OK! 一个倒计时函数大功告成。为了把它显示到浏览器页面上,我们需要在加点 HTML 代码:
html
<p class="count"></p>
然后在 js 里加上:
js
document.querySelector(".count").innerHTML = `活动倒计时 ${d}天 ${h} 时 ${m} 分 ${s} 秒`;
if (lefttime <= 0) {document.querySelector(".count").innerHTML = "活动已结束";return;
}
这里的 if 判断当倒计时为 0 的时候,就显示 活动已结束
, 并且把函数 return
掉。
最终效果
由于上传 GIF 动图时出现了点小问题,你可以自己 run 下代码并到浏览器查看效果,这样记忆更深哦~
完整代码
<body><p class="count"></p><script>window.onload = function () {countDown();function addZero(i) {return i < 10 ? "0" + i: i + "";}function countDown() {var nowtime = new Date();var endtime = new Date("2019/03/16,17:57:00");var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);var d = parseInt(lefttime / (24*60*60))var h = parseInt(lefttime / (60 * 60) % 24);var m = parseInt(lefttime / 60 % 60);var s = parseInt(lefttime % 60);d = addZero(d)h = addZero(h);m = addZero(m);s = addZero(s);document.querySelector(".count").innerHTML = `活动倒计时 ${d}天 ${h} 时 ${m} 分 ${s} 秒`;if (lefttime <= 0) {document.querySelector(".count").innerHTML = "活动已结束";return;}setTimeout(countDown, 1000);}}</script>
</body>
总结
知识需要通过实践来验证,先学好必备的基础知识,然后找些 demo 来练习巩固,在练习的过程中也许会发现自己以前忽视的一些小问题,也就起到了查漏补缺的作用。在 coding 中寻找快乐!
JS 实现一个倒计时相关推荐
- 基于 js 制作一个倒计时
目录 前言: 项目效果展示: 代码实现思路: 使用方法: 重点功能讲解: 实现代码: 总结: 前言: 很多网站在做活动时,会出现一个截止时间倒计时的提示,跟随此文做一个倒计时吧! 项目效果展示: 代码 ...
- 小白的笨笨知识【用原生js实现一个倒计时项目】
左侧输入为大于0的整数,单位是毫秒,右侧显示倒计时的时间 应用:Window setLenterval () 方法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. ...
- 根据秒数写一个倒计时,还有几时几分几秒开始
后台返回一个秒数,js写一个倒计时,距离开抢时间还有几时几分几秒 代码如下: //將秒數格式化為時分秒function formatSeconds(value) {var theTime = pars ...
- jquery/js实现一个网页同时调用多个倒计时(最新的)
jquery/js实现一个网页同时调用多个倒计时(最新的) 最近需要网页添加多个倒计时. 查阅网络,基本上都是千遍一律的不好用. 自己按需写了个.希望对大家有用. 有用请赞一个哦! //js //js ...
- js实现一个时分秒计时器
用js打造一个格式化的计时器(00:00:00) /*** 计时器* @param {number} time 初始时间* @param {boolean} type 默认为true正计时,false ...
- js怎么实现倒计时效果
js怎么做倒计时,其实很简单.话不多说,直接上菜 使用 new Date() 获取当前时间, Date.parse()方法解析一个表示某个日期的字符串,并返回从1970-1-1 00:00:00 UT ...
- 使用JSAPl来做一个倒计时的效果
今天的小案例需要做一个倒计时的效果 我们的时分秒需要一直进行倒计时,然后我们的页面颜色需要根据定时器的操作来进行更换,首先我们还是可以来分析一下我们的HTML步骤 <div class=&quo ...
- Html+Css+js实现春节倒计时效果(移动端和PC端)
目录 前言 导语 效果预览 html部分 移动端样式(mobile.css) pc端样式(style.css) js部分 效果演示 移动端 pc端 总结 下载地址 前言 我是歌谣 我有个兄弟 巅峰的时 ...
- js 对一个字段去重_js面试
js面试题 1.简述同步和异步的区别 2.怎么添加.移除.复制.创建.和查找节点 3.实现一个函数clone 可以对Javascript中的五种主要数据类型(Number.string.Object. ...
最新文章
- Java项目:健身管理系统(Java+ssm+springboot)
- 使用面向 iOS 的本机插件扩展 PhoneGap
- Python学习札记(六)
- python简单代码input-python简单基础代码
- 7.Redis常用命令:ZSet
- js中的offset函数和position
- python 单例模式的四种创建方式
- java策略模式 if else_Java如何利用策略模式替代if/else语句
- (转)初次体验.net Ajax无刷新技术
- 前端学习(一):HTML基本语法
- c语言教程免费ppt,《C语言教程》PPT课件.ppt
- matlab中累乘,numpy中的裁剪、压缩和累乘
- unity3d shader之Julia集和Mandelbrot集绘制美丽图案
- Minimum Snap轨迹规划详解(1)轨迹规划入门
- 解决redhat无法连接网络问题
- Python元类---道生一,一生二,二生三
- maven项目构建ssh工程(父工程与子模块的拆分与聚合)
- Unity Shader Dither
- Spring Cloud 配置中心乱码解决
- NLP之PTM:自然语言处理领域—预训练大模型时代的各种吊炸天大模型算法概述(Word2Vec→ELMO→Attention→Transfo→GPT系列/BERT系列等)、关系梳理、模型对比之详细攻略
热门文章
- python爬虫培训心得
- 【Python】对Excel数据进行批量操作
- 【蓝桥杯】第11届Scratch国赛中级组第6题 -- 3D打印小猫
- 湖南省2021年上半年中小学教师资格考试(笔试)公告
- 关于使用jquery.wordexport.js如何设置导入文档的页边距问题(超详细,亲测可用)
- axios拦截器封装与使用
- axios拦截器 config_vue-axios系列:axios拦截器,配置请求头,配置请求参数
- python的运算符号使等式成立_你所不知道的 Python 冷知识!(二)(建议收藏)
- macOS安装wireguard
- 【全栈计划 —— 单片机】——Part_04 IO口输入功能的使用