一个利用随机颜色切换测试你单击鼠标的反应能力

//这是以下代码运行后效果的链接地址：http://aaaaaaaaa.duapp.com/

html代码

1 2 <div id="mybody"> 3 <div id="myBtn" v-on:click="myclick">点我变色</div> 4 </div>

js代码

 <script src="js/vue.js"></script> //还需导入vue.js第三方的js文件 
1 var lasttime = new Date();
 2 var myModel = {bgcolor:'green'};
 3 var myViewModel = new Vue({
 4     el:'#mybody',
 5     data:myModel,
 6     methods:{
 7         myclick:function(){
 8             now = new Date();
 9             dif = now - lasttime - 170;
10             if(dif<150){
11                 alert('你反应速度：'+dif+',如果你不是神，那就是碰巧点了鼠标，不是真正的实力！');
12             }else if(dif<200){
13                 alert('你反应速度：'+dif+',正常');
14             }else if(dif<300){
15                 alert('你反应速度：'+dif+',就这样吧，你懂！');
16             }else if(dif<400){
17                 alert('你反应速度：'+dif+',可以试一下睡一觉，精神好点再来');
18             }else{
19                 alert('你睡着了吗？');
20             }
21         }
22     }
23 }); 
24 //随机变换颜色
25 
26 
27  function changeColor(){  
28     var red = Math.ceil(Math.random()*255);  
29     var green = Math.ceil(Math.random()*255);  
30     var blue = Math.ceil(Math.random()*255);  
31     myModel = "#"+red.toString(16)+green.toString(16)+blue.toString(16);  
32     document.getElementById("mybody").style.backgroundColor=myModel;  
33   
34     
35     time = Math.random()*3*1000;
36    setTimeout(changeColor,time) ;//定时函数
37    lasttime = new Date();
38    
39   
40 }   
41 
42 setTimeout(changeColor,3000);

css代码

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