Skip to content

Commit 34b526b

Browse files
jchavannesjchavannes
committed
Adding usage and renaming to lowercase
1 parent 25b3f8b commit 34b526b

File tree

4 files changed

+99
-70
lines changed

4 files changed

+99
-70
lines changed

‎demo.html‎

Lines changed: 61 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,39 @@ <h1>jQuery Timer Demo</h1>
1515
<p>Project home: <a href="http://jchavannes.com/jquery-timer" target="_blank">http://jchavannes.com/jquery-timer</a></p>
1616
<p><a href="res/demo.js" target="_blank">View Source</a></p>
1717

18-
<hr/><h3 style='margin-top:20px;'>Example 1 - Stopwatch</h3>
18+
<br/>
19+
20+
<h2>Usage</h2>
21+
22+
<hr/>
23+
24+
<h3>Stopwatch</h3>
25+
26+
<h4>Create a new stopwatch</h4>
27+
<p>HTML</p>
28+
<pre>&lt;div id='time'&gt;%lt;/div&gt;</pre>
29+
<p>Javascript</p>
30+
<pre>
31+
var stopwatch = $.stopwatch(function(watch) {
32+
$('#time').html(watch.getFormattedTime();
33+
});</pre>
34+
35+
<br/>
36+
37+
<h2>Examples</h2>
38+
39+
<hr/>
40+
41+
<h3 style='margin-top:20px;'>Example 1 - Stopwatch</h3>
1942
<p>
2043
<span id="stopwatch">00:00:00</span><br/>
2144
<input type='button' value='Example1.toggle()' onclick='Example1.toggle()' />
2245
<input type='button' value='Example1.stop()' onclick='Example1.stop()' />
2346
</p>
24-
<pre style='padding:10px 15px;'>
25-
var Example1 = $.stopWatch(function () {
26-
var output = this.getFormattedTime() + " - &lt;i&gt;(" + this.getTime() + " milliseconds)&lt;/i&gt;";
27-
$('#stopwatch').html(output);
47+
<pre>
48+
var Example1 = $.stopwatch(function () {
49+
var output = this.getFormattedTime() + " - <i>(" + this.getTime() + " milliseconds)</i>";
50+
$("#stopwatch").html(output);
2851
});</pre>
2952
<br/>
3053

@@ -34,16 +57,42 @@ <h3>Example 2 - Countdown</h3>
3457
<input type='button' value='Example2.toggle()' onclick='Example2.toggle()' />
3558
<input type='button' value='Example2.stop()' onclick='Example2.stop()' />
3659
</form>
37-
<pre style='padding:10px 15px;'>
38-
var Example2 = $.countDown(function() {
39-
$('#countdown').html(this.getFormattedTime());
60+
<pre>
61+
var Example2 = $.countdown(function() {
62+
$("#countdown").html(this.getFormattedTime());
4063
if (this.isFinished()) {
41-
alert('Example 2: Countdown complete!');
64+
alert("Example 2: Countdown complete!");
4265
}
4366
}, 20);</pre>
4467
<br/>
4568

46-
<h3>Example 3 - Slideshow (preserves time remaining when paused)</h3>
69+
70+
<h3>Example 3 - The original jQuery Timer (basically a suped-up version of setTimeout)</h3>
71+
<p>timer has been executed <span id='counter' style=''>0</span> times.</p>
72+
<div class='example-four'>
73+
<input type='button' value='timer.play()' onclick='timer.play();' /><br/>
74+
<input type='button' value='timer.play(true)' onclick='timer.play(true);' /><br/>
75+
<input type='button' value='timer.pause()' onclick='timer.pause();' /><br/>
76+
<input type='button' value='timer.toggle()' onclick='timer.toggle();' /><br/>
77+
<input type='button' value='timer.toggle(true)' onclick='timer.toggle(true);' /><br/>
78+
<input type='button' value='timer.stop()' onclick='timer.stop();' />
79+
</div>
80+
<div class='example-four'>
81+
<input type='button' value='timer.reset()' onclick='timer.reset();' /><br/>
82+
<input type='button' value='timer.once()' onclick='timer.once();' /><br/>
83+
<input type='button' value='timer.once(5000)' onclick='timer.once(5000);' /><br/>
84+
<input type='button' value='timer.set({time:1000})' onclick='timer.set({time:1000});' /><br/>
85+
<input type='button' value='timer.set({time:5000})' onclick='timer.set({time:5000});' />
86+
</div>
87+
<br/><pre>
88+
var count = 0;
89+
var timer = $.timer(function() {
90+
$('#counter').html(++count);
91+
});
92+
timer.set({ time : 1000, autostart : true });</pre>
93+
94+
95+
<h3>Example 4 - Slideshow (preserves time remaining when paused)</h3>
4796
<div class="galleryImages">
4897
<img src='res/img/1.jpg' alt='' />
4998
<img src='res/img/2.jpg' alt='' />
@@ -65,31 +114,9 @@ <h3>Example 3 - Slideshow (preserves time remaining when paused)</h3>
65114
</div>
66115
<p class="example-three">
67116
<span id="timeRemaining"><br/></span>
68-
<input type='button' value='Play / Pause' onclick='Example3.toggleGallery();' />
117+
<input type='button' value='Play / Pause' onclick='Example4.toggleGallery();' />
69118
</p>
70119

71-
<h3>Example 4 - The Basics (just a suped-up version of setTimeout)</h3>
72-
<p>timer has been executed <span id='counter' style=''>0</span> times.</p>
73-
<div class='example-four'>
74-
<input type='button' value='timer.play()' onclick='timer.play();' /><br/>
75-
<input type='button' value='timer.play(true)' onclick='timer.play(true);' /><br/>
76-
<input type='button' value='timer.pause()' onclick='timer.pause();' /><br/>
77-
<input type='button' value='timer.toggle()' onclick='timer.toggle();' /><br/>
78-
<input type='button' value='timer.toggle(true)' onclick='timer.toggle(true);' /><br/>
79-
<input type='button' value='timer.stop()' onclick='timer.stop();' />
80-
</div>
81-
<div class='example-four'>
82-
<input type='button' value='timer.reset()' onclick='timer.reset();' /><br/>
83-
<input type='button' value='timer.once()' onclick='timer.once();' /><br/>
84-
<input type='button' value='timer.once(5000)' onclick='timer.once(5000);' /><br/>
85-
<input type='button' value='timer.set({time:1000})' onclick='timer.set({time:1000});' /><br/>
86-
<input type='button' value='timer.set({time:5000})' onclick='timer.set({time:5000});' />
87-
</div>
88-
<br/><pre style='margin-bottom:20px; padding:10px 15px;'>
89-
var count = 0;
90-
var timer = $.timer(function() {
91-
$('#counter').html(++count);
92-
});
93-
timer.set({ time : 1000, autostart : true });</pre>
120+
94121
</body>
95122
</html>

‎jquery.timer.js‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@
2929
;(function($) {
3030

3131
$.timer = Timer;
32-
$.stopWatch = StopWatch;
33-
$.countDown = CountDown;
32+
$.stopwatch = Stopwatch;
33+
$.countdown = Countdown;
3434

3535
$.timerUtil = {
3636
pad: pad,
@@ -284,10 +284,10 @@
284284
/**
285285
* @param {function=} updateFunction
286286
*/
287-
function StopWatch(updateFunction) {
287+
function Stopwatch(updateFunction) {
288288

289289
if (typeof this == "function" || this.init) {
290-
return new StopWatch(updateFunction);
290+
return new Stopwatch(updateFunction);
291291
}
292292

293293
this.set(updateFunction);
@@ -298,7 +298,7 @@
298298
/**
299299
* @param {function=} updateFunction
300300
*/
301-
StopWatch.prototype.set = function(updateFunction) {
301+
Stopwatch.prototype.set = function(updateFunction) {
302302

303303
if (typeof updateFunction != "function") {
304304
return;
@@ -312,7 +312,7 @@
312312

313313
};
314314

315-
StopWatch.prototype.timeUpdate = function() {
315+
Stopwatch.prototype.timeUpdate = function() {
316316

317317
if (this.startTime == 0) {
318318
this.timePassed = 0;
@@ -328,30 +328,30 @@
328328
/**
329329
* @returns {int}
330330
*/
331-
StopWatch.prototype.getTime = function() {
331+
Stopwatch.prototype.getTime = function() {
332332
return this.timePassed > 0 ? this.timePassed : 0;
333333
};
334334

335335
/**
336336
* @returns {string}
337337
*/
338-
StopWatch.prototype.getFormattedTime = function() {
338+
Stopwatch.prototype.getFormattedTime = function() {
339339
return formatTime(this.getTime());
340340
};
341341

342-
StopWatch.prototype.stop = function() {
342+
Stopwatch.prototype.stop = function() {
343343
this.clearInterval();
344344
this.startTime = 0;
345345
this.timeUpdate();
346346
};
347347

348-
StopWatch.prototype.pause = function() {
348+
Stopwatch.prototype.pause = function() {
349349
this.clearInterval();
350350
this.pauseStart = new Date().getTime();
351351
this.timeUpdate();
352352
};
353353

354-
StopWatch.prototype.toggle = function() {
354+
Stopwatch.prototype.toggle = function() {
355355
if (this.pauseStart || this.startTime == 0) {
356356
this.start();
357357
}
@@ -360,7 +360,7 @@
360360
}
361361
};
362362

363-
StopWatch.prototype.setInterval = function() {
363+
Stopwatch.prototype.setInterval = function() {
364364

365365
this.clearInterval();
366366
this.interval = setInterval(interval, 1000/30);
@@ -372,11 +372,11 @@
372372

373373
};
374374

375-
StopWatch.prototype.clearInterval = function() {
375+
Stopwatch.prototype.clearInterval = function() {
376376
clearInterval(this.interval);
377377
};
378378

379-
StopWatch.prototype.start = function() {
379+
Stopwatch.prototype.start = function() {
380380

381381
if (!this.startTime) {
382382
this.startTime = new Date().getTime();
@@ -397,41 +397,41 @@
397397
* @param {function=} updateFunction
398398
* @param {int=} countdown
399399
*/
400-
function CountDown(updateFunction, countdown) {
400+
function Countdown(updateFunction, countdown) {
401401

402402
if (typeof this == "function" || this.init) {
403-
return new CountDown(updateFunction, countdown);
403+
return new Countdown(updateFunction, countdown);
404404
}
405405

406406
this.set(updateFunction, countdown);
407407

408408
return this;
409409
}
410410

411-
CountDown.prototype = new StopWatch();
411+
Countdown.prototype = new Stopwatch();
412412

413413
/**
414414
* @param {int} countdown
415415
*/
416-
CountDown.prototype.setCountdown = function(countdown) {
416+
Countdown.prototype.setCountdown = function(countdown) {
417417
this.countdown = countdown * 1000;
418418
};
419419

420420
/**
421421
* @param {function=} updateFunction
422422
* @param {int=} countdown
423423
*/
424-
CountDown.prototype.set = function(updateFunction, countdown) {
424+
Countdown.prototype.set = function(updateFunction, countdown) {
425425
this.setCountdown(countdown);
426-
StopWatch.prototype.set.apply(this, [updateFunction]);
426+
Stopwatch.prototype.set.apply(this, [updateFunction]);
427427
};
428428

429429
/**
430430
* @returns {int}
431431
*/
432-
CountDown.prototype.getTime = function() {
432+
Countdown.prototype.getTime = function() {
433433

434-
var time = this.countdown - StopWatch.prototype.getTime.apply(this);
434+
var time = this.countdown - Stopwatch.prototype.getTime.apply(this);
435435

436436
if (time <= 0) {
437437
time = 0;
@@ -450,15 +450,15 @@
450450
/**
451451
* @returns {boolean}
452452
*/
453-
CountDown.prototype.isFinished = function() {
453+
Countdown.prototype.isFinished = function() {
454454
return this.finished;
455455
};
456456

457-
CountDown.prototype.start = function() {
457+
Countdown.prototype.start = function() {
458458
if (this.getTime() == 0) {
459459
this.startTime = 0;
460460
}
461-
StopWatch.prototype.start.apply(this);
461+
Stopwatch.prototype.start.apply(this);
462462
};
463463

464464
/**

‎res/demo.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
var Example1 = $.stopWatch(function () {
1+
var Example1 = $.stopwatch(function () {
22
var output = this.getFormattedTime() + " - <i>(" + this.getTime() + " milliseconds)</i>";
3-
$('#stopwatch').html(output);
3+
$("#stopwatch").html(output);
44
});
55

6-
var Example2 = $.countDown(function() {
7-
$('#countdown').html(this.getFormattedTime());
6+
var Example2 = $.countdown(function() {
7+
$("#countdown").html(this.getFormattedTime());
88
if (this.isFinished()) {
9-
alert('Example 2: Countdown complete!');
9+
alert("Example 2: Countdown complete!");
1010
}
1111
}, 20);
1212

@@ -21,7 +21,7 @@ var Example2 = $.countDown(function() {
2121
* play again, the timer continues where it ended instead of
2222
* starting over again.
2323
*/
24-
var Example3 = new (function() {
24+
var Example4 = new (function() {
2525
var $galleryImages, // An array of image elements
2626
$timeRemaining, // Usually hidden element to display time when paused
2727
imageId = 0, // Which image is being shown
@@ -37,7 +37,7 @@ var Example3 = new (function() {
3737
init = function() {
3838
$galleryImages = $('.galleryImages img');
3939
$timeRemaining = $('#timeRemaining');
40-
Example3.Timer = $.timer(updateTimer, incrementTime, true).once();
40+
Example4.Timer = $.timer(updateTimer, incrementTime, true).once();
4141
};
4242
this.toggleGallery = function() {
4343
if (this.Timer.isActive) {

‎res/style.css‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ label {
1010
}
1111
input[type=button] {
1212
padding: 4px 10px;
13-
margin: 5px 0 0;
13+
margin: 7px 7px 0 0;
1414
font-size: 14px;
1515
width: 200px;
1616
color: #3a3a3a;
@@ -30,13 +30,15 @@ a:hover {
3030
color: #000;
3131
cursor: pointer;
3232
}
33-
p {
33+
hr {
34+
width: 650px;
35+
margin: 12px 0;
3436
}
3537
pre {
3638
background-color: #eee;
3739
border: 1px solid #ccc;
38-
width: 600px;
39-
padding: 5px;
40+
width: 620px;
41+
padding: 10px 15px;
4042
}
4143
div {
4244
display: inline-block;

0 commit comments

Comments
 (0)