JavaScript Countdown Timer solution in OOP

JavaScriptBank

Bannato
26 Nov 2009
86
0
0
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 ea... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: CSS below for styling thescript, place it into HEAD section
CSS
Codice:
<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>

Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Codice:
<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>






 
Discussioni simili
Autore Titolo Forum Risposte Data
F Countdown / timer javascript Javascript 19
J Make a JavaScript Countdown Timer in OOP Javascript 0
L countdown multiplo javascript Javascript 1
C Countdown bloccato? Javascript? Javascript 0
D [Javascript] [HTML] Countdown su Mobirise di 24 ore relative per ogni utente. Javascript 4
T Javascript e countdown multipli Javascript 1
S Stampare un messaggio alla fine del countdown in Javascript Javascript 0
maxnegri Stampare un messaggio alla fine di un countdown in javascript Javascript 0
D aiuto funzioni javascript Javascript 1
M Upload immagine con javascript problemi con FormData() Javascript 1
S Problemi Javascript + Aruba Javascript 2
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 1
F Creare elementi html con javascript Javascript 4
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
L [Javascript] Problema salvataggio dati in db Javascript 1
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
G Quiz Javascript Javascript 4
A [Javascript] Scrittura su più campi contemporaneamente Javascript 19
F classic asp popolare combo box javascript Presentati al Forum 1
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
F [Javascript] comando innerHTML non funziona Javascript 5
alexice51 proggrammi per scrivere in javascript? Javascript 3
max1974 [Javascript] Accordion aria-exspanded Javascript 0
D [Javascript] salvare immagine canvas - paypal Javascript 0
O [Javascript] Conflitto Jquery: forse... Javascript 0
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6

Discussioni simili