Vue.js小游戏：测试CF打狙速度

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

html代码

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

js代码

//定义一个全局变量，用于记录上一次执行的时间
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('你反应速度：'+dif+',你睡着了吗？');
            }
        }
    }
});
function changeBgColor(){
    myModel.bgcolor= 'rgb' + '(' + Math.ceil(Math.random() * 245) + ',' + Math.ceil(Math.random() * 245) + ',' + Math.ceil(Math.random() * 245) + ')';
    //这是,最小极限为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);

css代码

html,body{
    width: 100%;/* 配合垂直居中3 */
    height: 100%;/* 配合垂直居中4 */
    margin: 0;/* 防止出现小幅度的滚动栏 */
    padding: 0;/* 防止出现小幅度的滚动栏 */
}
#top{
    text-align: center;
    color:red;
    font-size:30px;
    display:block;
    margin:20px auto;
}
#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;
    color:#FFF;
    background-color: blue;
    text-align: center;/* 内容的水平居中 */
    line-height: 100px;/* 内容的垂直居中 */
    
}