You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
3.5 KiB
132 lines
3.5 KiB
<html>
|
|
<head>
|
|
<title>jQuery countTo Example</title>
|
|
|
|
<style type="text/css">
|
|
body {
|
|
font-family: Arial;
|
|
padding: 25px;
|
|
}
|
|
|
|
.example {
|
|
position: relative;
|
|
padding: 25px;
|
|
margin: 25px 0;
|
|
line-height: 1em;
|
|
background-color: #eee;
|
|
}
|
|
|
|
.example h2 {
|
|
margin-right: 100px;
|
|
}
|
|
|
|
.example p {
|
|
position: absolute;
|
|
right: 25px;
|
|
top: 25px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.red {
|
|
color: #c00;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>jQuery countTo Example</h1>
|
|
<p>
|
|
This is a simple example of the
|
|
<a href="https://github.com/mhuggins/jquery-countTo">jQuery countTo plugin</a>
|
|
created by <a href="http://www.matthuggins.com">Matt Huggins</a>. Refer to
|
|
the full documentation for more usage information.
|
|
</p>
|
|
|
|
<div class="example">
|
|
<h2>
|
|
How many licks to the center of a Tootsie Pop?
|
|
<button class="restart" data-target="#lollipop">Restart</button>
|
|
</h2>
|
|
<p><b class="timer" id="lollipop" data-to="3" data-speed="1500"></b></p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h2>
|
|
What is Earth's radius?
|
|
<button class="restart" data-target="#earth">Restart</button>
|
|
</h2>
|
|
<p><b class="timer" id="earth" data-to="3968" data-speed="10000"></b> miles</p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h2>
|
|
Start the countdown...
|
|
<button class="restart" data-target="#countdown">Restart</button>
|
|
</h2>
|
|
<p>Lift-off in <b class="timer" id="countdown" data-from="3" data-to="1" data-speed="3000"></b></p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h2>
|
|
Earth's Gravity
|
|
<button class="restart" data-target="#gravity">Restart</button>
|
|
</h2>
|
|
<p><b class="timer" id="gravity" data-from="0" data-to="9.8" data-speed="3000" data-decimals="2"></b> m/s<sup>2</sup></p>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h2>
|
|
To infinity...and beyond!
|
|
<button class="restart" data-target="#infinity">Restart</button>
|
|
</h2>
|
|
<p><b class="timer" id="infinity" data-from="0" data-to="1" data-speed="1000"></b></p>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
|
|
<script type="text/javascript" src="jquery.countTo.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
jQuery(function ($) {
|
|
// custom formatting example
|
|
$('#earth').data('countToOptions', {
|
|
formatter: function (value, options) {
|
|
return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
|
|
}
|
|
});
|
|
|
|
// custom callback when counting completes
|
|
$('#countdown').data('countToOptions', {
|
|
onComplete: function (value) {
|
|
$(this).text('BLAST OFF!').addClass('red');
|
|
}
|
|
});
|
|
|
|
// another custom callback for counting to infinity
|
|
$('#infinity').data('countToOptions', {
|
|
onComplete: function (value) {
|
|
count.call(this, {
|
|
from: value,
|
|
to: value + 1
|
|
});
|
|
}
|
|
});
|
|
|
|
// start all the timers
|
|
$('.timer').each(count);
|
|
|
|
// restart a timer when a button is clicked
|
|
$('.restart').click(function (event) {
|
|
event.preventDefault();
|
|
var target = $(this).data('target');
|
|
count.call($(target));
|
|
});
|
|
|
|
function count(options) {
|
|
var $this = $(this);
|
|
options = $.extend({}, options || {}, $this.data('countToOptions') || {});
|
|
$this.countTo(options);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|