JavaScript PHP Good Countdown Timer
-
13-11-2019 - |
Domanda
Fondamentalmente sono bravo in JavaScript e vorrei un migliore timer per il conto alla rovescia per il mio progetto. Al momento il mio timer assomiglia a questo:
01:25:05
Vorrei che assomigliasse a questo:
1 ora, 25 minuti e 5 secondi
Ma voglio anche che sia intelligente. Quindi, se sono solo 25 minuti, dirà:
25 minuti.
Questo è il mio attuale codice JavaScript:
function secondCountdown(){
if(typeof(skip) == "undefined"){
skip = "set";
} else {
var timeleft = document.getElementById("timeleft").innerHTML;
var time_split = timeleft.split(":");
if(parseInt(time_split[0]) < 10){
time_split[0] = time_split[0].charAt(1);
}
if(parseInt(time_split[1]) < 10){
time_split[1] = time_split[1].charAt(1);
}
if(parseInt(time_split[2]) < 10){
time_split[2] = time_split[2].charAt(1);
}
seconds = parseInt(time_split[2]) + parseInt(time_split[1]*60) + parseInt(time_split[0]*3600);
seconds -= 1;
if(seconds > 0){
var hours= Math.floor(seconds/3600);
seconds %= 3600;
var minutes = Math.floor(seconds/60);
seconds %= 60;
var timeleft = ((hours < 10) ? "0" : "") + hours + ":" + ((minutes < 10) ? "0" : "") + minutes + ":" + ((seconds < 10) ? "0" : "") + seconds;
document.getElementById("timeleft").innerHTML = timeleft;
} else {
document.getElementById("timeleft").innerHTML = "";
window.location='test.php?pageid=' + getURLParam("pageid");
return false;
}
}
setTimeout("secondCountdown()",1000);
}
window.onload = secondCountdown;
Forse qualcuno potrebbe modificarlo per me per ottenere quello che voglio?
Modificare:
Questo è il lato PHP del timer.
<span id="timeleft">
$master = $timer['gta_time'] - time();
echo date( "00:i:s", $timer['gta_time'] - time() );
</span>
Soluzione
Ooh, ho appena visto che sono un po 'lento con questo, ma sembra funzionare, quindi lo aggiungerò comunque. :)
function parseTime() {
var timeLeftStr;
var timeLeft = 0;
timeLeftStr = document.getElementById("timeleft").innerHTML;
timeLeftStr.replace(/(\d+):(\d+):(\d+)/, function () {
for (var i = 1; i < arguments.length - 2; i++) {
// Convert to ms
timeLeft += arguments[i] * Math.pow(60, 3 - i) * 1000;
}
});
countdown(new Date(timeLeft));
}
function countdown(timeLeft) {
var hours = timeLeft.getUTCHours();
var minutes = timeLeft.getUTCMinutes();
var seconds = timeLeft.getUTCSeconds();
if (timeLeft.valueOf() == 0) {
document.getElementById("timeleft").innerHTML = "";
window.location = 'test.php?pageid=' + getURLParam("pageid");
return false;
} else {
document.getElementById("timeleft").innerHTML =
(hours == 0 ? "" : hours + (hours == 1 ? " hour" : " hours")) +
(minutes == 0 ? "" : (hours ? (seconds ? ", " : " and ") : " ") + minutes + (minutes == 1 ? " minute" : " minutes")) +
(seconds == 0 ? "" : (hours || minutes ? " and " : "") + seconds + (seconds == 1 ? " second" : " seconds"));
setTimeout(function () { countdown(new Date(timeLeft - 1000)); }, 1000);
}
}
window.onload = parseTime;
Modificare rimuovere skip
.
EDIT 2 Per rimuovere i controlli di inizio e fine su regex, aggiungi ,
e and
sostegno.
EDIT 3 usare getUTCHours
, ecc. Quindi funziona in altri fulmine (OOPS).
Altri suggerimenti
Invece di questa riga:
var timeleft = ((hours < 10) ? "0" : "") + hours + ":" + ((minutes < 10) ? "0" : "") + minutes + ":" + ((seconds < 10) ? "0" : "") + seconds;
Di 'qualcosa del genere per una soluzione di base:
var timeleft = (hours > 0 ? hours + " hours " : "")
+ (minutes > 0 ? minutes + " minutes " : "")
+ (seconds > 0 ? seconds + " seconds " : "");
O per intero:
var timeleft = "";
if (hours > 0)
timeleft += hours + (hours > 1 ? " hours" : " hour");
if (minutes > 0) {
if (hours > 0)
timeleft += seconds > 0 ? ", " : " and ";
timeleft += minutes + (minutes > 1 ? " minutes" : " minute");
}
if (seconds > 0) {
if (timeleft != "")
timeleft += " and ";
timeleft += seconds + (seconds > 1 ? " seconds" : " second");
}
Ok, l'ho fatto ora e funziona (ho testato in opera):
Date.prototype.toTimeString = function()
{
var toReturnTime = new Array();
var times = [this.getHours(), this.getMinutes(), this.getSeconds()];
var times_names = [' hour', ' minute', ' second'];
var tmp = null;
for (var i=0; i<times.length; i++)
{
tmp = times[i];
if (tmp > 0)
{
toReturnTime.push(tmp + times_names[i] + (tmp == 1 ? '' : 's'));
toReturnTime.push(', ');
}
}
if (toReturnTime.length/2 >= 2)
{
toReturnTime.pop();
tmp = toReturnTime.pop();
toReturnTime.pop();
toReturnTime.push(' and ' + tmp);
}
else
toReturnTime.pop();
return toReturnTime.join('');
}
var date, timeleft;
function secondCountdown()
{
date.setSeconds(date.getSeconds() - 1);
timeleft.innerHTML = date.toTimeString();
if ((date.getHours() + date.getMinutes() + date.getSeconds()) > 0)
setTimeout("secondCountdown()",1000);
else
timeleft.innerHTML = 'ITS OVER';
}
function init()
{
timeleft = document.getElementById("timeleft");
var time_split = timeleft.innerHTML.split(":");
date = new Date(0, 0, 0, parseInt(time_split[0]), parseInt(time_split[1]), parseInt(time_split[2]));
secondCountdown();
}
window.onload = init;