|
|
| Line 2: |
Line 2: |
| <script type='text/javascript' src="http://www.wikidoc.org/includes/raty/jquery.timer.js"></script> | | <script type='text/javascript' src="http://www.wikidoc.org/includes/raty/jquery.timer.js"></script> |
| <script type='text/javascript'> | | <script type='text/javascript'> |
| var Example1 = new (function() { | | var Obj1 = new (function(){ |
| var $stopwatch, // Stopwatch element on the page | | var $timer1, |
| incrementTime = 70, // Timer speed in milliseconds
| | incrementTime = 100, |
| currentTime = 0, // Current time in hundredths of a second
| | currentTime = 0, |
| updateTimer = function() {
| | updateTimer = function() { |
|
| | $timer1.html(currentTime); |
| $stopwatch.html(formatTime(currentTime));
| | currentTime +=incrementTime; |
| currentTime += incrementTime / 10;
| | }, |
| },
| | init = function(){ |
| init = function() {
| | $timer1 = $('#output1'); |
|
| | Obj1.Timer = $.timer(updateTimer, incrementTime, true); |
| $stopwatch = $('#stopwatch');
| |
| Example1.Timer = $.timer(updateTimer, incrementTime, true);
| |
| };
| |
| this.resetStopwatch = function() {
| |
| currentTime = 0;
| |
| this.Timer.stop().once();
| |
| }; | | }; |
| $(init);
| | this.resetTimer = function(){ |
| });
| |
| | |
| var count = 0,
| |
| timer = $.timer(function() {
| |
|
| |
| count++;
| |
| $('#counter').html(count);
| |
| });
| |
| timer.set({ time : '', autostart : true });
| |
| | |
| | |
| var Example2 = new (function() {
| |
| var $stopwatch2, // Stopwatch element on the page
| |
| incrementTime = 70, // Timer speed in milliseconds
| |
| currentTime = 0, // Current time in hundredths of a second
| |
| updateTimer = function() {
| |
|
| |
| $stopwatch2.html(formatTime(currentTime));
| |
| currentTime += incrementTime / 10;
| |
| },
| |
| init = function() {
| |
|
| |
| $stopwatch2 = $('#stopwatch2');
| |
| Example1.Timer = $.timer(updateTimer, incrementTime, true);
| |
| };
| |
| this.resetStopwatch = function() { | |
| currentTime = 0; | | currentTime = 0; |
| this.Timer.stop().once(); | | this.Timer.stop().once(); |
| }; | | } |
| $(init);
| | $(init); |
| }); | | }); |
|
| |
| var count2 = 0,
| |
| timer = $.timer(function() {
| |
|
| |
| count2++;
| |
| $('#counter2').html(count);
| |
| });
| |
| timer.set({ time : '', autostart : true });
| |
|
| |
|
| |
| // Common functions
| |
| function pad(number, length) {
| |
|
| |
| var str = '' + number;
| |
| while (str.length < length) {str = '0' + str;}
| |
| return str;
| |
| }
| |
| function formatTime(time) {
| |
|
| |
| var min = parseInt(time / 6000),
| |
| sec = parseInt(time / 100) - (min * 60),
| |
| hundredths = pad(time - (sec * 100) - (min * 6000), 2);
| |
| return (min > 0 ? pad(min, 2) : "") + ":" + pad(sec, 2) + ":" + hundredths;
| |
| }
| |
| </script> | | </script> |
| | | <span id="obj1"></span> |
| <span id="stopwatch">00:00:00</span> | | <span id="obj2"></span> |
| <p> | | <span id="output1"></span> |
| <input type='button' value='Play/Pause' onclick='Example1.Timer.toggle();' />
| | <span id="output2"></span> |
| <input type='button' value='Stop/Reset' onclick='Example1.resetStopwatch();' /> | |
| </p>
| |
| <span id="stopwatch2">00:00:00</span> | |
| <p> | |
| <input type='button' value='Play/Pause' onclick='Example2.Timer.toggle();' />
| |
| <input type='button' value='Stop/Reset' onclick='Example2.resetStopwatch();' /> | |
| </p>
| |
| </includeonly> | | </includeonly> |