<!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>
相关推荐
**jQuery倒计时插件详解** 在Web开发中，倒计时功能经常被用于各种应用场景，比如活动开始前的预告、考试倒计时、产品上市时间提示等。jQuery作为一个广泛使用的JavaScript库，提供了丰富的插件来帮助开发者实现...
JQuery倒计时插件是Web开发中常用的一种工具，它可以帮助开发者在网页上实现动态的时间显示，例如倒计时至某个特定日期或时间。这种插件通常基于JavaScript库JQuery构建，因为JQuery简化了DOM操作和事件处理，使得...
《三种颜色的jQuery倒计时插件解析与应用》 在网页开发中，倒计时功能经常被用于预告活动、展示剩余时间等场景，而jQuery作为一款强大的JavaScript库，为开发者提供了丰富的工具和方法来实现这些功能。本篇文章将...
对于开发者来说，jQuery倒计时插件是构建网页动态效果和实现定时任务的利器。本文将深入探讨“jquery倒计时插件”，特别是那些可以独立设置时针、分针和秒针的特性。 首先，我们要理解什么是倒计时插件。倒计时插件...
**jQuery倒计时插件详解** 在Web开发中，倒计时功能经常被用于各种应用场景，如活动开始时间提醒、考试倒计时等。jQuery，作为一款轻量级的JavaScript库，提供了丰富的API来简化DOM操作，使得创建倒计时插件变得...
本资源“简单的jquery倒计时插件.rar”提供了一个基于jQuery的倒计时功能，这在许多应用场景中非常实用，比如考试倒计时、活动开始倒计时等。接下来，我们将详细探讨jQuery、倒计时插件的工作原理以及如何使用此类...
【jQuery倒计时插件详解】 在Web开发中，倒计时功能经常被用于各种应用场景，如活动预告、考试倒计时或者定时发布等。jQuery作为一款轻量级的JavaScript库，提供了丰富的插件来扩展其功能，其中就包括倒计时插件。...
《jQuery倒计时插件深度解析》 在Web开发中，倒计时功能常常用于活动预告、考试倒计时、限时优惠等场景，为用户提供直观的时间感知。jQuery作为一款广泛使用的JavaScript库，提供了丰富的插件来实现这些功能，其中...
本篇文章将详细讲解基于jQuery实现的简单倒计时插件，以及如何通过这个插件来创建一个从10到0的倒计时效果。 首先，让我们了解jQuery倒计时插件的基本原理。倒计时功能通常涉及到JavaScript的定时器（setTimeout或...
本文将详细讲解如何使用jQuery实现多个倒计时插件同时计时的功能，这对于创建如考试倒计时、活动倒计时等多种场景都非常有用。 首先，我们需要一个基础的jQuery倒计时插件。这个插件通常包含以下核心功能： 1. **...
jQuery倒计时插件是网页开发中常用的一种工具，它能帮助开发者在页面上实现动态的时间显示，例如倒计时到某个特定日期或时间。在本案例中，我们讨论的是一款名为“lwtCountdown”的jQuery插件，该插件可能是从网络上...
在本文中，我们将深入探讨jQuery倒计时插件及其6种不同的倒计时效果。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作和Ajax交互。倒计时功能在网页中有着广泛的应用，如在线考试、产品...