-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
84 lines (75 loc) · 2.29 KB
/
index.html
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
<html lang="en"><head>
<meta charset="utf-8">
<title>Game Timer</title>
<!-- meta tags -->
<meta name="keywords" content="">
<meta name="description" content="">
<link href="css/styles.css" type="text/css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!-- javascript -->
</head>
<body>
<div id="container">
<div>
<div id="clock"></div>
</div>
<div class="controls">
<input type="button" id="startClock" onClick="startClock()" value="Start Clock"/>
<input type="button" id="stopClock" onClick="stopClock()" value="Stop Clock"/>
<input type="button" id="stopClock" onClick="resetClock()" value="Reset Clock"/>
</div>
<div id="doc">
<h2>How to use:</h2>
<p>
<ol>
<li>Use gameclock.js:<br/><code><script type="text/javascript" src="js/gameclock.js"></script></code></li>
<li>Create an instance of the clock:
<code><pre>
var clock = new Clock({
time:9000,
displayEL:'clock',
stopAferTimeout:true,
resetAfterTimeout:false,
timeoutCallBack:stopme
});</pre></code>
<li>Start The clock: <code><pre>clock.StartClock();</pre></code> </li>
<li>Stop The clock: <code><pre>clock.StopClock();</pre></code> </li>
<li>Rest The clock: <code><pre>clock.ResetClock();</pre></code> </li>
<li>Configuration:
<ul>
<li>displayEL: The display element. This will display the current state of the clock in a element.</li>
<li>time: The amount of time for the game.</li>
<li>stopAferTimeout: If true, will stop at zero. If false, will contine to display a negative time.</li>
<li>resetAfterTimeout: If true, will reset the clock to the "time" value and continue to countdown.</li>
<li>timeoutCallBack: A callback function that will fire when the clock reaches zero.</li>
</ul>
</ol>
</p>
</div>
</div>
<script src="js/gameclock.js"></script>
<script>
var stopme = function(){
alert('Game Over!');
}
var clock = new Clock({
time:900000,
displayEL:'clock',
stopAferTimeout:true,
resetAfterTimeout:false,
timeoutCallBack:stopme
});
function stopClock(){
clock.StopClock();
}
function startClock(){
clock.StartClock();
}
function resetClock(){
clock.ResetClock();
}
</script>
<footer>
</footer>
</body>
</html>