js定时器实现倒计时小案例

开发工具与关键技术： vscode /javascript

撰写时间:2022/8/19

案例介绍

倒计时是网页中经常看到的一个小功能，其实也很简单，掌握了js的日期对象就能写出来了，注意获取时分秒的计算公式就好了。那就直接开始吧

HTML代码

在页面上居中和文字对齐的样式

 div {/* 倒计时小案例 *//* div居中 */position: fixed;left: 0;top: 0;bottom: 0;right: 0;margin: auto;/* 文字居中对齐 */text-align: center;line-height: 80px;width: 200px;height: 80px;font-size: 34px;background-color: rgb(41, 41, 212);color: #fff;}

div标签

<body><div id="showTime"></div>
</body>

JS代码

先了解一下setInterval 间隔定时器的的基本用法

setInterval(function(){//间隔1000毫秒就执行一次函数

code...

},1000)//毫秒数==1秒钟

注意：改案例只计算了小时分钟和秒数

思路：1.获取到倒计时的时间和当前系统时间

2.用倒计时时间减去当前系统时间获得一个毫秒数

3.根据公式获得小时数、分钟数、和秒数

4.计算后打印在div标签里面

 //间隔定时器,每隔一定的时间就触发一次setInterval(() => {//获取倒计时var ddate = new Date('2022-08-19 22:00');//获取系统的当前时间var date = new Date();//相减除1000取得总秒数var ndate = (ddate - date) / 1000;//对取得的秒数求得小时数 var shi = parseInt(ndate / 60 / 60 % 24);//为了更好看，如果小时数是一位数，在前面添加0shi < 10 ? shi = '0' + shi : shi;//对取得的秒数求得分钟数 var fen = parseInt(ndate / 60 % 60);//为了更好看，如果分钟数是一位数，在前面添加0fen < 10 ? fen = '0' + fen : fen;//求得秒数var miao = parseInt(ndate % 60);//为了更好看，如果秒数是一位数，在前面添加0miao < 10 ? miao = '0' + miao : miao;//输出的格式赋值给times;var times = shi + ":" + fen + ":" + miao;//把结果打印到div的里面var showTime = document.getElementById('showTime').innerHTML = times;}, 1000);//定时刷新时间设置为1000毫秒

运行结果

以上就是我的分享，新手上道，请多多指教。持续更新哦！

js定时器实现倒计时小案例相关推荐

JavaScript 国庆倒计时小案例
本次实现js国庆倒计时小案例开发工具与关键技术:Visual Studio 2015 JavaScript 当然首先还是先写出大概样式如下图: 之后便是我的css样式了: 下图便是在页面加载完成的 ...
JS实现验证码倒计时验证案例
JS实现验证码倒计时验证案例前言验证案例 1.代码 2.代码功能解析 1.验证码 2.验证 3.倒计时总结前言这是一个将验证和倒计时综合起来的案例,案例也不难理解,在页面的设计中,需要这样的 ...
js定时器与数码时钟案例（源码及备注）
js定时器与数码时钟案例开启定时器 1.setInterval 间隔型 setInterval(参数一,参数二); 第一个参数是一个函数,第二个参数是时间(单位是毫秒) 意思就是每隔多长时间执行一次 ...
Vue里使用three.js实现3D模型小案例
Vue里使用three.js实现3D模型小案例 1.下载three.js包 npm install three --save 或者 yarn add three --save 2.组件代码 <t ...
使用js定时器实现倒计时功能
先看看效果图: 倒计时使用的技术主要就是js中的定时器. 首先还是先理一下思路,先要确定一个具体的时间,你想从哪个时间到哪个时间,我这个就是从现在的时间到2022年过年,然后使用data对象获取天.小 ...
【JS】随机点名小案例
一.html <h2>随机点名</h2><div class="box"><span>名字是:</span><di ...
【每日一练】倒计时小案例
样式: <style>span {display: inline-block;width: 34px;height: 30px;background-color: rgb(14, 90, ...
初级JS二维数组小案例
题目: 通过循环按行顺序为一个5×5的二维数组a赋1到25的自然数,然后输出该数组的左下半三角.试编程. 什么是二维数组? 例子:var arr = [[1,2,3,4],[5,6,7,8]]; 数组 ...
利用js实现论坛发帖小案例
演示情况:

js定时器实现倒计时小案例

案例介绍

HTML代码

JS代码

js定时器实现倒计时小案例相关推荐

最新文章

热门文章