"Counter Down"
Bootstrap 3.3.0 Snippet by pixsole

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="my-clock-place1"></div>
<script type="text/javascript">
jQuery(document).ready(function(){
// CLOCK VARIANT 1
jQuery(".my-clock-place1").buildCounter({
now_timestamp : "", /* Current time. Fill if you are using server side unix timestamp like PHP strtotime("now"); */
stardate_timestamp : "", /* Start date. Fill if you are using server side unix timestamp like PHP strtotime("25 May 2013 11:00:00"); */
enddate_timestamp : "", /* End date. Fill if you are using server side unix timestamp like PHP strtotime("25 May 2013 00:00:00"); */
startdate : "1 January 2016 00:00:00 GMT", /* Client-Side time. Start Date. This is overwrited if unix timestamp exists. */
enddate : "31 December 2016 00:00:00 GMT", /* Client-Side time. End Date. This is overwrited if unix timestamp exists. */
color1 : "#4CAF50", /* Days Circle Color */
color2 : "#ff7c00", /* Hours Circle Color */
color3 : "#ffc937", /* Minutes Circle Color */
color4 : "#00A3C7", /* Seconds Circle Color */
backgroundcolor1 : "#e3dfdf", /* Days Circle Background Color */
backgroundcolor2 : "#e3dfdf", /* Hours Circle Background Color */
backgroundcolor3 : "#e3dfdf", /* Minutes Circle Background Color */
backgroundcolor4 : "#e3dfdf", /* Seconds Circle Background Color */
glow1 : "", /* Days Circle Color Glow */
glow2 : "", /* Hours Circle Color Glow */
glow3 : "", /* Minutes Circle Color Glow */
glow4 : "", /* Seconds Circle Color Glow */
glowwidth1 : "0", /* Days Circle Glow Width */
glowwidth2 : "0", /* Hours Circle Glow Width */
glowwidth3 : "0", /* Minutes Circle Glow Width */
glowwidth4 : "0", /* Seconds Circle Glow Width */
backgroundwidth1 : "30", /* Days Circle Background Width */
backgroundwidth2 : "30", /* Hours Circle Background Width */
backgroundwidth3 : "30", /* Minutes Circle Background Width */
backgroundwidth4 : "30", /* Seconds Circle Background Width */
frontwidth1 : "30", /* Days Circle Width */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.countitround * {
padding:0;
margin:0;
}
.countitround .countitround_days,
.countitround .countitround_hours,
.countitround .countitround_minutes,
.countitround .countitround_seconds {
position: relative;
width:188px;
height:188px;
float:left;
margin:5px 40px;
}
.countitround .canvas_days,
.countitround .canvas_hours,
.countitround .canvas_minutes,
.countitround .canvas_seconds {
position: relative;
z-index: 2;
}
.countitround .canvas_background {
position: absolute;
z-index: 1;
}
.countitround .countitround_days_text,
.countitround .countitround_hours_text,
.countitround .countitround_minutes_text,
.countitround .countitround_seconds_text {
width:188px;
height:188px;
position: absolute;
top:0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
jQuery.fn.buildCounter = function(settings) {
var glob = {
element : this,
settings : settings
};
if (typeof glob.settings.unique === "undefined") {
glob.settings.unique = "countdown-instance-id-" + Math.floor((Math.random()*100000)+1);
}
glob.settings.now = typeof glob.settings.now_timestamp !== "undefined" && glob.settings.now_timestamp !== "" ? glob.settings.now_timestamp : Math.floor(new Date()) / 1000;
glob.settings.startdate = typeof glob.settings.stardate_timestamp !== "undefined" && glob.settings.stardate_timestamp !== "" ? glob.settings.stardate_timestamp : Math.floor(new Date(glob.settings.startdate)) / 1000;
glob.settings.enddate = typeof glob.settings.enddate_timestamp !== "undefined" && glob.settings.enddate_timestamp !== "" ? glob.settings.enddate_timestamp : Math.floor(new Date(glob.settings.enddate)) / 1000;
/* Defaults */
typeof glob.settings.color1 !== "undefined" ? null : glob.settings.color1 = "#ff6565"; /* Days Circle Color */
typeof glob.settings.color2 !== "undefined" ? null : glob.settings.color2 = "#378cff"; /* Hours Circle Color */
typeof glob.settings.color3 !== "undefined" ? null : glob.settings.color3 = "#9cdb7d"; /* Minutes Circle Color */
typeof glob.settings.color4 !== "undefined" ? null : glob.settings.color4 = "#ffdc50"; /* Seconds Circle Color */
typeof glob.settings.backgroundcolor1 !== "undefined" ? null : glob.settings.backgroundcolor1 = "#ccc"; /* Days Circle Background Color */
typeof glob.settings.backgroundcolor2 !== "undefined" ? null : glob.settings.backgroundcolor2 = "#ccc"; /* Hours Circle Background Color */
typeof glob.settings.backgroundcolor3 !== "undefined" ? null : glob.settings.backgroundcolor3 = "#ccc"; /* Minutes Circle Background Color */
typeof glob.settings.backgroundcolor4 !== "undefined" ? null : glob.settings.backgroundcolor4 = "#ccc"; /* Seconds Circle Background Color */
typeof glob.settings.glow1 !== "undefined" ? null : glob.settings.glow1 = "#ff6565"; /* Days Circle Color Glow */
typeof glob.settings.glow2 !== "undefined" ? null : glob.settings.glow2 = "#378cff"; /* Hours Circle Color Glow */
typeof glob.settings.glow3 !== "undefined" ? null : glob.settings.glow3 = "#9cdb7d"; /* Minutes Circle Color Glow */
typeof glob.settings.glow4 !== "undefined" ? null : glob.settings.glow4 = "#ffdc50"; /* Seconds Circle Color Glow */
typeof glob.settings.glowwidth1 !== "undefined" ? null : glob.settings.glowwidth1 = "5"; /* Days Circle Glow Width */
typeof glob.settings.glowwidth2 !== "undefined" ? null : glob.settings.glowwidth2 = "5"; /* Hours Circle Glow Width */
typeof glob.settings.glowwidth3 !== "undefined" ? null : glob.settings.glowwidth3 = "5"; /* Minutes Circle Glow Width */
typeof glob.settings.glowwidth4 !== "undefined" ? null : glob.settings.glowwidth4 = "5"; /* Seconds Circle Glow Width */
typeof glob.settings.backgroundwidth1 !== "undefined" ? null : glob.settings.backgroundwidth1 = "25"; /* Days Circle Background Width */
typeof glob.settings.backgroundwidth2 !== "undefined" ? null : glob.settings.backgroundwidth2 = "25"; /* Hours Circle Background Width */
typeof glob.settings.backgroundwidth3 !== "undefined" ? null : glob.settings.backgroundwidth3 = "25"; /* Minutes Circle Background Width */
typeof glob.settings.backgroundwidth4 !== "undefined" ? null : glob.settings.backgroundwidth4 = "25"; /* Seconds Circle Background Width */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Datepicker
Bootstrap 4 counter
plus minus counter input
Message box with counter

Questions / Comments: