how make colon punctuation appear between minutes , seconds? 2 hours on , still doesn't work. pretty stupid question still. want timer " 02:00 " instead " 02 00 " how can fix that?
// set minutes var mins = 2; var down = true; // calculate seconds (don't change this! unless time progresses @ different speed you...) var secs = mins * 60; var timeout; var doispontos = ":"; countdown(); function countdown() { timeout = settimeout('decrement()', 1000); } function colorchange(minutes, seconds) { if (minutes.value == "00" && seconds.value == "59") { minutes.style.color = "orange"; seconds.style.color = "orange"; doispontos = "orange"; } else if (minutes.value == "00" && seconds.value == "30") { minutes.style.color = "red"; seconds.style.color = "red"; doispontos = "red"; } } function decrement() { if (document.getelementbyid) { minutes = document.getelementbyid("minutes"); seconds = document.getelementbyid("seconds"); // if less minute remaining if (seconds < 59) { seconds.value = secs; } else { minutes.value = getminutes(); seconds.value = getseconds(); } colorchange(minutes, seconds); secs--; if (secs < 0) { secs--; cleartimeout(timeout); return; } countdown(); } } function getminutes() { // minutes seconds divided 60, rounded down mins = math.floor(secs / 60); return ("0" + mins).substr(-2); } function getseconds() { // take mins remaining (as seconds) away total seconds remaining return ("0" + (secs - math.round(mins * 60))).substr(-2); }<div id="timer"> <input id="minutes" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -5%;"> <input id="seconds" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -40%;"> </div>
you using inline styling fixed positioning. add want between them need have similar styling. instance using span tag:
<div id="timer"> <input id="minutes" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -5%;"> <span style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -30%;">:</span> <input id="seconds" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -40%;"> </div> // set minutes var mins = 2; var down = true; // calculate seconds (don't change this! unless time progresses @ different speed you...) var secs = mins * 60; var timeout; var doispontos = ":"; countdown(); function countdown() { timeout = settimeout('decrement()', 1000); } function colorchange(minutes, seconds) { if (minutes.value == "00" && seconds.value == "59") { minutes.style.color = "orange"; seconds.style.color = "orange"; doispontos = "orange"; } else if (minutes.value == "00" && seconds.value == "30") { minutes.style.color = "red"; seconds.style.color = "red"; doispontos = "red"; } } function decrement() { if (document.getelementbyid) { minutes = document.getelementbyid("minutes"); seconds = document.getelementbyid("seconds"); // if less minute remaining if (seconds < 59) { seconds.value = secs; } else { minutes.value = getminutes(); seconds.value = getseconds(); } colorchange(minutes, seconds); secs--; if (secs < 0) { secs--; cleartimeout(timeout); return; } countdown(); } } function getminutes() { // minutes seconds divided 60, rounded down mins = math.floor(secs / 60); return ("0" + mins).substr(-2); } function getseconds() { // take mins remaining (as seconds) away total seconds remaining return ("0" + (secs - math.round(mins * 60))).substr(-2); }<div id="timer"> <input id="minutes" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -5%;"> <span style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -30%;">:</span> <input id="seconds" type="text" style="width: 90%; border: none; background-color:none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%;right: -40%;"> </div>alternatively simplify html moving css either head tag or separate file. also, there no need use input here displaying text.
<div id="timer"> <span id="minutes"></span> <span>:</span> <span id="seconds"></span> </div> // set minutes var mins = 2; var down = true; // calculate seconds (don't change this! unless time progresses @ different speed you...) var secs = mins * 60; var timeout; var doispontos = ":"; countdown(); function countdown() { timeout = settimeout('decrement()', 1000); } function colorchange(minutes, seconds) { if (minutes.innertext == "00" && seconds.innertext == "59") { minutes.style.color = "orange"; seconds.style.color = "orange"; doispontos = "orange"; } else if (minutes.innertext == "00" && seconds.innertext == "30") { minutes.style.color = "red"; seconds.style.color = "red"; doispontos = "red"; } } function decrement() { if (document.getelementbyid) { minutes = document.getelementbyid("minutes"); seconds = document.getelementbyid("seconds"); // if less minute remaining if (seconds < 59) { seconds.innertext = secs; } else { minutes.innertext = getminutes(); seconds.innertext = getseconds(); } colorchange(minutes, seconds); secs--; if (secs < 0) { secs--; cleartimeout(timeout); return; } countdown(); } } function getminutes() { // minutes seconds divided 60, rounded down mins = math.floor(secs / 60); return ("0" + mins).substr(-2); } function getseconds() { // take mins remaining (as seconds) away total seconds remaining return ("0" + (secs - math.round(mins * 60))).substr(-2); }#timer { width: 90%; border: none; background-color: none; font-size: 300px; font-weight: bold; position: fixed; bottom: 30%; right: -5%; }<div id="timer"> <span id="minutes"></span> <span>:</span> <span id="seconds"></span> </div>
Comments
Post a Comment