<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>jquery countDownTimer Demo reverse countdown clock</title>
<meta name="description" content="reverse clock plugin for jQuery.">
<meta name="keywords" content="jQuery, plugin, count down">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script type="text/javascript" src="http://harshen.github.io/jquery-countdownTimer/LIB/jquery-2.0.3.js"></script>
<script type="text/javascript" src="http://harshen.github.io/jquery-countdownTimer/jquery.countdownTimer.js"></script>
<link rel="stylesheet" type="text/css" href="http://harshen.github.io/jquery-countdownTimer/CSS/jquery.countdownTimer.css" />
</head>
<body>
<div id="main">
<header>
<h1><a href="http://plugins.jquery.com/countdownTimer/" target="_blank" title="jquery countdownTimer Plugin">jquery countdownTimer Plugin</a> Demo</h1>
<p><a href="http://github.com/harshen/jquery-countdownTimer/zipball/1.0.6" title="Download">Download</a></p>
<p>Reverse count down jquery plugin as per your need.</p>
</header>
<h2 style="color :#0625BC; font-weight: bold;">Initial Setup</h2>
<p>Add this in html page</p><pre style="width:590px;">
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript" src="jquery.countdownTimer.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.countdownTimer.css" /></pre>
<p>add div and span element</p>
<pre style="width:535px;"><div id="countdowntimer"><span id="future_date"><span></div></pre>
<h3><u>Reverse countdown till a specific future date from today.</u><br/>(for eg:- 2018/01/01 00:00:00)</h3>
<table style="border:0px;">
<tr>
<td colspan="8"><span id="future_date"></span></td>
</tr>
</table>
<script>
$(function(){
$('#future_date').countdowntimer({
dateAndTime : "2018/01/01 00:00:00",
size : "lg",
regexpMatchFormat: "([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2})",
regexpReplaceWith: "$1<sup class='displayformat'>days</sup> / $2<sup class='displayformat'>hours</sup> / $3<sup class='displayformat'>minutes</sup> / $4<sup class='displayformat'>seconds</sup>"
});
});
</script>
<style type="text/css">
.displayformat {
font-size:18px;
font-style: italic;
}
</style>
<h4>Settings:-</h4>
<pre >$(function(){
$("#future_date").countdowntimer({
dateAndTime : "2018/01/01 00:00:00"‚
size : "lg"‚
regexpMatchFormat: "([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2})"‚
regexpReplaceWith: "$1<sup>days</sup> / $2<sup>hours</sup> / $3<sup>minutes</sup> / $4<sup>seconds</sup>"
});
});</pre>
<p>dateAndTime takes value in format "YYYY/MM/DD HH:MM:SS" where HH is a 24 - hours format.</p>
<p>You may be wondering how to set the "size" option. Well, It's discussed at the end in <a href="#display" title="Display Settings">Display Settings</a>.</p>
<h3><u>Reverse countdown between a given start date (which can be server date and time or any given date) and end date.</u></h3>
<table style="border:0px;">
<tr>
<td style="width:60px;text-align:center;">Days</td>
<td style="width:70px;text-align:center;">Hours</td>
<td style="width:60px;text-align:center;">Minutes</td>
<td style="width:70px;text-align:center;">Seconds</td>
</tr>
<tr>
<td colspan="4"><span id="given_date"></span></td>
</tr>
</table>
<script>
$(function(){
$('#given_date').countdowntimer({
startDate : "2014/10/01 00:00:00",
dateAndTime : "2018/01/01 00:00:00",
size : "lg"
});
});
</script>
<h4>Settings:-</h4>
<pre >$(function(){
$("#given_date").countdowntimer({
startDate : "2014/10/01 00:00:00"‚ //set server date and time as "<?php echo date('Y/m/d H:i:s'); ?>".
dateAndTime : "2018/01/01 00:00:00"‚ //end date
size : "lg"
});
});</pre>
<p>dateAndTime and startDate takes value in format "YYYY/MM/DD HH:MM:SS" where HH is a 24 - hours format.</p><p> Set server date and time as "<?php echo date('Y/m/d H:i:s'); ?>". Please note the format of date ("Y/m/d H:i:s").</p>
<h3><u>Reverse countdown to zero from time set to hours, minutes & seconds.</u></h3>
<table style="border:0px;">
<tr>
<td style="width:70px;text-align:center;">Hours</td>
<td style="width:60px;text-align:center;">Minutes</td>
<td style="width:70px;text-align:center;">Seconds</td>
</tr>
<tr>
<td colspan="4"><span id="hms_timer"></span></td>
</tr>
</table>
<script>
$(function(){
$('#hms_timer').countdowntimer({
hours : 3,
minutes :10,
seconds : 10,
size : "lg"
});
});
</script>
<h4>Settings:-</h4>
<pre >$(function(){
$("#hms_timer").countdowntimer({
hours : 3‚
minutes : 10‚
seconds : 10‚
size : "lg"
});
});</pre>
<p>Hours can take positive values starting from 0. Minutes, Seconds takes values from 0 to 59. </p>
<h3><u>Reverse countdown to zero from time set to hours and minutes.</u></h3>
<table style="border:0px;">
<tr>
<td style="width:70px;text-align:center;">Hours</td>
<td style="width:60px;text-align:center;">Minutes</td>
<td style="width:70px;text-align:center;">Seconds</td>
</tr>
<tr>
<td colspan="4"><span id="hm_timer"></span></td>
</tr>
</table>
<script>
$(function(){
$('#hm_timer').countdowntimer({
hours : 3,
minutes :10,
size : "lg"
});
});
</script>
<h4>Settings:-</h4>
<pre >$(function(){
$("#hm_timer").countdowntimer({
hours : 3‚
minutes : 10‚
size : "lg"
});
});</pre>
<p>Hours can take positive values starting from 0. Minutes takes values from 0 to 59. </p>
<h3><u>Reverse countdown to zero from time set to minutes and seconds.</u></h3>
<table style="border:0px;">
<tr>
<td style="width:60px;text-align:center;">Minutes</td>
<td style="width:70px;text-align:center;">Seconds</td>
</tr>
<tr>
<td colspan="4"><span id="ms_timer"></span></td>
</tr>
</table>
<script>
$(function(){
$('#ms_timer').countdowntimer({
minutes :20,
seconds : 10,
size : "lg"
});
});
</script>
<h4>Settings:-</h4>
<pre >$(function(){
$("#ms_timer").countdowntimer({
minutes : 20‚
seconds : 10‚
size : "lg"
});
});</pre>
<p>Minutes takes positive values starting from 0. Seconds takes values from 0 to 59. </p>
<h3><u>Reverse countdown to zero from time set to hours and seconds.</u></h3>
<table style="border:0px;">
<tr>
<td style="width:70px;text-align:center;">Hours</td>
<td style="width:60px;text-align:center;">Minutes</td>
<td style="width:70px;text-align:center;">Seconds</td>
</tr>
<tr>
<td colspan="4"><span id="hs_timer"></span></td>
</tr>
</table>
<script>
$(function(){
$('#hs_timer').countdowntimer({
hours :2,
seconds : 10,
size : "lg"
});
});
</script>
<h4>Settings:-</h4>
<pre >$(function(){
$("#hs_timer").countdowntimer({
hours : 2‚
seconds : 10‚
size : "lg"
});
});</pre>
<p>Hours takes positive values starting from 0. Seconds takes values from 0 to 59. </p>
<h3><u>Reverse countdown to zero from time set to only hours.</u></h3>
<table style="border:0px;">
<tr>
<td style="width:70px;text-align:center;">Hours</td>
<td style="width:60px;text-align:center;">Minutes</td>
<td style="width:70px;text-align:center;">Seconds</td>
</tr>
<tr>
<td colspan="4"><span id="h_timer"></span></td>
</tr>
</table>
<script>
$(function(){
$('#h_timer').countdowntimer({
hours :2,
size : "lg"
});
});
</script>
<h4>Settings:-</h4>
<pre >$(function(){
$("#h_timer").countdowntimer({
hours : 2‚
size : "lg"
});
});</pre>
<p>Hours takes positive values starting from 0. </p>
<h3><u>Reverse countdown to zero from time set to only minutes.</u></h3>
<table style="border:0px;">
<tr>
<td style="width:60px;text-align:center;">Minutes</td>
<td style="width:70px;text-align:center;">Seconds</td>
</tr>
<tr>
<td colspan="4"><span id="m_timer"></span></td>
</tr>
</table>
<script>
$(function(){
$('#m_timer').countdowntimer({
minutes :2,
size : "lg"
});
});
</script>
<h4>Settings:-</h4>
<pre >$(function(){
$("#m_timer").countdowntimer({
minutes : 2‚
size : "lg"
});
});</pre>
<p>Minutes takes positive values starting from 0. </p>
<h3><u>Reverse countdown to zero from time set to only seconds.</u></h3>
<span id="s_timer"></span><br/>
<script>
$(function(){
$('#s_timer').countdowntimer({
seconds :25,
size : "lg"
});
});
</script>
<h4>Settings:-</h4>
<pre >$(function(){
$("#s_timer").countdowntimer({
seconds : 25‚
size : "lg"
});
});</pre>
<p>Seconds takes positive values starting from 0. </p>
<h3><u>Display current time.</u></h3>
<table style="border:0px;">
<tr>
<td style="width:70px;text-align:center;">Hours</td>
<td style="width:60px;text-align:center;">Minutes</td>
<td style="width:70px;text-align:center;">Seconds</td>
</tr>
<tr>
<td colspan="4"><span id="current_timer"></span></td>
</tr>
</table>
<script>
$(function(){
$('#current_timer').countdowntimer({
currentTime : true,
size : "lg"
});
});
</script>
<h4>Settings:-</h4>
<pre>$(function(){
$("#current_timer").countdowntimer({
currentTime : true‚
size : "lg"
});
});</pre>
<p>currentTime takes either true or false. </p>
<h3><u>If no options provided.</u></h3>
<p>If no options are provided, by default timer of 60 seconds is displayed in small size.</p>
<span id="seconds_timer"></span>
<script>
$(function(){
$('#seconds_timer').countdowntimer({
});
});
</script>
<h4>Settings:-</h4>
<pre>$(function(){
$("#seconds_timer").countdowntimer({
});
});</pre>
<h2 style="color :#0625BC; font-weight: bold;">More Settings</h2>
<h3>timeSeparator</h3>
<p>The separator between the various parts of the countdown timer. By default it is ":".</p>
<h3>tickInterval</h3>
<p>The time interval in which you want countdown to tick. Set the interval in seconds. Note that you should only use intervals that are multiples of a minute (60) and for only seconds timer, in the multiples of the seconds set for timer. By default it is 1.</p>
<h3>timeUp</h3>
<p>The name of the callback function that is invoked when the countdown reaches zero. Within the function this refers to the division that holds the widget. No parameters are passed in. Provide the name to this option without quotes.</p>
<h3>expiryUrl</h3>
<p>The Url to load after countdown reaches zero. Provide Url in quotes.</p>
<h3>regexpMatchFormat</h3>
<p>The Regular expression format to be matched and replaced for advanced formatting of timer display.</p>
<h3>regexpReplaceWith</h3>
<p>The replacement text to replace the regular expression.</p>
<pre>$(function(){
$("#more_options").countdowntimer({
minutes : 20‚
size : "lg"‚
tickInterval : 5‚
timeSeparator : "-"‚
timeUp : timeisUp
});
function timeisUp() {
//Code to be executed when timer expires.
}
});</pre>
<table style="border:0px;">
<tr>
<td style="width:60px;text-align:center;">Minutes</td>
<td style="width:70px;text-align:center;">Seconds</td>
</tr>
<tr>
<td colspan="4"><span id="more_options"></span></td>
</tr>
</table>
<script>
$(function(){
$('#more_options').countdowntimer({
minutes : 20,
size : "lg",
tickInterval : 5,
timeSeparator : "-"
});
});
</script>
<h2 style="color :#0625BC; font-weight: bold;"><a id="display">Display Settings</a></h2>
<h3><u>Sizes (use bootstrap sizes notation).</u></h3>
<pre>$(function(){
$("#xlarge").countdowntimer({
dateAndTime : "2018/01/01 00:00:00"‚
size : "lg"
});
});</pre>
<div id="sizes_demo">
<div><strong>xl</strong>-Extra large</div><br/>
<span id="xlarge"></span><br/><br/>
<div><strong>lg</strong>-Large</div><br/>
<span id="large"></span><br/><br/>
<div><strong>md</strong>-Medium</div><br/>
<span id="medium"></span><br/><br/>
<div><strong>sm</strong>-Small</div><br/>
<span id="small"></span><br/><br/>
<div><strong>xs</strong>-Extra small</div><br/>
<span id="xsmall"></span><br/><br/>
</div>
<script>
$(function(){
$('#xlarge').countdowntimer({
dateAndTime : "2018/01/01 00:00:00",
size : "xl"
});
$('#large').countdowntimer({
dateAndTime : "2018/01/01 00:00:00",
size : "lg"
});
$('#medium').countdowntimer({
dateAndTime : "2018/01/01 00:00:00",
size : "md"
});
$('#small').countdowntimer({
dateAndTime : "2018/01/01 00:00:00",
size : "sm"
});
$('#xsmall').countdowntimer({
dateAndTime : "2018/01/01 00:00:00",
size : "xs"
});
});
</script>
<p>What else, you can also set the border color, background and font color. See below.</p>
<h3><u>Setting border color, background and font color.</u></h3>
<table style="border:0px;">
<tr>
<td style="width:70px;text-align:center;">Hours</td>
<td style="width:60px;text-align:center;">Minutes</td>
<td style="width:70px;text-align:center;">Seconds</td>
</tr>
<tr>
<td colspan="4"><span id="color_timer"></span></td>
</tr>
</table>
<script>
$(function(){
$('#color_timer').countdowntimer({
currentTime : true,
size : "lg",
borderColor : "#5D09FA",
backgroundColor : "#FAF209",
fontColor : "#FA0909"
});
});
</script>
<h4>Settings:-</h4>
<pre>$(function(){
$("#current_timer").countdowntimer({
currentTime : true‚
size : "lg"‚
borderColor : "#5D09FA"‚
backgroundColor : "#FAF209"‚
fontColor : "#FA0909"
});
});</pre>
<p>By default borderColor is "#F0068E", fontColor is "#FFFFFF", backgroundColor is "#000000".</p>
<br/><br/>
<h3><u>Note:-</u></h3>
<p>Please take care not to use timer options(<b>hours, minutes, seconds</b>), <b>dateAndTime</b> and <b>currentTime</b> simultaneously as all these options display different time.<br/>
<b>regexpMatchFormat</b> and <b>regexpReplaceWith</b> will not work if used simultaneously with <b>timeSeparator</b> option as they have same purpose, i.e. formatting. For basic usage go for <b>timeSeparator</b>.</p>
<br/><br/>
<footer>
<p>Licensed under the <a href="http://opensource.org/licenses/MIT" target="_blank" title="MIT">MIT</a> and <a href="http://www.gnu.org/licenses/gpl.html" target="_blank" title="GPL v3">GPL v3</a> Project page <a href="https://github.com/harshen/jquery-countdownTimer" target="_blank" title="Link">Link</a>
Author: <a href="http://harshen.github.io/" target="_blank" title="Harshen Pandey">Harshen Pandey</a> (harshenpandey@gmail.com)</p>
</footer>
<style>
body{margin:0px; padding:0px;}
#main{margin:0px auto; padding:0px; width:900px;position:relative;}
pre{
background:#F8F8D2;padding:10px;
border: 2px solid #673E3E;
border-radius: 3px;
color: #222222;
}
</style>
</div>
</body>
</html>
356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
