howLongOneSecond.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta charset=utf-8>
	<meta name=description content="">
	<meta name=viewport content="width=device-width, initial-scale=1,user-scalable=no">
	<title>Document</title>
	<style>
		*{
			-moz-user-select:none;
			-ms-user-select:none;
			-webkit-user-select:none;
			user-select:none;
		}
		body{
			margin:0;

		}
		#div{
			height: 300px;
			width: 300px;
			border-radius: 150px;
			/*background-color: #ccc;*/
			background: radial-gradient(red  0%, blue 100%);
			text-align: center;
			line-height: 300px;
			font-size: 40px;
		}
	</style>
</head>
<body>
	<h1>看看你的一秒有多长！</h1>

	<div id="div">
	</div>
	<script type="text/javascript">
		var	div = document.getElementById("div");
		var d1,d2;
		// 1、游戏者按下按钮（把手指放上去），记录一个时间 d1
		
		div.addEventListener("touchstart",function(e){
			d1 = Date.now();
			div.style.background=" radial-gradient(blue  0%,red 100%)";

			e.preventDefault();   //
			e.stopPropagatioin(); //
			
			console.info("start"+d1);
		});
		// 2、游戏者把手指放开，记录一个时间 d2
		div.addEventListener("touchend",function(){
			d2 = Date.now();
			console.info("start"+d2);
			console.info("时间差"+(d2-d1));
			div.innerHTML = (d2-d1)/1000;
			if((Math.abs(d2-d1)-1000) < 100){
				alert("厉害！！！")
			}
			div.style.background=" radial-gradient(red 0%,blue 100%)";
		});
		// 检查两个时间只差是否接近1秒
	</script>
</body>
</html>