尝试构建每日"订购方式"倒计时,直到每日发货截止时间。(更喜欢保留香草JS) - 在这个特定的应用程序上,服务器端脚本不是一种选择。
1:我正在尝试确保如何将时间设置为特定的 EST 时间(每天下午 6 点),但不确定香草 JS 是否可以这样做?
2:当计时器倒计时并剩下一个小时时,它读起来像 0:mm:ss——是否可以在 0 时隐藏小时而只显示 mm:ss?
小提琴:http://jsfiddle.net/bill9000/rwet0o5f/96/
if (document.getElementById('countdownTimer')) {
pad = function(n, len) { // leading 0's
var s = n.toString();
return (new Array( (len - s.length + 1) ).join('0')) + s;
};
var timerRunning = setInterval(
function countDown() {
var now = new Date();
if ( (now.getDay() >= 1) && (now.getDay() <= 5) ) { // Monday to Friday only
var target = 15; // 15:00hrs is the cut-off point -------- Trying to get 6pm EST regardless of user time zone
if (now.getHours() < target) { // would be best if could hide the whole counter if past cutoff point each day
var hrs = (target - 1) - now.getHours();
//if (hrs < 0) hrs = 0;
if (hrs = 0) '';
var mins = 59 - now.getMinutes();
if (mins < 0) mins = 0;
var secs = 59 - now.getSeconds();
if (secs < 0) secs = 0;
var str = 'Order in the next <strong>' + hrs + ':' + pad(mins, 2) + ':' + pad(secs, 2) + '</strong> to ship <strong>today</strong>.' ;
document.getElementById('countdownTimer').innerHTML = str;
}
}
}, 1000
);
}
最近我一直在想... (它在地球上的任何地方都有效)
const
CountDownZone = document.querySelector('#count-down-Timer strong'),
TimeTarget = 15 // 15:00hrs is the cut-off point
;
function pad(n, len) { // leading 0's
let s = n.toString();
return '0'.repeat(Math.max(len - s.length, 0)) + s;
};
var timerRunning = setInterval(countDown, 1000);
function countDown() {
let
localTime = new Date(), // get your local time
utcTime = localTime.getUTCHours(), // find UTC hours
estTime = new Date() // create a new date object for the EST time
;
estTime.setHours(utcTime-5); // adjust it for EST hours.
if (
(estTime.getDay() > 0) && (estTime.getDay() < 6) // Monday to Friday only
&& (estTime.getHours() < TimeTarget)
)
{
let
count_HM = [],
hrs = (TimeTarget - 1) - estTime.getHours(),
mins = 59 - estTime.getMinutes(),
secs = 59 - estTime.getSeconds()
;
if (hrs > 0) { count_HM.push(hrs + ' hour(s)'); }
if (hrs > 0 || mins > 0) { count_HM.push(pad(mins, 2)+ ' minute(s)'); }
count_HM.push(pad(secs, 2)+ ' second(s)');
CountDownZone.textContent = count_HM.join(' - ');
}
else {
document.getElementById('count-down-Timer').textContent = 'count down Timer is off';
clearInterval(timerRunning);
}
}
#count-down-Timer {
padding: 20px 10px 20px 10px;
background-color: #afc8c5
}
<div id="count-down-Timer">Order in the next <strong>0.00.00</strong> to ship <strong>today</strong>.</div>
getUTC...
函数获取 UTC 时间部分,然后将它们调整为要查找的时区。您可以获取 UTC 日期,然后调整它以获取 EST 时间。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getUTCDay
// create a date based on the user's timezone
d = new Date();
// get the universal time, then remove the difference between UTC and EST, to get the EST hours
elem.innerHTML = d.getUTCHours() - 5;
要隐藏日期部分,只需将部分添加到数组中并使用":"连接,这将为您处理串联,而无需添加更多逻辑。
您还可以使用数组长度来计算出正确的单位
var arr_parts = [];
var hrs = (target - 1) - now.getHours();
var mins = 59 - now.getMinutes();
var secs = 59 - now.getSeconds();
if ( hrs ) {
arr_parts.push( hrs );
}
arr_parts.push( pad( mins, 2 ) );
arr_parts.push( pad( secs, 2 ) );
// number of parts to the countdown
// 3 = h:m:s
// 2 = m:s
// 1 = s
part_length = arr_parts.length;
// the biggest unit for the countdown
// so length of 1 means we need seconds at index 0)
arr_units = [ 'seconds', 'minutes', 'hours' ]
str_unit = arr_units[ part_length - 1 ];
var str = 'Order within the next <strong>'
+ arr_parts.join( ':' )
+ ' ' + str_unit
+ '</strong> to ship <strong>today</strong>.';
这是我使用的 JSfiddle 的修改版本(截止时间已更改,因此当我上次使用小提琴时它可以工作)http://jsfiddle.net/gwxptbfh/