Question

我正在尝试在页面上添加多个秒表，以跟踪跟踪用户完成任务所需的时间。我有一个功能，我复制它，并试图使第二个功能复制与某些事情改变按钮效果其他功能。任何帮助，将不胜感激。

＆＃13;

<script>
			var time = 0;
			var running = 0;
			
			function startPause()
			{
				if(running == 0){
					running = 1;
					increment();
					document.getElementById("startPause").innerHTML = "Pause";
				}else{
					running = 0;
					document.getElementById("startPause").innerHTML = "Resume";
				}
			}
			
			function reset()
			{
				running = 0;
				time = 0;
				document.getElementById("startPause").innerHTML = "Start";
				document.getElementById("output").innerHTML = "00:00:00";
			}
			
			function increment()
			{
				if(running == 1){
					setTimeout(function(){
						time++;
						var mins = Math.floor(time/10/60);
						var secs = Math.floor(time/10 % 60);
						var tenths = time % 10;
						
						if(mins < 10){
							mins = "0" + mins;
						}
						if(secs < 10){
							secs = "0" + secs;
						}
						document.getElementById("output").innerHTML = mins + ":" + secs + ":" + "0" + tenths;
						increment();
						
					},100);
				}
			}
		</script>
		
			<script>
				var time = 0;
				var running = 0;
			
				function startPause2()
				{
					if(running == 0){
						running = 1;
						increment2();
						document.getElementById("startPause2").innerHTML = "Pause";
					}else{
						running = 0;
						document.getElementById("startPause2").innerHTML = "Resume";
					}
				}
			
				function reset2()
				{
					running = 0;
					time = 0;
					document.getElementById("startPause2").innerHTML = "Start";
					document.getElementById("output2").innerHTML = "00:00:00";
				}
			
				function increment2()
				{
					if(running == 1){
						setTimeout(function(){
							time++;
							var mins = Math.floor(time/10/60);
							var secs = Math.floor(time/10 % 60);
							var tenths = time % 10;
						
							if(mins < 10){
								mins = "0" + mins;
							}
							if(secs < 10){
								secs = "0" + secs;
							}
							document.getElementById("output2").innerHTML = mins + ":" + secs + ":" + "0" + tenths;
							increment();
						
						},100);
					}
				}
				
		</script>

＆＃13;

html {
	
	size: 100%,100%;
	background-color: #f2f2f2;
}

h1{
	font-Family: Arial;
	color: #5573A9;
	font-size: 40px;
	position: static;
}
	
	body {
		display: block;
		margin:8px, dotted line;
		background-color: #f2f2f2;
		
		
	}
	
	


#output{
	position:center;
				width:120px;
				height:25px;
				background-color:#CCC;
				border:3px solid #999;
			}
			
#output2{
	position: relative;
				width:120px;
				height:25px;
				background-color:#CCC;
				border:3px solid #999;
			}
			
			table {
				display:table;
				border-collapse:seperate;
				border-spacing: 52px;
				border-color: #FFF;
			}

＆＃13;

<html>
	<head>
	<link rel="stylesheet" type="text/css" href="style.css">
		
		<title>Time Study</title>
		<h1>Time Study</h1>
	</head>
	
	<body>
      <table>
	<tr>
	<th>Bin</th>
	<th>Bulk</th>
	</tr>
	<tr>
	<td>
		<p id="output"></p>
		<div id="controls">
		<button id="startPause" onclick="startPause()">Start</button>
		<button onclick="reset()">Reset</button>
		</div>
		</td>
		<td>
		<p id="output2"></p>
		<div id="controls2">
		<button id="startPause2" onclick="startPause2()">Start</button>
		<button onclick="reset2()">Reset</button>
		</div>
		</td>
		</tr>
		</table>
	</body>
</html>

＆＃13;

功能按钮影响另一个功能

0 个答案: