Manager

Back Back Up Advanced Editor

<!doctype html>
<html>
<head>
<title>jQuery Classy Countdown Plugin Demos</title>
<link href="css/jquery.classycountdown.css" rel="stylesheet" type="text/css">
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>

<body>
<div id="jquery-script-menu">
  <div class="jquery-script-center">
    <ul>
      <li><a href="http://www.jqueryscript.net/time-clock/Slick-Circular-jQuery-Countdown-Plugin-Classy-Countdown.html">Download This Plugin</a></li>
      <li><a href="http://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>
    </ul>
    <div class="jquery-script-ads"><script type="text/javascript">
</script> 
      <script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
    <div class="jquery-script-clear"></div>
  </div>
</div>
<div class="container" style="margin-top:150px;">
  <h1>jQuery Classy Countdown Plugin Demos</h1>
  <div id="countdown1" style="background-color:#e74c3c"></div>
  <div id="countdown2" class="ClassyCountdownDemo"></div>
  <div id="countdown4" class="ClassyCountdownDemo" style="background-color:#000"></div>
  <div id="countdown3" class="ClassyCountdownDemo" style="background-color:#000"></div>
  <div id="countdown10" class="ClassyCountdownDemo" style="background-color:#000"></div>
  <div id="countdown9" class="ClassyCountdownDemo"></div>
  <div id="countdown15" class="ClassyCountdownDemo"></div>
  <div id="countdown16" class="ClassyCountdownDemo"></div>
  <div id="countdown17" class="ClassyCountdownDemo"></div>
  <div id="countdown18" class="ClassyCountdownDemo"></div>
  <div id="countdown5" class="ClassyCountdownDemo" style="background-color:#000"></div>
  <div id="countdown6" class="ClassyCountdownDemo" style="background-color:#000"></div>
  <div id="countdown7" class="ClassyCountdownDemo" style="background-color:#000"></div>
  <div id="countdown8" class="ClassyCountdownDemo" style="background-color:#000"></div>
  <div id="countdown11" class="ClassyCountdownDemo"></div>
  <div id="countdown12" class="ClassyCountdownDemo"></div>
  <div id="countdown13" class="ClassyCountdownDemo"></div>
  <div id="countdown14" class="ClassyCountdownDemo"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="js/jquery.knob.js"></script> 
<script src="js/jquery.throttle.js"></script> 
<script src="js/jquery.classycountdown.js"></script> 
<script>
	$(document).ready(function() {
			$('#countdown15').ClassyCountdown({
					theme: "flat-colors",
					end: $.now() + 10000
			});
			$('#countdown16').ClassyCountdown({
					theme: "flat-colors-wide",
					end: $.now() + 10000
			});
			$('#countdown17').ClassyCountdown({
					theme: "flat-colors-very-wide",
					end: $.now() + 10000
			});
			$('#countdown18').ClassyCountdown({
					theme: "flat-colors-black",
					end: $.now() + 10000
			});
			$('#countdown1').ClassyCountdown({
					theme: "white",
					end: $.now() + 645600
			});
			$('#countdown5').ClassyCountdown({
					theme: "white",
					end: $.now() + 10000
			});
			$('#countdown6').ClassyCountdown({
					theme: "white-wide",
					end: $.now() + 10000
			});
			$('#countdown7').ClassyCountdown({
					theme: "white-very-wide",
					end: $.now() + 10000
			});
			$('#countdown8').ClassyCountdown({
					theme: "white-black",
					end: $.now() + 10000
			});
			$('#countdown11').ClassyCountdown({
					theme: "black",
					style: {
							secondsElement: {
									gauge: {
											fgColor: "#F00"
									}
							}
					},
					end: $.now() + 10000
			});
			$('#countdown12').ClassyCountdown({
					theme: "black-wide",
					labels: false,
					end: $.now() + 10000
			});
			$('#countdown13').ClassyCountdown({
					theme: "black-very-wide",
					labelsOptions: {
							lang: {
									days: 'D',
									hours: 'H',
									minutes: 'M',
									seconds: 'S'
							},
							style: 'font-size:0.5em; text-transform:uppercase;'
					},
					end: $.now() + 10000
			});
			$('#countdown14').ClassyCountdown({
					theme: "black-black",
					labelsOptions: {
							style: 'font-size:0.5em; text-transform:uppercase;'
					},
					end: $.now() + 10000
			});
			$('#countdown4').ClassyCountdown({
					end: $.now() + 10000,
					labels: true,
					style: {
							element: "",
							textResponsive: .5,
							days: {
									gauge: {
											thickness: .03,
											bgColor: "rgba(255,255,255,0.05)",
											fgColor: "#1abc9c"
									},
									textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#fff;'
							},
							hours: {
									gauge: {
											thickness: .03,
											bgColor: "rgba(255,255,255,0.05)",
											fgColor: "#2980b9"
									},
									textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#fff;'
							},
							minutes: {
									gauge: {
											thickness: .03,
											bgColor: "rgba(255,255,255,0.05)",
											fgColor: "#8e44ad"
									},
									textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#fff;'
							},
							seconds: {
									gauge: {
											thickness: .03,
											bgColor: "rgba(255,255,255,0.05)",
											fgColor: "#f39c12"
									},
									textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#fff;'
							}

},
					onEndCallback: function() {
							console.log("Time out!");
					}
			});
			$('#countdown2').ClassyCountdown({
					end: '1388468325',
					now: '1378441323',
					labels: true,
					style: {
							element: "",
							textResponsive: .5,
							days: {
									gauge: {
											thickness: .01,
											bgColor: "rgba(0,0,0,0.05)",
											fgColor: "#1abc9c"
									},
									textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'
							},
							hours: {
									gauge: {
											thickness: .01,
											bgColor: "rgba(0,0,0,0.05)",
											fgColor: "#2980b9"
									},
									textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'
							},
							minutes: {
									gauge: {
											thickness: .01,
											bgColor: "rgba(0,0,0,0.05)",
											fgColor: "#8e44ad"
									},
									textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'
							},
							seconds: {
									gauge: {
											thickness: .01,
											bgColor: "rgba(0,0,0,0.05)",
											fgColor: "#f39c12"
									},
									textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'
							}

},
					onEndCallback: function() {
							console.log("Time out!");
					}
			});
			$('#countdown9').ClassyCountdown({
					end: '1388468325',
					now: '1380501323',
					labels: true,
					style: {
							element: "",
							textResponsive: .5,
							days: {
									gauge: {
											thickness: .05,
											bgColor: "rgba(0,0,0,0)",
											fgColor: "#1abc9c",
											lineCap: 'round'
									},
									textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'
							},
							hours: {
									gauge: {
											thickness: .05,
											bgColor: "rgba(0,0,0,0)",
											fgColor: "#2980b9",
											lineCap: 'round'
									},
									textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'
							},
							minutes: {
									gauge: {
											thickness: .05,
											bgColor: "rgba(0,0,0,0)",
											fgColor: "#8e44ad",
											lineCap: 'round'
									},
									textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'
							},
							seconds: {
									gauge: {
											thickness: .05,
											bgColor: "rgba(0,0,0,0)",
											fgColor: "#f39c12",
											lineCap: 'round'
									},
									textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'
							}

},
					onEndCallback: function() {
							console.log("Time out!");
					}
			});
			$('#countdown10').ClassyCountdown({
					end: '1397468325',
					now: '1388471324',
					labels: true,
					labelsOptions: {
							lang: {
									days: 'D',
									hours: 'H',
									minutes: 'M',
									seconds: 'S'
							},
							style: 'font-size:0.5em; text-transform:uppercase;'
					},
					style: {
							element: "",
							textResponsive: .5,
							days: {
									gauge: {
											thickness: .02,
											bgColor: "rgba(255,255,255,0.1)",
											fgColor: "rgba(255,255,255,1)",
											lineCap: 'round'
									},
									textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'
							},
							hours: {
									gauge: {
											thickness: .02,
											bgColor: "rgba(255,255,255,0.1)",
											fgColor: "rgba(255,255,255,1)",
											lineCap: 'round'
									},
									textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'
							},
							minutes: {
									gauge: {
											thickness: .02,
											bgColor: "rgba(255,255,255,0.1)",
											fgColor: "rgba(255,255,255,1)",
											lineCap: 'round'
									},
									textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'
							},
							seconds: {
									gauge: {
											thickness: .02,
											bgColor: "rgba(255,255,255,0.1)",
											fgColor: "rgba(255,255,255,1)",
											lineCap: 'round'
									},
									textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'
							},
					},
					onEndCallback: function() {
							console.log("Time out!");
					}
			});
			$('#countdown3').ClassyCountdown({
					end: '1390868325',
					now: '1388461323',
					labels: true,
					labelsOptions: {
							lang: {
									days: 'Zile',
									hours: 'Ore',
									minutes: 'Minute',
									seconds: 'Secunde'
							},
							style: 'font-size:0.5em; text-transform:uppercase;'
					},
					style: {
							element: "",
							textResponsive: .5,
							days: {
									gauge: {
											thickness: .2,
											bgColor: "rgba(255,255,255,0.2)",
											fgColor: "rgb(241, 196, 15)"
									},
									textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'
							},
							hours: {
									gauge: {
											thickness: .2,
											bgColor: "rgba(255,255,255,0.2)",
											fgColor: "rgb(241, 196, 15)"
									},
									textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'
							},
							minutes: {
									gauge: {
											thickness: .2,
											bgColor: "rgba(255,255,255,0.2)",
											fgColor: "rgb(241, 196, 15)"
									},
									textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'
							},
							seconds: {
									gauge: {
											thickness: .2,
											bgColor: "rgba(255,255,255,0.2)",
											fgColor: "rgb(241, 196, 15)"
									},
									textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'
							}

},
					onEndCallback: function() {
							console.log("Time out!");
					}
			});
	});
</script>

var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>
</html>