forked from pmclanahan/stopwatch
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adding stopwatch-only page and minor changes.
- Loading branch information
1 parent
3bc9ce2
commit 05f7383
Showing
3 changed files
with
58 additions
and
20 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,5 @@ | ||
h1. jQuery Stopwatch | ||
|
||
A simple stopwatch plug-in for jQuery-supports multiple stopwatches per page. | ||
A simple stopwatch plug-in for jQuery-supports multiple stopwatches per page. | ||
|
||
I needed a simple stopwatch that would count up and at the press of a button, count down to zero and then count back up again. It also prints out how many times the countdown was reversed. Kelli Shaver's stopwatch system was pretty nice and simple and I was able to hack it and add my functionality quickly and easily. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
<html> | ||
<head> | ||
<title>Stopwatch</title> | ||
<link rel="stylesheet" href="css/jquery.stopwatch.css" /> | ||
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | ||
<script type="text/javascript" src="js/jquery.stopwatch.js"></script> | ||
<style type="text/css"> | ||
body { | ||
background: #333; | ||
text-align: center; | ||
margin: 0; | ||
padding: 0; | ||
font-family: arial, helvetica, sans-serif; | ||
font-size: 9pt; | ||
} | ||
#container { | ||
width: 650px; | ||
padding: 20px; | ||
background: #fff; | ||
margin: 30px auto 0 auto; | ||
} | ||
|
||
#footer { | ||
margin: 20px 0 0 0; | ||
padding: 20px 0 0 0; | ||
text-align: right; | ||
color: #777; | ||
border-top: 1px solid #ccc; | ||
} | ||
|
||
.stopwatch { | ||
width: auto; | ||
} | ||
.stopwatch .display { | ||
width: auto; | ||
text-align: center; | ||
} | ||
|
||
.stopwatch .start, .stopwatch .stop, .stopwatch .reverse, .stopwatch .reset { | ||
width: 23%; | ||
margin: 1%; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div id="container"> | ||
<div id="clock1"></div> | ||
</div> | ||
<script type="text/javascript"> | ||
$(function() { | ||
$('#clock1').stopwatch(); | ||
}); | ||
</script> | ||
</body> | ||
</html> |