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