js网页实时倒计时精确到秒级

前端技术 2023/09/09 JavaScript
一个很好用的js倒计时！网页实时倒计时，精确到秒级，和天数倒计时原理一样。js倒计时一般用于商城网站团购，特卖，很多地方都可用到！希望能够给大家带来帮助！

效果如下：
 
复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<style type=\"text/css\">
.leave_time_font{margin-left:35%;}
#fo{margin-left:32%;}
</style>
<title>WoYaoNi.CN-倒计时</title>
</head>
<body>
<h1>WoYaoNi.CN </h1>
<script src=\"./jquery.js\"></script>
<script type=\"text/javascript\">
$(document).ready(function(e) {
var _countSeconds = 0;
function _countDown(){
_countSeconds ++;
$(\'input.surplustime\').each(function(index, element) {
var $this = $(this);
var _totalTime = Number($this.val()) - _countSeconds;
var _day = parseInt(_totalTime/86400);
var _hours = parseInt(_totalTime%86400/3600);
var _minutes = parseInt(_totalTime%86400%3600/60);
var _seconds = parseInt(_totalTime%86400%3600%60);
var _strLite = \'<span class=\"day\">\'+_day+\'</span>天<span class=\"hour\">\'+_hours+\'</span>小时<span class=\"minutes\">\'+_minutes+\'</span>分<span class=\"seconds\">\'+_seconds+\'</span>秒\';
var _str = \'倒计时：\'+_strLite;
if($this.next(\'p.daojishi\').length > 0){
$this.next(\'p.daojishi\').html(_str);
}else if($this.next(\'p.leave_time_font\').length > 0){
$this.next(\'p.leave_time_font\').html(_strLite);
}
});
}
setInterval(_countDown, 1000);
})
</script>
</head>
<body>
<?php
ini_set(\'date.timezone\',\'Asia/Shanghai\');
$currenttime = time();
$a = strtotime(\'2014-2-14 00:00\');
$b = $a-$currenttime;
?>

<div id=\"djs\">
<div id=\"fo\">小伙伴们距离情人节只剩：</div>
<input type=\"hidden\" name=\"surplustime\" class=\"surplustime\" value=\"<?php echo $b; ?>\" />
<p class=\"leave_time_font\"><span class=\"day\">0</span>天<span class=\"hour\">0</span>小时<span class=\"minutes\">0</span>分<span class=\"seconds\">0</span>秒</p>
</div>
</body>
</html>

本文地址：https://www.stayed.cn/item/24522

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案