<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<title>ReactionGame</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body{
background-color: #5881c4;
color: #162d44;
}
p{
font-weight: bold;
}
#box{
width: 140px;
height: 140px;
background-color: #F2F4FA;
display: none;
position: relative;
}
</style>
</head>
<body>
<h1>考考你的反應!</h1>
<p class="bold">反應時間:<span id="time">0</span>秒</p>
<div id="box"></div>
<script type="text/javascript">
var createdTime;
var clickedTime;
var reactionTime;
function getRandomColor(){
var max = 255;
var min = 125;
var green = Math.floor(Math.random() * (max - min + 1 )) + min;
var color = "rgba(115, "+ green +", 255, 1.0)";
return color;
}
function makeBox(){
var time = Math.random();
time = time * 2000;
setTimeout(function(){
if (Math.random() >= 0.5) {
document.getElementById("box").style.borderRadius = "70px";
}else{
document.getElementById("box").style.borderRadius = "0px";
} //利用隨機數判斷圖形形狀
// console.log(window.innerWidth);
// console.log(window.innerHeight);
// console.log(document.documentElement.clientWidth);
// console.log(document.documentElement.clientHeight);
var min = 0;
var max = window.innerHeight - 280;
var top = Math.floor(Math.random() * (max - min + 1 )) + min;
min = 0;
max = window.innerWidth - 140;
var left = Math.floor(Math.random() * (max - min + 1 )) + min;
document.getElementById("box").style.top = top + "px";
document.getElementById("box").style.left = left + "px";
document.getElementById("box").style.backgroundColor = getRandomColor();
document.getElementById("box").style.display = "block";
createdTime = Date.now();
}, time); // 將要執行的動作，時間ms
}
document.getElementById("box").onclick = function(){
this.style.display = "none";
clickedTime = Date.now();
reactionTime = (clickedTime - createdTime) / 1000;
document.getElementById("time").innerHTML = reactionTime;
makeBox();
}
makeBox();
</script>
</body>
</html>
留言列表
Impression (1)
