一个利用随机颜色切换测试你单击鼠标的反应能力
//这是以下代码运行后效果的链接地址：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 }
