此项目只测试反应速度，即手点击鼠标的反应速度

html代码

1 <div id="top">请等待图片变颜色，颜色便的那一刻即可点击测手速</div>
2 <div id="mybody" v-bind:style="{backgroundColor:bgcolor}">
3     <div id="myBtn" v-on:click="myclick">点我测手速</div>
4 </div>

js代码

 1 //定义一个全局变量，用于记录上一次执行的时间
 2 var lasttime = new Date();
 3 var myModel = {bgcolor:'green'};
 4 var myViewModel = new Vue({
 5     el:'#mybody',
 6     data:myModel,
 7     methods:{
 8         myclick:function(){
 9             now = new Date();
10             dif = now - lasttime -170;
11             if(dif<150){
12                 alert('你反应速度：'+dif+',如果你不是神，那就是碰巧点了鼠标，不是真正的实力！');
13             }else if(dif<200){
14                 alert('你反应速度：'+dif+',正常');
15             }else if(dif<300){
16                 alert('你反应速度：'+dif+',还可以！');
17             }else if(dif<400){
18                 alert('你反应速度：'+dif+',可以试一下睡一觉，精神好点再来');
19             }else{
20                 alert('你反应速度：'+dif+',你睡着了吗？');
21             }
22         }
23     }
24 });
25 function changeBgColor(){
26     myModel.bgcolor= 'rgb' + '(' + Math.ceil(Math.random() * 245) + ',' + Math.ceil(Math.random() * 245) + ',' + Math.ceil(Math.random() * 245) + ')';
27     //这是,最小极限为3秒，最大极限为12+3秒的算法
28     time = Math.random()*12*1000+3000;
29     setTimeout(changeBgColor,time);
30     lasttime = new Date();
31 }
32 //定时函数有2个(settimeout,setInterval)
33 /**
34  * settimeout(指定时间，执行1次，但是可以执行结束后，再1次，而且时间可以配置)
35  * setInterval(固定时间，反复循环执行)
36  */
37 setTimeout(changeBgColor,5000);

 

css代码

 1 html,body{
 2     width: 100%;/* 配合垂直居中3 */
 3     height: 100%;/* 配合垂直居中4 */
 4     margin: 0;/* 防止出现小幅度的滚动栏 */
 5     padding: 0;/* 防止出现小幅度的滚动栏 */
 6 }
 7 #top{
 8     text-align: center;
 9     color:red;
10     font-size:30px;
11     display:block;
12     margin:20px auto;
13 }
14 #mybody{
15     background-color: red;
16     width: 300px;
17     height: 350px;
18     /*问题：布局的居中，内容的居中*/
19     /* 布局的居中1,水平 */
20     margin: 0 auto;
21     /* 配合垂直居中1 *position: relative;/
22     /* 配合垂直居中2 * top:20%;/
23     /* 内容的居中 */
24     text-align: center;/* 内容的水平居中 */
25     line-height: 350px;/* 内容的垂直居中 */
26 }
27 #myBtn{
28     width:100px;
29     height:80px;
30     margin: 0 auto;
31     color:#FFF;
32     background-color: blue;
33     text-align: center;/* 内容的水平居中 */
34     line-height: 100px;/* 内容的垂直居中 */
35     
36 }