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

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

html代码

 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();
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 changeColor(){  
    var red = Math.ceil(Math.random()*255);  
    var green = Math.ceil(Math.random()*255);  
    var blue = Math.ceil(Math.random()*255);  
    myModel = "#"+red.toString(16)+green.toString(16)+blue.toString(16);  
    document.getElementById("mybody").style.backgroundColor=myModel;  
  
    
    time = Math.random()*3*1000;
   setTimeout(changeColor,time) ;//定时函数
   lasttime = new Date();
   
  
}   

setTimeout(changeColor,3000);

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;/* 内容的垂直居中 */
    
}