JavaScript--倒计时

本文主要是介绍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--倒计时的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！