Millä keinoin toteuttaa yksinkertainen countdown timer esim. 15 minuutista alkaen 0:aan? Aika näytetään muotoa 00:00:00.
Googleen Javascript countdown, ja eka hakutulos näyttää lupaavalta.
https://mindgrader.com/tutorials/1-how-to-create-a-simple-javascript-countdown-timer
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Countdown-esimerkki</title>
<script>
function countdown(aika, elementti, funktio) {
var loppu = new Date().getTime() + 1000 * aika;
var paivita = function() {
var jaljella = Math.max(0, loppu - new Date().getTime()) / 1000;
var h = Math.floor(jaljella / 3600);
var m = Math.floor(jaljella / 60) % 60;
var s = Math.floor(jaljella / 1) % 60;
var t = h + ":" + m + ":" + s;
t = t.replace(/(:|^)([0-9])(?=:|$)/g, '$10$2');
elementti.textContent = t;
if (jaljella) {
setTimeout(paivita, (jaljella % 0.25 || 0.25) * 1000);
} else if (funktio) {
funktio();
}
}
paivita();
}
function nappi() {
countdown(15 * 60, document.getElementById("laskuri"), function() { alert("Loppu!"); });
}
</script>
<p><button type="button" onclick="nappi()">Käynnistä</button> <span id="laskuri"></span></p>Moi Thalassa!
a simple example...
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script language="javascript">
var _brwsr;
var _Div1;
var _Div2;
var _Div3;
var _Div4;
var s_time;
var e_time;
var _timer;
$(document).ready(function() {
var browser=navigator.userAgent.toLowerCase();
if(browser.indexOf("msie") > -1)
{
_brwsr = 3;
}
else
{
_brwsr = 4;
}
_Div1 = document.getElementById('time_begins');
_Div2 = document.getElementById('time_ends');
_Div3 = document.getElementById('time_now');
_Div4 = document.getElementById('time_left');
s_time = new Date();
e_time = new Date(s_time);
e_time.setMinutes(s_time.getMinutes() + 15); //an additional 15 more minutes...
_Div1.innerHTML = "Start time: " + s_time.toString().split(" ")[_brwsr];
_Div2.innerHTML = "End time: " + e_time.toString().split(" ")[_brwsr];
e_time.setSeconds(s_time.getSeconds() + 1) //a fine adjustment...
get_current_time();
_timer = setInterval(function(){get_current_time()}, 1000); //(one second in milliseconds)
});
function get_current_time(){
_Div3.innerHTML = "The time: ";
_Div3.innerHTML += new Date().toString().split(" ")[_brwsr];
get_time_left();
}
function get_time_left(){
var d = new Date();
var diff = e_time.getTime() - d.getTime();
var dDiff = Math.floor(diff/1000/60/60/24);
diff -= dDiff*1000*60*60*24
var h = Math.floor(diff/1000/60/60);
if(h<10){h = "0" + h;}
diff -= h*1000*60*60
var m = Math.floor(diff/1000/60);
if(m<10){m = "0" + m;}
diff -= m*1000*60
var s = Math.floor(diff/1000);
if(s<10){s = "0" + s;}
_Div4.innerHTML = "Time left: "
_Div4.innerHTML += h + ":" + m + ":" + s;
if(h + ":" + m + ":" + s == "00:00:00"){
window.clearInterval(_timer);
alert('This Is the End');
}
}
</script>
</head>
<body>
<div id="time_begins"></div></br>
<div id="time_ends"></div></br>
<div id="time_now"></div></br>
<div id="time_left"></div>
</body>
</html>-Nea-
Kahdeksan syvä sisennys? Mitäs muumioita täällä liikuskelee? Javascriptin kanssa de facto -sisennys lienee kaksi välilyöntiä. Jotkut käyttävät neljää. Tabulaattoreistakin on jo aika ajanut ohitse.
Eiköhän sisennyksen oikea leveys ole mielipidekysymys ja joka tapauksessa yksi pienimmistä ongelmista neau33:n koodissa. Kumma juttu, että pitää tuollaista purkkaa vääntää, kun jo kirjoitin lyhyemmän, selvemmän ja mielestäni kaikin puolin helpommin sovellettavan koodin.
The Alchemist kirjoitti:
Tabulaattoreistakin on jo aika ajanut ohitse.
Taas saatiin se Oikea Mielipide...
Tabulaattorit ovat monesti huomattavasti parempi tapa kuin välilyönnit, mm koska silloin jokainen voi päättää itse sisennyksensä suuruuden. Eivät ne ole mitenkään vanhanaikaisia. Välilyönti on välilyönti, tabulaattori on tabulaattori. Jälkimmäinen semanttisestikin huomattavasti parempi sisennykseen.
Tabulaattori nimenomaan estää käyttämästä haluamaansa sisennystä. Jos joku kirjoittelee koodia kahden levyisillä tabeilla ja sitten puskee sen repoon, niin kaikille vieläkin leveämpää tabia käyttäville koodi räjähtää paskaksi. Ihmiset tuntuvat helposti unohtavan, että luultavasti jokaisen kielen ja projektin style guideen (eihän niitä kukaan lue...) kuuluu myös rivien enimmäispituus. Se kai on useimmiten jossain 80 ja 120 merkin välillä. Tabulaattorit tekevät tällaisen säännön noudattamisesta mahdotonta, jos ihmiset arpovat eri tabileveyksien kanssa.
Pitää muutenkin ihmetellä sellaista v-päätä, joka ehdoin tahdoin haluaa kirjoittaa koodia, joka rikkoo tyylittelyn puolesta yleisesti hyväksyttyä standardia.
The Alchemist kirjoitti:
Jos joku kirjoittelee koodia kahden levyisillä tabeilla ja sitten puskee sen repoon, niin kaikille vieläkin leveämpää tabia käyttäville koodi räjähtää paskaksi.
Onpa sinulla sitten muilta osin typerät käytännöt. Omassa käytännössäni ei ole yhtään tilannetta, jossa koodi ”räjähtää paskaksi” vain sisennyksen leveyttä vaihtamalla. Pahin, mitä voi tahahtua, on rivin pituuden muuttuminen, ja jos keikkuu jatkuvasti lähellä rivin maksimipituutta tai käyttää liian monta sisennystasoa, kannattaisi ehkä muuttaa koodia joka tapauksessa.
The Alchemist kirjoitti:
Pitää muutenkin ihmetellä sellaista v-päätä, joka ehdoin tahdoin haluaa kirjoittaa koodia, joka rikkoo tyylittelyn puolesta yleisesti hyväksyttyä standardia.
Mistä h:sta revit näitä ”yleisesti hyväksyttyjä standardeja”? Netistä ei nopealla etsimällä löytynyt ainakaan sisennysohjeillesi kovinkaan kummoista tukea.
Katsos kun itse osallistun open source -projekteihin ja myös seuraan monia sellaisiakin, mihin en kontributoi mitään. Yleensäkin otan selvää best practiseista ennen kuin alan koodata uusilla kielillä tai kirjastoilla.
Php-kielen kanssa PSR-standardin sietäisi olla jo jokaisen php:tä vähänkään vakavammalla naamalla vääntävän tiedossa. Pythonille on itse asiassa väännetty style guide jopa kielen virallisten sivujen dokumentaatioon. Lisäksi Googlella on kattava kasa style guideja eri kielille, joiden pykäliä he noudattavat omien avointen projektiensa kanssa. Linux-ytimen tyylisäännöissä sanotaan, että sisennyksen leveys on kahdeksan merkkiä ja se myös näytti olevan kahdeksan merkkiä, kun Githubissa koodia katselin pistokoeluontoisesti. Tuskinpa sinne kukaan nilkki kehtaisi commitoida koodia, jossa käytetään tabeja tai neljän välilyönnin sisennystä.
En nyt ymmärrä, miksi tuollaisia selität. En ole väittänyt, etteikö sääntöjä pitäisi olla. Sanoin, että väitteellesi JS:n kahden välilyönnin ”standardista” ei ole netissä selvää tukea ja että esittämäsi tabin ”ongelmat” ovat myös koodaustyylistä riippuvaisia ja siksi täysin vältettävissä – tai itse asiassa välttyvät automaattisesti, kun noudatetaan niitä sääntöjä ja pidetään tabin leveys sovittuna. Se, että PHP:lle ja Pythonille on joitain standardeja, ei muuta tätä asiaa. Näköjään selvitystyösi on myös ollut aika puutteellista, kun et edes katsomalla saanut selville, että Linux-ytimen sisennyksenä käytetään nimenomaan kahdeksan merkin levyisiä tabeja eikä suinkaan välilyöntejä. Ehkä kannattaa opetella käyttämään sitä GitHubia.
En nyt ota kantaa siihen, mikä on se ns. oikea tapa, mutta... Itse käytän tabulaattoria sisennykseen, jotten joudu naputtamaan backspacea montaa kertaa yhden sisennyksen poistoon.
Aihe on jo aika vanha, joten et voi enää vastata siihen.