JavaScript--倒计时

在JavaScript中，我们可以利用它实现很多的小功能，现在我们就一起来利用它实现一个小小的倒计时案例。

首先，我们得先用html进行布局，怎样布局会使你的JavaScript的代码有所不同，这次所使用的布局相对简单，使用input来展示倒计时。

input是文本框，展示的时候只需要利用它的value值进行改变就行，除此之外，我还多加了一个开始按钮，当按下按钮的时候倒计时开始。

<div class="dan01" id="dar"><span>天</span><input type="text" value=""><br><span>小时</span><input type="text" value=""><br><span>分钟</span><input type="text" value=""><br><span>秒</span><input type="text" value=""><br><button id="but">倒计时开始</button>
</div>

布局完成后，我们就可以开始写JavaScript代码了。

我们可以先写一个方法，方法中包含倒计时的主体内容，写倒计时，我们就要先确定在未来哪一天停止并计算它与现在的时间差。

与此同时，我们可以在这个时候想到在倒计时完成后就会停止，我们可以加个if条件语句，设置它小于0时到计时就结束。

var cha;
var stpart = new Date(2021,9,1,00,00,00); //设置时间
var mydate=new Date();                    //现在的时间
cha = stpart-mydate;                      //计算时间差
if(cha<0){                                //小于0时倒计时结束return;
}

接下来，我们就需要计算剩余的天数，而时间差是以毫秒数来显示的，计算天数就需要知道时间的换算，一秒是等于1000毫秒。

所以剩余的天数是等于时间差除以1000毫秒、除以60秒、除以60分钟再除以24小时便是所剩的天数。

而计算小时数，只需要用时间差减去刚刚计算出的天数就可以获得剩余的毫秒数，再从中换算出小时数。

不过此时需要注意一点，因为时间差是毫秒数，而我们计算出的天数需要进行计算换成毫秒数相减才能获得剩余的毫秒数。

以此类推，分钟数、秒数都是如此。

计算出具体的时间差，就只剩输出到页面上，获取所有的input标签，将计算出来的值输出到input中。

在这个时候，使用input标签的好处便显示出来了。

我们不止能快速获取，而且只需要让我们计算出的值相应的值成为input标签的value值就行了。

比起其他的要相对快很多，当然啦!你也可以自己去尝试尝试，不尝试怎么会进步呢？

var days = Math.floor(cha/1000/60/60/24);  //天数
cha = cha-days*24*60*60*1000;              //减去天数所剩余的毫秒数
var hours = Math.floor(cha/1000/60/60);    //小时数
cha = cha-hours*60*60*1000;
var minutes = Math.floor(cha/1000/60);     //分钟数
cha = cha-minutes*60*1000;
var seconds = Math.floor(cha/1000);        //秒数
var dar = document.getElementById("dar").getElementsByTagName("input");
dar[0].value=days;                         //输出
dar[1].value=hours;
dar[2].value=minutes;
dar[3].value=seconds;

在上图，我获取input标签时是获取标签名，然后利用索引值来完成这段操作，因为这样写代码相对要少很多，让代码更简短、简洁。

到这里，代码的主体部分已经完成了，不过总要注意一点美观吧！所以接下来这点代码是美化用的。

当倒计时有数字成为个位数时，而其他还是两位数总感觉不太好看，这种清况我们可以用判断。

如果它小于两位数就在它前面加个0，毕竟美观很重要嘛！

dar[0].value=dar[0].value<=9?"0"+dar[0].value:dar[0].value;
dar[1].value=dar[1].value<=9?"0"+dar[1].value:dar[1].value;
dar[2].value=dar[2].value<=9?"0"+dar[2].value:dar[2].value;
dar[3].value=dar[3].value<=9?"0"+dar[3].value:dar[3].value;

当倒计时主体写完了，就该让它在页面上显示了，页面加载事件写完，就该获取按钮并绑定点击事件。

我们想要让它显示并且一直显示的话就需要使用计时器，让它每隔一秒钟刷新一次，这样便可以展示出倒计时。

而这其中用到了一个方法，那就是setInterval()方法，它的作用是按照指定的周期来调用函数或计算表达式，

有一点需要注意，周期时间是以毫秒来计算的，而不是以其他的计时单位来计算的。

而倒计时是一秒一秒的减少，所以这一次的计时器必须是以1000毫秒来计算。

window.onload = function(){var but = document.getElementById("but");but.onclick = function(){timer = setInterval(function(){showTime();},1000);}}

这个倒计时案例相对还是简单的，所用到的知识点也不是很多，获取时间所用到的Date()方法，if()判断语句，时间的换算，数组索引值和一个绑定了点击事件的计时器。

这些都是JavaScript的一些基础用法，但往往要先把基础的给掌握并且融会贯通再学难一些的要更好一点。

我们总不能一口吃成一个大胖子，要慢慢把所有的都给消化掉，让它成为自己脑海中的记忆，如此，才能让自己学得更好。

那就让我们一起努力，一起成长，一起变强！

JavaScript--倒计时相关推荐

Javascript倒计时页面跳转
Javascript倒计时页面跳转在js中实现页面定时跳转我们要使用setInterval或setTimeOut函数,还可以使用页面的meta实现. 例1: <script type=&quo ...
html自动刷新倒计时,javascript – 倒计时结束时刷新页面
我有一个javascript倒计时脚本,我希望我的页面在倒计时结束时刷新一次. 这是我的完整代码. //JavaScript code for countdown function getTimeRe ...
javascript 倒计时工具
JavaScript 倒计时工具由于setInterval自身的不稳定性.因此,该工具主要是以setTimeout 结合递归方法来实现的, <!--* @Description: * @A ...
JavaScript倒计时算法（计算剩余多少天）实现
描述: 使用JavaScript完成指定的日期的倒计时,例如距离活动还有多少时间结束算法: 1.使用时间对象的getTime()方法获取所有的毫秒数 2.将指定时间的毫秒数和当前时间的毫秒数相减得到 ...
javascript 倒计时
从事前端工作以来,经常用到很多牛人写的javascript的库和插件.很是羡慕他们的能力, 自己也是以他们这些能人为目标不断努力.自己一直以来都想写一个自己的js库,再封装一些自己常用插件,想法是美 ...
JavaScript倒计时及倒计时发送信息
1.js倒计时效果 <!DOCTYPE html> <html><head><meta charset="utf-8"><ti ...
JavaScript倒计时跳转到另一个页面
需求页面上显示一个倒计时5秒的数字,到了5秒以后跳转到另一个页面案例分析页面上创建一个span用于显示变化的数字,点返回链接直接跳转. 定义一个变量为5,每过1秒调用1次刷新refresh()函 ...
html加js倒计时代码,分享最简单的JavaScript倒计时代码（附完整代码）
工作中经常需要在页面中设置倒计时,那你知道JS倒计时代码怎么写吗?这篇文章就给大家分享一个最简单的JS倒计时代码,以及详细的倒计时JS代码的思路,,有一定的参考价值,感兴趣的朋友可以看看. 举例:设定 ...
JavaScript倒计时
倒计时: 1.设置一个有效的结束日期 2.计算剩余时间 3.将时间转换成可用的格式 4.输出时钟数据作为一个可重用的对象 5.在页面上显示时钟,并在它到达0时停止 <div id="c ...
JavaScript 倒计时动态效果（附带小天使）
倒计时动态效果 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF ...

JavaScript--倒计时

在JavaScript中，我们可以利用它实现很多的小功能，现在我们就一起来利用它实现一个小小的倒计时案例。

JavaScript--倒计时相关推荐

最新文章

热门文章