測試反應能力的小代碼！（娛樂）
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
html,body{
width: 100%;/* 配合垂直居中3 */
height: 100%;/* 配合垂直居中4 */
margin: 0;/* 防止出現小幅度的滾動欄 */
padding: 0;/* 防止出現小幅度的滾動欄 */
}
#mybody{
background-color: red;
width: 300px;
height: 350px;
/*問題：布局的居中，內容的居中*/
/* 布局的居中1,水平 */
margin: 0 auto;
/* 配合垂直居中1 *position: relative;/
/* 配合垂直居中2 * top:20%;/
/* 內容的居中 */
text-align: center;/* 內容的水平居中 */
line-height: 350px;/* 內容的垂直居中 */
}
#myBtn{
width:100px;
height:80px;
margin: 0 auto;
background-color: blue;
text-align: center;/* 內容的水平居中 */
line-height: 100px;/* 內容的垂直居中 */
}
</style>
</head>
<body>
<div id="mybody" v-bind:style="{backgroundColor:bgcolor}">
<div id="myBtn" v-on:click="myclick">點我</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//把style當成是一個字符串來操作是可以的，但是非常不方便更改
//任何賦值，都需要對整個style進行修改
//var myModel={myStyle:‘width: 200px;height: 50px;background-color: red‘}
//定義一個全局變量，用於記錄上一次執行的時間
var lasttime = new Date();
var myModel = {bgcolor:‘green‘};
var myViewModel = new Vue({
el:‘#mybody‘,
data:myModel,
methods:{
myclick:function(){
now = new Date();
dif = now - lasttime - 170;
if(dif<150){
alert(‘你反應速度：‘+dif+‘,如果你不是神，那就是碰巧點了鼠標，不是真正的實力！‘);
}else if(dif<200){
alert(‘你反應速度：‘+dif+‘,正常‘);
}else if(dif<300){
alert(‘你反應速度：‘+dif+‘,就這樣吧，你懂！‘);
}else if(dif<400){
alert(‘你反應速度：‘+dif+‘,可以試一下睡一覺，精神好點再來‘);
}else{
alert(‘你睡著了嗎？‘);
}
}
}
});
function changeBgColor(){
if(myModel.bgcolor==‘green‘){
myModel.bgcolor=‘red‘;
}else{
myModel.bgcolor=‘green‘;
}
//這是,最小極限為3秒，最大極限為12+3秒的算法
time = Math.random()*12*1000+3000;
setTimeout(changeBgColor,time);
lasttime = new Date();
}
//定時函數有2個(settimeout,setInterval)
/**
* settimeout(指定時間，執行1次，但是可以執行結束後，再1次，而且時間可以配置)
* setInterval(固定時間，反復循環執行)
*/
setTimeout(changeBgColor,5000);
</script>
</html>
測試反應能力的小代碼！（娛樂）