测试反应能力的小代码!(娱乐)

Posted 谮包子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了测试反应能力的小代码!(娱乐)相关的知识,希望对你有一定的参考价值。

<%@ 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>

 

以上是关于测试反应能力的小代码!(娱乐)的主要内容,如果未能解决你的问题,请参考以下文章

0代码 实现“嫦娥奔月“小动画,一起来看看这 ‘漂亮‘的嫦娥 吧仅供娱乐

软件测试人员需不需要懂代码

我如何使用蚂蚁设计在反应js的小屏幕上禁用1个选项卡

我写代码时的小倔强

我写代码时的小倔强

测试出生日期的小程序