测试反应能力的小代码！（娱乐）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/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;/* 内容的垂直居中 */

}
</style>
</head>
<body>
<div id="mybody" v-bind:style="{backgroundColor:bgcolor}">
<div id="myBtn" v-on:click="myclick">点我</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//把style当成是一个字符串来操作是可以的，但是非常不方便更改
//任何赋值，都需要对整个style进行修改
//var myModel={myStyle:‘width: 200px;height: 50px;background-color: red‘}
//定义一个全局变量，用于记录上一次执行的时间
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 changeBgColor(){
if(myModel.bgcolor==‘green‘){
  myModel.bgcolor=‘red‘;
}else{
  myModel.bgcolor=‘green‘;
}
//这是,最小极限为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);
</script>
</html>

时间： 2024-11-08 21:43:44

测试反应能力的小代码！（娱乐）

测试反应能力的小代码！（娱乐）的相关文章

测试新浪微博@小冰为代码机器人的一些方法

易于跨引擎和测试的游戏客户端代码设计方法

iOS开发中一些有用的小代码

【processing】小代码

用 console.time()和 console.timeEnd() 测试你的 javascript 代码执行效率

Js 常用小代码

小代码   密码转置 **级     复习aito ASCII 码值

一段小代码说明@property装饰器的用法

JavaScript自己模仿jQuery的一点小代码