您的位置：首页 > Web前端 > JavaScript

JS实现倒计时功能

2015-11-21 22:54 597 查看

上午主要编写了倒计时的功能，用了两种算法，一种是最终秒数、分钟数、小时数减去当前的秒、分钟和小时，当然要重点注意的就是借位的问题。另一种算法就是将最终时间转换成秒数，当前时间转换成秒数，相减之后再换算成小时、分钟和秒，再分别显示出来。

下面是我编写的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时</title>
</head>
<body>
<span id="time"></span>
<script src="jquery-1.11.1.js"></script>
<script>
function Time(){
var date = new Date();
var finalhour = 15;   //最终小时
var finalmin = 34;
var finalsec = 0;
var nowhours = date.getHours();   //当前小时
var nowmin = date.getMinutes();
var nowsec = date.getSeconds();
var showsec = 0;   //显示的秒数
var showmin = 0;
var showhour = 0;
if(nowsec > finalsec){   //如果当前时间的秒数大于最终时间的秒数时，
showsec = (finalsec + 60) - nowsec;  //用最终的秒数加上60就可以减去当前的秒数，赋值给变量showsec就是剩下的秒数。
finalmin = finalmin - 1; // 因为 最终秒数 加上了60s 相当于1分钟，最终分钟就要剪掉1，相当于数学中的借位。
}else  //如果不大于，就可以直接减去。
{
showsec = finalsec - nowsec;
}
if(nowmin > finalmin){    //同理秒， 分钟也是要借位，借小时的，如果借了，小时就减1 分钟就加60之后减去当前分钟 就等于剩余分钟，不借直接减
showmin = (finalmin + 60) - nowmin;
finalhour = finalhour - 1;
}else
{
showmin = finalmin - nowmin;
}
showhour = finalhour - nowhours;  //小时就直接减，如果被借位了 前面也已经减过了。
if(showsec<10){
showsec = "0" + showsec;   //如果显示的秒小于10，就在前面加上字符串0.
}
if(showmin<10){
showmin = "0" + showmin;   //同理
}
if(showhour<10){
showhour = "0" + showhour;
}
$("#time").html("距离中午12点整还有：" + showhour + "小时" + showmin + "分钟" + showsec + "秒");
}
Time();
setInterval(Time,1000);

//用都换算成s的算法来计算剩余时间。
//     var nowSec = nowhours * 3600 + nowmin * 60 + nowsec;
//     var finalSec = finalhour * 3600 + finalmin * 60 + finalsec;
//     var restSec = finalSec - nowSec;
//     var showHour = parseInt(restSec/3600);
//     var showMin = parseInt((restSec%3600)/60);
//     var showSec = (restSec%3600)%60;
//     if(showSec<10){
//         showSec = "0" + showSec;
//     }
//     if(showMin<10){
//         showMin = "0" + showMin;
//     }
//     if(showHour<10){
//         showHour = "0" + showHour;
//     }
//     $("#time").html("距离15点34分还有：" + showHour + "小时" + showMin + "分钟" + showSec + "秒");
// }
// Time();
// setInterval(Time,1000);
</script>
</body>
</html>

今天上课讲的一些知识：

1.全局变量是全局对象的属性。

2.像alert()、setInterval()、eval()等都是window的方法。

3.函数中返回值只有一个。

4.如果变量较多，可以定义一个对象，里面存放要定义的变量，需要的时候直接对象名.属性名()调用。但是真正项目中要封装起来，不允许随便访问。可以用立即执行函数解决权限访问问题。

5.找错，打断点问题，打一个断点的意思就是执行代码直到你断点所在位置，若操作后在前面某个部分停止了，那么就说明停止的那个地方代码执行。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航