This is one of the simple way to create the digital countdown using jquery and javascript. This is very useful when you set the countdown for page redirect or to set time to launch some product in your website. In this example have the simple digital countdown and after coundown completed it will redirect to the particular url. Below is the demo and full code you can use it. I hope this will useful.
Simple Digital count down using Javascript
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Digital count down set redirect url after countdown using javascript </title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body { font-family:'Roboto'; background-color:#f7f7f7;}
.container { margin:150px auto; max-width:70%;}
.simple-timer {
height: 20px;
line-height: 20px;
/*box-sizing: border-box;*/
padding: 20px;
display: block;
background-color: #000000;
color: #FFD400;
border-radius:3px;
margin:0 auto;
width: 122px;
}
#pause_btn {
background-color:#ED5565;
border:0;
border-bottom:3px solid #DA4453;
color:#fff;
border-radius:5px;
padding:10px 20px;
}
h1 { margin-bottom:30px;}
</style>
</head>
<body>
<div class="container">
<h1 style="text-align:center;">How to Create Simple Digital count down set redirect url after countdown using Javascript</h1>
<div class="simple-timer"> <span class="timer-day">00</span>
<label class="separator">:</label>
<span class="timer-hour">00</span>
<label class="separator">:</label>
<span class="timer-minute">00</span>
<label class="separator">:</label>
<span class="timer-second">00</span> <span class="timer-millisecond">0</span> </div><br>
<br>
</div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="simpletimer.js"></script>
<script type="text/javascript">
$(function () {
$('.simple-timer').simpletimer({
day: 0,
dayDom: '.timer-day',
hour: 0,
hourDom: '.timer-hour',
minute: 1,
minuteDom: '.timer-minute',
second: 5,
secondDom: '.timer-second',
millisecond: 0,
millisecondDom: '.timer-millisecond',
blank: 100,
endFun: function () {
location.href="http://demos.sanwebcorner.com";
}
});
});
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Digital count down set redirect url after countdown using javascript </title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body { font-family:'Roboto'; background-color:#f7f7f7;}
.container { margin:150px auto; max-width:70%;}
.simple-timer {
height: 20px;
line-height: 20px;
/*box-sizing: border-box;*/
padding: 20px;
display: block;
background-color: #000000;
color: #FFD400;
border-radius:3px;
margin:0 auto;
width: 122px;
}
#pause_btn {
background-color:#ED5565;
border:0;
border-bottom:3px solid #DA4453;
color:#fff;
border-radius:5px;
padding:10px 20px;
}
h1 { margin-bottom:30px;}
</style>
</head>
<body>
<div class="container">
<h1 style="text-align:center;">How to Create Simple Digital count down set redirect url after countdown using Javascript</h1>
<div class="simple-timer"> <span class="timer-day">00</span>
<label class="separator">:</label>
<span class="timer-hour">00</span>
<label class="separator">:</label>
<span class="timer-minute">00</span>
<label class="separator">:</label>
<span class="timer-second">00</span> <span class="timer-millisecond">0</span> </div><br>
<br>
</div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="simpletimer.js"></script>
<script type="text/javascript">
$(function () {
$('.simple-timer').simpletimer({
day: 0,
dayDom: '.timer-day',
hour: 0,
hourDom: '.timer-hour',
minute: 1,
minuteDom: '.timer-minute',
second: 5,
secondDom: '.timer-second',
millisecond: 0,
millisecondDom: '.timer-millisecond',
blank: 100,
endFun: function () {
location.href="http://demos.sanwebcorner.com";
}
});
});
</script>
</body>
</html>
0 Comments