//这是以下代码运行后效果的链接地址：http://aaaaaaaaa.duapp.com/
html代码
1 2 <div id="mybody"> 3 <div id="myBtn" v-on:click="myclick">点我变色</div> 4 </div>
js代码
//还需导入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 }