java-script/StopWatch_final.html at master · ashishyadav311/java-script · GitHub

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!Doctype html>
<html>

<head>
	<style>
		.custom {
			width: 78px !important;
		}
	</style>
	<title>Bootstrap Example</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<body>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<div align="center" class="">
		<input type="button" id="1" value="play" onclick="toggle(this);" class="btn btn-primary custom">
		<button onclick="stop()" class="btn btn-primary custom">stop</button>
		<button onclick="reset()" class="btn btn-danger custom">reset</button>
	</div>
	<table class="table">
		<thead>
			<!--       <tr>
  <th>Hours</th>
  <th>Minutes</th>
  <th>Second</th>
</tr> -->
		</thead>
		<tbody>
			<p id="watch"></p>
			<tr>
			</tr>
		</tbody>
	</table>
	<script>
		var start;
		var now;
		var h = 0;
		var m = 0;
		var s = 0;
		var myvar;

		function disp() {
			s++;
			if (s >= 60) {
				m++;
				s = 0;
			}
			if (m >= 60) {
				h++;
				m = 0;
			}
			document.getElementById("watch").innerHTML = "<div align=\"center\"><b><font size=\"1000\"> " + h + " : " + m + " : " + s + "</font></b></div>";
		}

		function play() {
			myvar = setInterval(function() {
				disp()
			}, 1000)
		}

		function pause() {
			clearInterval(myvar);
		}

		function stop() {
			clearInterval(myvar);
			document.getElementById("1").value = "play";

			s = 0;
			h = 0;
			m = 0;
		}

		function toggle(button) {
			if (document.getElementById("1").value == "play") {
				document.getElementById("1").value = "pause";
				play();
			} else if (document.getElementById("1").value == "pause") {
				document.getElementById("1").value = "play";
				pause();
			}
		}

		function reset() {
			clearInterval(myvar);
			document.getElementById("1").value = "play";
			document.getElementById("watch").innerHTML = "<table border=\"1\" style=\"width:100%\" ><div align=\"center\"><b><font size=\"1000\"> 0 : 0 : 0 </font></b></div></table>";
			//		document.getElementById("watch").innerHTML = 0 + ":" + 0 + ":" + 0;
		}
	</script>
</body>

</html>