整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
路：
1、php計算出倒計時時間戳
2、js展示倒計時日期格式
具體代碼如下：
<?php
// 注意：php的時間是以秒算。js的時間以毫秒算
// 設置時區
date_default_timezone_set('PRC');
//配置每天的活動時間段
$starttimestr = date('Y-m-d H:i:s', strtotime(date('Y-m-d')));
$endtimestr = date('Y-m-d H:i:s', strtotime(date('Y-m-d', strtotime('+1 day'))));
$starttime = strtotime($starttimestr);
$endtime = strtotime($endtimestr);
$nowtime = time();
if ($nowtime < $starttime) {
exit("活動還沒開始,活動時間是：{$starttimestr}至{$endtimestr}");
}
if ($endtime >= $nowtime) {
$lefttime = $endtime - $nowtime; //實際剩下的時間（秒）
} else {
$lefttime = 0;
exit("活動已經結束！");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP+JS活動秒殺倒計時原理</title>
</head>
<body>
<h1>活動開始時間:<?php echo $starttimestr ?></h1>
<h1>活動結束時間:<?php echo $endtimestr ?></h1>
<h4>距離活動結束還有 <strong id="RemainD"></strong>天
<strong id="RemainH"></strong>小時
<strong id="RemainM"></strong>分鐘
<strong id="RemainS"></strong>.<strong id="RemainL"></strong>秒
</h4>
<script>
var runtimes = 0;
function GetRTime() {
var lefttime = <?php echo $lefttime; ?> * 1000 - runtimes * 1000;
if (lefttime >= 0) {
var nD = Math.floor(lefttime / (1000 * 60 * 60 * 24)) % 24;
var nH = Math.floor(lefttime / (1000 * 60 * 60)) % 24;
var nM = Math.floor(lefttime / (1000 * 60)) % 60;
var nS = Math.floor(lefttime / 1000) % 60;
document.getElementById("RemainD").innerHTML = nD;
document.getElementById("RemainH").innerHTML = nH;
document.getElementById("RemainM").innerHTML = nM;
document.getElementById("RemainS").innerHTML = nS;
if (lefttime == 5 * 60 * 1000) {
alert("還有最后五分鐘！");
}
runtimes++;
setTimeout("GetRTime()", 1000);
} else {
alert('活動結束了！');
location.reload();
}
}
var Num = 0;
onload = function() {
Refresh();
setInterval("Refresh();", 100);
GetRTime();
}
function Refresh() {
if (Num < 10) {
document.getElementById("RemainL").innerHTML = Num;
Num = Num + 1;
} else {
Num = 0;
}
}
</script>
</body>
</html>模擬活動開始時間為程序運行當天，結束時間為第二日凌晨
源碼下載地址：文章底部了解更多
百度網盤提取碼：trgm
使用用法：源碼下載解壓后直接將index.php放到項目根目錄就可以
有時，您將需要構建一個JavaScript倒數時鐘。您可能有活動，銷售，促銷或游戲。您可以使用原始JavaScript構建時鐘，而不用尋找最近的插件。雖然有很多很棒的時鐘插件，但是使用原始JavaScript可以帶來以下好處：
因此，事不宜遲，這里介紹了如何僅用18行JavaScript來制作自己的倒計時時鐘
以下是創建基本時鐘所涉及步驟的快速概述：
首先，您需要設置一個有效的結束日期。這應該是JavaScript的Date.parse（）方法可以理解的任何格式的字符串。例如：
在ISO 8601格式：
const deadline = '2015-12-31';
簡短格式：
const deadline = '31/12/2015';
或者，長格式：
const deadline = 'December 31 2015';
這些格式中的每一種都允許您指定確切的時間和時區（對于ISO日期，則為UTC的偏移量）。例如：
const deadline = 'December 31 2015 23:59:59 GMT+0200';
您可以在本文中閱讀有關JavaScript中日期格式的更多信息。
下一步是計算剩余時間。我們需要編寫一個函數，該函數需要一個表示給定結束時間的字符串（如上所述）。然后，我們計算該時間與當前時間之間的時差。看起來像這樣：
function getTimeRemaining(endtime){
const total = Date.parse(endtime) - Date.parse(new Date());
const seconds = Math.floor( (total/1000) % 60 );
const minutes = Math.floor( (total/1000/60) % 60 );
const hours = Math.floor( (total/(1000*60*60)) % 24 );
const days = Math.floor( total/(1000*60*60*24) );
return {
total,
days,
hours,
minutes,
seconds
};
}
首先，我們創建一個變量total，以保留剩余時間直到截止日期。該Date.parse()函數將時間字符串轉換為毫秒值。這使我們可以相減兩次，并獲得兩者之間的時間量。
const total = Date.parse(endtime) - Date.parse(new Date());
現在，我們要將毫秒轉換為天，小時，分鐘和秒。讓我們以秒為例：
const seconds = Math.floor( (t/1000) % 60 );
讓我們分解一下這里發生的事情。
重復此邏輯，將毫秒轉換為分鐘，小時和天。
準備好幾天，幾小時，幾分鐘和幾秒鐘之后，我們現在可以將數據作為可重用的對象返回：
return {
total,
days,
hours,
minutes,
seconds
};
該對象允許您調用函數并獲取任何計算值。這是如何獲取剩余時間的示例：
getTimeRemaining(deadline).minutes
方便吧？
現在，我們有了一個可以花費剩余的天，小時，分鐘和秒的功能，我們可以構建時鐘了。首先，我們將創建以下HTML元素來保存時鐘：
<div id="clockdiv"></div>
然后，我們將編寫一個在新div中輸出時鐘數據的函數：
function initializeClock(id, endtime) {
const clock = document.getElementById(id);
const timeinterval = setInterval(() => {
const t = getTimeRemaining(endtime);
clock.innerHTML = 'days: ' + t.days + '<br>' +
'hours: '+ t.hours + '<br>' +
'minutes: ' + t.minutes + '<br>' +
'seconds: ' + t.seconds;
if (t.total <= 0) {
clearInterval(timeinterval);
}
},1000);
}
該函數有兩個參數。這些是包含我們時鐘的元素的ID，以及倒計時的結束時間。在函數內部，我們將聲明一個clock變量并將其用于存儲對我們的時鐘容器div的引用。這意味著我們不必繼續查詢DOM。
接下來，我們將使用setInterval每秒執行一個匿名函數。此功能將執行以下操作：
此時，剩下的唯一步驟是像這樣運行時鐘：
initializeClock('clockdiv', deadline);
恭喜你！現在，您僅用18行JavaScript就擁有了一個基本時鐘。
在設置時鐘樣式之前，我們需要進行一些細化。
在時鐘中，我們習慣于setInterval每秒更新一次顯示。多數情況下，這很好，除非在開始時會有一秒鐘的延遲。要消除此延遲，我們必須在間隔開始之前更新一次時鐘。
讓我們將要傳遞給setInterval它的匿名函數移到其自己的獨立函數中。我們可以命名這個函數updateClock。在updateClock外部調用該函數setInterval，然后在內部再次調用setInterval。這樣，時鐘顯示就沒有延遲了。
在您的JavaScript中，替換為：
const timeinterval = setInterval(() => { ... },1000);
有了這個：
function updateClock(){
const t = getTimeRemaining(endtime);
clock.innerHTML = 'days: ' + t.days + '<br>' +
'hours: '+ t.hours + '<br>' +
'minutes: ' + t.minutes + '<br>' +
'seconds: ' + t.seconds;
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock(); // run function once at first to avoid delay
var timeinterval = setInterval(updateClock,1000);
我們需要使時鐘腳本更高效。我們只想更新時鐘中的數字，而不是每秒重新構建整個時鐘。實現此目的的一種方法是將每個數字放在span標簽中，然后僅更新這些跨度的內容。
這是HTML：
<div id="clockdiv">
Days: <span class="days"></span><br>
Hours: <span class="hours"></span><br>
Minutes: <span class="minutes"></span><br>
Seconds: <span class="seconds"></span>
</div>
現在讓我們參考這些元素。在clock定義變量的位置之后添加以下代碼
const daysSpan = clock.querySelector('.days');
const hoursSpan = clock.querySelector('.hours');
const minutesSpan = clock.querySelector('.minutes');
const secondsSpan = clock.querySelector('.seconds');
接下來，我們需要更改updateClock功能以及更新數字。新代碼如下所示：
function updateClock(){
const t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = t.hours;
minutesSpan.innerHTML = t.minutes;
secondsSpan.innerHTML = t.seconds;
...
}
現在時鐘不再每秒都在重建，我們還有另一件事要做：添加前導零。例如，不是讓時鐘顯示7秒，而是顯示07秒。一種簡單的方法是在數字的開頭添加字符串“ 0”，然后切掉最后兩位數字。
例如，要在“ seconds”值上添加前導零，您可以對此進行更改：
secondsSpan.innerHTML = t.seconds;
對此：
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
如果需要，您也可以在分鐘和小時中添加前導零。如果您走了這么遠，恭喜！您的時鐘現在可以顯示了。
注意：您可能需要在CodePen中單擊“重新運行”才能開始倒計時。
下面的示例演示如何針對某些用例擴展時鐘。它們都是基于上面看到的基本示例。
假設我們希望時鐘顯示在某些日子，而不是其他日子。例如，我們可能會發生一系列事件，并且不想每次都手動更新時鐘。這是提前安排事情的方法。
通過在CSS中將其display屬性設置為隱藏時鐘none。然后將以下內容添加到initializeClock函數中（以開頭的行之后var clock）。一旦initializeClock調用此函數，這將導致時鐘僅顯示：
clock.style.display = 'block';
接下來，我們可以指定顯示時鐘的日期。這將替換deadline變量：
const schedule = [
['Jul 25 2015', 'Sept 20 2015'],
['Sept 21 2015', 'Jul 25 2016'],
['Jul 25 2016', 'Jul 25 2030']
];
schedule數組中的每個元素代表一個開始日期和一個結束日期。如上所述，可以包括時間和時區，但是我在這里使用了簡單的日期來保持代碼的可讀性。
最后，當用戶加載頁面時，我們需要檢查是否在指定的時間范圍內。該代碼應替換先前對該initializeClock函數的調用。
// iterate over each element in the schedule
for (var i=0; i<schedule.length; i++) {
var startDate = schedule[i][0];
var endDate = schedule[i][1];
// put dates in milliseconds for easy comparisons
var startMs = Date.parse(startDate);
var endMs = Date.parse(endDate);
var currentMs = Date.parse(new Date());
// if current date is between start and end dates, display clock
if (endMs > currentMs && currentMs >= startMs ) {
initializeClock('clockdiv', endDate);
}
}
schedule.forEach(([startDate, endDate]) => {
// put dates in milliseconds for easy comparisons
const startMs = Date.parse(startDate);
const endMs = Date.parse(endDate);
const currentMs = Date.parse(new Date());
// if current date is between start and end dates, display clock
if (endMs > currentMs && currentMs >= startMs ) {
initializeClock('clockdiv', endDate);
}
});
現在，您可以提前安排時鐘，而無需手動更新。您可以根據需要縮短代碼。為了便于閱讀，我讓我變得冗長。
用戶到達或開始特定任務后，有必要在給定的時間內設置倒計時。我們將在此處將計時器設置為10分鐘，但是您可以使用任意時間。
我們需要做的就是deadline用這個替換變量：
const timeInMinutes = 10;
const currentTime = Date.parse(new Date());
const deadline = new Date(currentTime + timeInMinutes*60*1000);
該代碼將花費當前時間，并增加十分鐘。這些值將轉換為毫秒，因此可以將它們加在一起并變成新的截止日期。
現在，我們有了一個時鐘，可以從用戶到達時開始倒數十分鐘。隨意玩耍，嘗試不同的時間長度。
有時，有必要將時鐘狀態保留的時間不僅限于當前頁面。如果我們想在整個網站上設置10分鐘的計時器，則我們不希望在用戶轉到其他頁面時將其重置。
一種解決方案是將時鐘的結束時間保存在cookie中。這樣，導航到新頁面不會將結束時間重置為現在的十分鐘。
這是邏輯：
要實現這一點，請用deadline以下內容替換變量：
let deadline;
// if there's a cookie with the name myClock, use that value as the deadline
if(document.cookie && document.cookie.match('myClock')){
// get deadline value from cookie
deadline = document.cookie.match(/(^|;)myClock=([^;]+)/)[2];
} else {
// otherwise, set a deadline 10 minutes from now and
// save it in a cookie with that name
// create deadline 10 minutes from now
const timeInMinutes = 10;
const currentTime = Date.parse(new Date());
deadline = new Date(currentTime + timeInMinutes*60*1000);
// store deadline in cookie for future reference
document.cookie = 'myClock=' + deadline + '; path=/; domain=.yourdomain.com';
}
這段代碼利用了cookie和正則表達式，它們本身就是單獨的主題。因此，我在這里不再贅述。需要注意的一件事是，您需要更改.yourdomain.com為實際域。
JavaScript日期和時間是從用戶計算機中獲取的。這意味著用戶可以通過更改計算機上的時間來影響JavaScript時鐘。在大多數情況下，這無關緊要。但是，在某些超級敏感的情況下，有必要從服務器獲取時間。可以使用一些PHP或Ajax來完成，這兩者都超出了本教程的范圍。
從服務器獲取時間后，我們可以使用本教程中的相同技術來使用它。
閱讀完本文中的示例之后，您現在知道如何僅用幾行原始JavaScript代碼創建自己的倒數計時器！我們已經研究了如何制作基本的倒數時鐘并有效顯示它。我們還介紹了添加一些有用的附加功能，包括計劃，絕對時間和相對時間，以及使用Cookie保留頁面和站點訪問之間的狀態。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Countdown Clock</title>
<style type="text/css">
body{
text-align: center;
background: #00ECB9;
font-family: sans-serif;
font-weight: 100;
}
h1{
color: #396;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
}
#clockdiv{
font-family: sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#clockdiv > div{
padding: 10px;
border-radius: 3px;
background: #00BF96;
display: inline-block;
}
#clockdiv div > span{
padding: 15px;
border-radius: 3px;
background: #00816A;
display: inline-block;
}
.smalltext{
padding-top: 5px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Countdown Clock</h1>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
<script type="text/javascript">
function getTimeRemaining(endtime) {
const total = Date.parse(endtime) - Date.parse(new Date());
const seconds = Math.floor((total / 1000) % 60);
const minutes = Math.floor((total / 1000 / 60) % 60);
const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
const days = Math.floor(total / (1000 * 60 * 60 * 24));
return {
total,
days,
hours,
minutes,
seconds
};
}
function initializeClock(id, endtime) {
const clock = document.getElementById(id);
const daysSpan = clock.querySelector('.days');
const hoursSpan = clock.querySelector('.hours');
const minutesSpan = clock.querySelector('.minutes');
const secondsSpan = clock.querySelector('.seconds');
function updateClock() {
const t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
const timeinterval = setInterval(updateClock, 1000);
}
const deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
</script>
</body>
</html>《圖文細說JavaScript 的運行機制》
網站的開發過程有一些特定功能需要用倒計時的顯示，如某個活動還剩余多少時間？某個商城的活動還有多久開始？又或者某件商品還有多久開售？在諸如這樣的運用中都會用到倒計時的情況，今天就給大家說說如何用在前端編寫倒計時的效果。
一、單個倒計的顯示
如何制作一個大于一天則顯示天和小時，小于一天則顯示小時、分鐘，秒數的倒計時效果。
示例一，帶文字描述，即天、時、分，秒等，即xx時xx分xx秒、xx天xx時。
1、HTML代碼
<div><span tag="countdown" tm="此處為后端獲取或自己定的倒計時長(時間戳)"></span></div>
2、JavaScript代碼
<script type="text/javascript">
var timesup_time;
function timesdown(){
var tmfunc=function(){
var tm=Math.ceil($("#countdown").attr("tm"))-1;
$("#countdown").attr("tm",tm);
if(tm<0){
$("#countdown").html("活動已經開始了");
}else{
var dd=Math.floor(tm/3600/24);
var hh=Math.floor(tm/3600);
var mm=Math.floor((tm-hh*3600)/60);
var ss=Math.floor((tm-hh*3600-mm*60)%60);
dd=dd<10?"0"+dd:dd;
hh=hh<10?"0"+hh:hh;
mm=mm<10?"0"+mm:mm;
ss=ss<10?"0"+ss:ss;
var tt=hh+"時"+mm+"分"+ss+"秒";
if(hh>24){
tt=dd+'天'+(hh%24)+'小時';
};
$("#countdown").html(tt);
};
timesup_time=window.setTimeout(tmfunc,1000);
};
window.clearTimeout(timesup_time);
timesup_time=window.setTimeout(tmfunc,1000);
};
</script>
示例二，加入不同的顯示方式，即不帶文字描述(00:00:00)的方式顯示,帶文字描述(xx時xx分xx秒、xx天xx時)的方式顯示。
1、HTML代碼
<div><span id="countdown" tm="此處為后端獲取或自己定的倒計時長(時間戳)" tmtype="自己定義的字符顯示類型"></span></div>
2、JavaScript代碼
<script type="text/javascript">
var timesup_time;
function timesdown(){
var tmfunc=function(){
var tm=Math.ceil($("#countdown").attr("tm"))-1;
$("#countdown").attr("tm",tm);
//html代碼中tmtype中的值
var tmtype=$("#countdown").attr("tmtype") || "long";
if(tm<0){
$("#countdown").html("活動已經開始了");
}else{
var dd=Math.floor(tm/3600/24);
var hh=Math.floor(tm/3600);
var mm=Math.floor((tm-hh*3600)/60);
var ss=Math.floor((tm-hh*3600-mm*60)%60);
dd=dd<10?"0"+dd:dd;
hh=hh<10?"0"+hh:hh;
mm=mm<10?"0"+mm:mm;
ss=ss<10?"0"+ss:ss;
var tt=hh+"時"+mm+"分"+ss+"秒";
if(tmtype=="mini")tt=hh+":"+mm+":"+ss;
if(hh>24){
tt=dd+'天'+(hh%24)+'小時';
};
$("#countdown").html(tt);
};
timesup_time=window.setTimeout(tmfunc,1000);
};
window.clearTimeout(timesup_time);
timesup_time=window.setTimeout(tmfunc,1000);
};
</script>
二、頁面中多個倒計的顯示
如何制作在同一頁面的多個倒計時展示？如在商城的活動列表上需要顯示不同活動的倒計時等效果。
1、HTML代碼
<div><span tag="countdown" tm="此處為后端獲取或自己定的倒計時長(時間戳)" tmtype="自己定義的字符顯示類型"></span><span tag="countdown" tm="" tmtype=""></span><span tag="countdown" tm="" tmtype=""></span></div>
2、JavaScript代碼
頁面中多個倒計的顯示代碼示例
注：以上JavaScript代碼需要在頁面加載后執行，即需要將以上JS函數放入頁面加載后執行的方法中，如$(document).ready(function($){});。
感謝您閱讀了這篇文章，希望會對您有所幫助。喜歡我就關注我吧，后面的文章內容會越來越精彩喔！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
