Phiên bản đầy đủ: jsB@nk » Thời gian » Bộ đếm » Giải pháp OOP tạo bộ đếm ngược thời gian
URL: https://www.javascriptbank.com/javascript-countdown-timer-solution-in-oop.html
Đây là một giải pháp khá mới lạ và độc đáo để tạo bộ đếm ngược thời gian trên web; những đặc điểm nổi bật của bộ đếm này được thể hiện cả phía người lập trình và phía người sử dụng. Đoạn mã này khá dễ để sử dụng và tùy chỉnh theo nhu cầu, kể cả khi bạn là người không biết gì về lập trình.
Phiên bản đầy đủ: jsB@nk » Thời gian » Bộ đếm » Giải pháp OOP tạo bộ đếm ngược thời gian
URL: https://www.javascriptbank.com/javascript-countdown-timer-solution-in-oop.html
<style type="text/css"> body{ font-family:arial,sans-serif; color:#000; background:#fff; text-align:center; } input{ font-size:20px; padding:5px; border:none; background:#69c; margin:0 10px; } input#c[disabled]{ background:#eee; } #display{ font-weight:bold; margin:20px auto; width:720px; font-size:350px; } .final{ color:#c00; } .over{ color:#c00; text-decoration:blink; } #preferences{ margin-top:.5em; background:#ccc; border-top:1px solid #999; padding:2em; font-size:1em; text-align:left; } #preferences p { width:49%; float:left; padding:5px 0; margin:0; position: absolute; top: 0px; } #preferences input{ font-size:20px; padding:5px; border:1px solid #999; background:#fff; margin:0 2px; } #preferences label{ padding-top:10px; width:30%; float:left; display:block; padding-right:1em; } #preferences input#set{ font-size:20px; padding:5px; width:600px; margin:0 auto; border:none; background:#69c; clear:both; display:block; } #preferences input#set:hover{ background:#ffc; } </style><script> countdown = function(){ /* configuration of script, properties with values and labels will become form elements! */ var cfg = { displayID:'display', preferencesID:'preferences', finalClass:'final', overClass:'over', initialText:{ value:'2:00', label:'Initial Text' }, seconds:{ value:2*60, label:'Time in Seconds' }, finalCountdown:{ value:30, label:'Warning start' }, pauseLabel:{ value:'pause', label:'Pause Text' }, resumeLabel:{ value:'resume', label:'Resume Text' }, resetLabel:{ value:'reset', label:'Reset Text' }, startLabel:{ value:'start', label:'Start Text' } }; /* presets */ var seconds = cfg.seconds.value; var interval = null; var secs = null; var startTime = null; var realsecs = null; /* create display */ var display = document.createElement('div'); display.id = cfg.displayID; document.body.appendChild(display); display.innerHTML = cfg.initialText.value; /* create form with buttons */ var form = document.createElement('form'); document.body.appendChild(form); var startButton = createInput('button','startButton',cfg.startLabel.value); startButton.onclick = startCountDown; form.appendChild(startButton); var pauseButton = createInput('button','pauseButton',cfg.pauseLabel.value); pauseButton.onclick = pauseCountDown; pauseButton.disabled = true; form.appendChild(pauseButton); var resetButton = createInput('button','resetButton',cfg.resetLabel.value); resetButton.onclick = resetCountDown; form.appendChild(resetButton); /* create preferences panel */ var preferencesPanel = document.createElement('div'); preferencesPanel.id = cfg.preferencesID; preferencesPanel.style.display = 'none'; var firstForm = document.getElementsByTagName('form')[0]; firstForm.appendChild(preferencesPanel); var button = createInput('button',null,'preferences'); button.onclick = togglePreferences; preferencesPanel.parentNode.insertBefore(button,preferencesPanel); /* create preferences form */ var prefs = []; for (var i in cfg){ if(cfg[i].value){ prefs.push(i); var p = document.createElement('p'); p.appendChild(createLabel(cfg[i].label,i)); p.appendChild(createInput('text',i,cfg[i].value)); preferencesPanel.appendChild(p); } } var setPreferencesButton = createInput('button','set','set'); preferencesPanel.appendChild(setPreferencesButton); setPreferencesButton.onclick = setPreferences; function setPreferences(){ for(var i=0,j=prefs.length;i<j;i++){ cfg[prefs[i]].value = document.getElementById(prefs[i]).value; } resetCountDown(); preferencesPanel.style.display = 'none'; } function togglePreferences(){ preferencesPanel.style.display = preferencesPanel.style.display === 'none' ? 'block' : 'none'; } function startCountDown(){ pauseButton.disabled = false; startButton.disabled = true; startTime = new Date(); interval = setInterval(countdown.doCountDown, 100); } function doCountDown(){ realsecs = Math.ceil(seconds - (new Date() - startTime) / 1000); var mins = parseInt(realsecs / 60); var secs = realsecs % 60; display.innerHTML = parseInt(mins) + ':'+ (secs < 10 ? '0' : '') +(secs % 60); display.className = (realsecs > cfg.finalCountdown.value) ? '' : cfg.finalClass; if(realsecs===0){ display.className = cfg.overClass; window.clearTimeout(interval); } } function resetCountDown(){ window.clearTimeout(interval); startButton.disabled = false; pauseButton.disabled = true; display.innerHTML = cfg.initialText.value; interval = null; seconds = cfg.seconds.value; pauseButton.value = cfg.pauseLabel.value; resetButton.value = cfg.resetLabel.value; startButton.value = cfg.startLabel.value; display.className = ''; } function pauseCountDown(){ if(pauseButton.value === cfg.pauseLabel.value){ seconds = realsecs; window.clearTimeout(interval); pauseButton.value = cfg.resumeLabel.value; } else { startCountDown(); pauseButton.value = cfg.pauseLabel.value; } } function createInput(type,id,value){ var input = document.createElement('input'); input.value = value; input.type = type; if(id){ input.id = id; } return input; } function createLabel(text,id){ var label = document.createElement('label'); label.appendChild(document.createTextNode(cfg[id].label)); label.htmlFor = id; return label; } return {doCountDown:doCountDown}; }(); </script>