js实现时分秒倒计时功能,本案例实用到了jquery选择器,自己注意点,要引入jquery框架,倒计时的时间随意你怎么写,js 60秒倒计时,1小时倒计时等等,都没ok,下面先看看效果,如图。
js实现时分秒倒计时代码如下,js部分复制到你的项目中即可。
<html> <body> <span class="time-text" style="font-size: 20px;">00:30:00</span> </body> <script type="text/javascript"> $(function () { //一秒后执行(有好处的) setTimeout("changeTimeText()",1000); }); //修改倒计时时间 function changeTimeText() { var timeStr = $(".time-text").text(); var arr = timeStr.split(":"); var hour = parseInt(arr[0]); var minute = parseInt(arr[1]); var second = parseInt(arr[2]); var totalSecond = hour * 60 * 60 + minute * 60 + second; totalSecond--; if(totalSecond == -1){ //时间到停止 //do something return; } var h = Math.floor(totalSecond / 3600); var m = Math.floor(totalSecond / 60 % 60); var s = Math.floor(totalSecond % 60); var hourStr = h < 10 ? ('0' + h) : h; var minuteStr = m < 10 ? ('0' + m) : m; var secondStr = s < 10 ? ('0' + s) : s; $(".time-text").text(hourStr+':'+minuteStr+':'+secondStr); //不要用setInterval()方法,否则会出问题 setTimeout(changeTimeText,1000); } </script> </html>