Full version: jsB@nk » Time » Counter » JavaScript Countdown Timer solution in OOP
URL: https://www.javascriptbank.com/javascript-countdown-timer-solution-in-oop.html
This JavaScript code is the new & unique solution to create a countdown timer on your web pages; it's really new in the look of web developers and users. This JavaScript countdown timer is very easy to use & customize, even if you're not a JavaScript coder.
Full version: jsB@nk » Time » Counter » JavaScript Countdown Timer solution in OOP
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>