此项目只测试反应速度，即手点击鼠标的反应速度
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 }