zoukankan      html  css  js  c++  java
  • 测试反应能力的小代码!(娱乐)

    <%@ 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{
      100%;/* 配合垂直居中3 */
     height: 100%;/* 配合垂直居中4 */
     margin: 0;/* 防止出现小幅度的滚动栏 */
     padding: 0;/* 防止出现小幅度的滚动栏 */
    }
    #mybody{
     background-color: red;
      300px;
     height: 350px;
     /*问题:布局的居中,内容的居中*/
     /* 布局的居中1,水平 */
     margin: 0 auto;
     /* 配合垂直居中1 *position: relative;/
     /* 配合垂直居中2 * top:20%;/
     /* 内容的居中 */
     text-align: center;/* 内容的水平居中 */
     line-height: 350px;/* 内容的垂直居中 */
    }
    #myBtn{
     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:' 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>

  • 相关阅读:
    A Node Influence Based Label Propagation Algorithm for Community detection in networks 文章算法实现的疑问
    Fast Newman-FN算法以及模块度定义介绍
    Label Propagation Algorithm LPA 标签传播算法解析及matlab代码实现
    设计一个smartnic
    Intel GEN11 GPU
    Intel GEN9 GPU
    Shared Virtual Memory (SVM) Functions
    connect via ssh to virtualbox guest vm without knowing ip address
    smartnic
    技术精品翻译
  • 原文地址:https://www.cnblogs.com/Zbaozi/p/7987920.html
Copyright © 2011-2022 走看看