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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Jason Chavannes" />
<title>jQuery Timer Demo</title>
<link rel="stylesheet" href="res/style.css" />
<script type="text/javascript" src="res/jquery.min.js"></script>
<script type="text/javascript" src="jquery.timer.js"></script>
<script type="text/javascript" src="res/demo.js"></script>
</head>
<body>
<h1>jQuery Timer Demo</h1>
<p>Project home: <a href="http://jchavannes.com/jquery-timer" target="_blank">http://jchavannes.com/jquery-timer</a></p>
<p><a href="res/demo.js" target="_blank">View Source</a></p>
<hr/><h3 style='margin-top:20px;'>Example 1 - Stopwatch (counts ups)</h3>
<span id="stopwatch">00:00:00</span>
<p>
<input type='button' value='Play/Pause' onclick='Example1.Timer.toggle();' />
<input type='button' value='Stop/Reset' onclick='Example1.resetStopwatch();' />
</p>
<br/>
<br/>
<h3>Example 2 - Countdown Timer</h3>
<span id="countdown">05:00:00</span>
<form id="example2form">
<input type='button' value='Play/Pause' onclick='Example2.Timer.toggle();' />
<input type='button' value='Stop/Reset' onclick='Example2.resetCountdown();' />
<input type='text' name='startTime' value='300' style='width:30px;' />
</form>
<h3>Example 3 - Slideshow (preserves time remaining when paused)</h3>
<div class="galleryImages">
<img src='res/img/1.jpg' alt='' />
<img src='res/img/2.jpg' alt='' />
<img src='res/img/3.jpg' alt='' />
<img src='res/img/4.jpg' alt='' />
<img src='res/img/5.jpg' alt='' />
<img src='res/img/6.jpg' alt='' />
<img src='res/img/7.jpg' alt='' />
<img src='res/img/8.jpg' alt='' />
<img src='res/img/9.jpg' alt='' />
<img src='res/img/10.jpg' alt='' />
<img src='res/img/11.jpg' alt='' />
<img src='res/img/12.jpg' alt='' />
<img src='res/img/13.jpg' alt='' />
<img src='res/img/14.jpg' alt='' />
<img src='res/img/15.jpg' alt='' />
<img src='res/img/16.jpg' alt='' />
<img src='res/img/17.jpg' alt='' />
</div><br/>
<div id="timeRemaining"><br/></div>
<p class="example-three">
<input type='button' value='Play / Pause' onclick='Example3.toggleGallery();' />
</p>
<h3>Example 4 - The Basics (just a suped-up version of setTimeout)</h3>
<p>timer has been executed <span id='counter' style=''>0</span> times.</p>
<div class='example-four'>
<input type='button' value='timer.play()' onclick='timer.play();' /><br/>
<input type='button' value='timer.play(true)' onclick='timer.play(true);' /><br/>
<input type='button' value='timer.pause()' onclick='timer.pause();' /><br/>
<input type='button' value='timer.toggle()' onclick='timer.toggle();' /><br/>
<input type='button' value='timer.toggle(true)' onclick='timer.toggle(true);' /><br/>
<input type='button' value='timer.stop()' onclick='timer.stop();' />
</div>
<div class='example-four'>
<input type='button' value='timer.reset()' onclick='timer.reset();' /><br/>
<input type='button' value='timer.once()' onclick='timer.once();' /><br/>
<input type='button' value='timer.once(5000)' onclick='timer.once(5000);' /><br/>
<input type='button' value='timer.set({time:1000})' onclick='timer.set({time:1000});' /><br/>
<input type='button' value='timer.set({time:5000})' onclick='timer.set({time:5000});' />
</div>
<br/><pre style='margin-bottom:20px; padding:10px 15px;'>
var count = 0;
var timer = $.timer(function() {
$('#counter').html(++count);
});
timer.set({ time : 1000, autostart : true });</pre>
</body>
</html>
|
