用JavaScript编写网页-反应测试

原创 2018年04月17日 12:13:00

制作工具:FireFox、TextWrangler
类似于打地鼠游戏,图形会在随机位置出现,生成随机的形状和颜色,鼠标点击后消失,会计算出你点击反应的时间

HTML文件代码

<!doctype html>
<html>
<head>
    <title>Learning JavaScript</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        body {
            font-family:Verdana,Geneva,sans-serif;
        }
        #box {
            width:100px;
            height:100px;
            background-color:red;
            display:none;
            position:relative; /*生成相对定位*/
        }
        .bold {
            font-weight:bold;
        }
    </style>
</head>

<body>
    <h1>Test your reaction!</h1>
    <p class="bold">Your Times: <span id="time">0</span>s</p>
    <div id="box"></div>
    <script type="text/javascript" src="script.js"></script> <!--链接外部JS文件 类型 来源-->
</body>
</html>

JS文件代码

function getRandomColor() {  /*生成随机颜色*/
    var color='#';
    var letters='0123456789ABCDEF'.split(''); /*将字符串转换成数组*/
    for(var i=0; i<6; i++) {  /*循环6次*/
        color += letters[Math.floor(Math.random()*16)]; /*得到一个0-16的随机整数*/
        }
        return color;
    }
    /*alert(getRandomColor());*/

    /*alert(Date.now());  /*Date.now() 当前时间,以微秒计算*/
var createdTime;
var clickedTime;
var reactionTime;
function makeBox() {
    var time=Math.random();
    time=time*2000;
    setTimeout(function() {   /*setTimeout(function() {},x) 设定时间间隔为x后执行函数 */
        if(Math.random()>0.5) {  /*设定条件 当大于0.5时执行 让变形随机出现*/
            document.getElementById("box").style.borderRadius="100px"; /*borderRadius圆角化,让box变成圆形*/
        }
        else {
            document.getElementById("box").style.borderRadius="0";  /*box变回原形*/
        }
        var top=Math.random();
        top=top*500;
        var left=Math.random();
        left=left*800;
        document.getElementById("box").style.top=top+"px";
        document.getElementById("box").style.left=left+"px";
        document.getElementById("box").style.backgroundColor=getRandomColor();  /*box生成随机的背景颜色*/
        document.getElementById("box").style.display="block";  /*让box出现 block与none相反*/
        createdTime=Date.now(); /*生成box的时间*/
    },time)   /*,3000表示间隔3s*/
}
document.getElementById("box").onclick=function() {
    this.style.display="none";   /*this可以代表当前操作的对象*/
    clickedTime=Date.now();   /*点击box的时间*/
    reactionTime=(clickedTime-createdTime)/1000; /*计算出间隔时间,/1000转换成秒*/
    document.getElementById("time").innerHTML=reactionTime;
    makeBox(); /*调用makeBox函数,当点击消失后让box再次出现*/
}
makeBox();  /*调用makeBox函数,让一开始box就出现*/

画面效果
这里写图片描述

测试

-
  • 1970年01月01日 08:00

用javascript编写网页版计算器

javascript网页计算器
  • u013558749
  • u013558749
  • 2016-11-02 00:45:50
  • 523

js 实现的测试反应速度的游戏

  • 2008年03月20日 11:04
  • 15KB
  • 下载

网页中点击链接没有反应(无法响应JS请求)

有时候网页中点击链接没有反应,例如登录页面,反复点击登录按钮,页面都没有响应,这种情况通常是javascript的DLL文件出了问题,重新注册一下就可以解决。方法: 开始->运行 输入: reg...
  • vebasan
  • vebasan
  • 2014-08-04 10:23:27
  • 4354

JavaScript测试

登录 注册 商务合作 关于我们 首页 赛事 俱乐部 球员百科 球迷组织 ...
  • lzx1104
  • lzx1104
  • 2014-11-29 12:54:36
  • 429

JavaScript判断输入的数是不是素数

素数测试 function sushu(n){ //if (n==1||n==3) {alert(n+"you are wrong!")} if(n==0||n==1){ ...
  • huochequan888
  • huochequan888
  • 2016-12-17 22:52:27
  • 759

网页用javascript做小游戏

  • 2009年01月05日 23:26
  • 4KB
  • 下载

编写可测试的JavaScript代码

目标:编写整洁、无bug代码,且有充分的文档和注释,能自动化构建,且连续运行所有单元测试和集成测试,并能够生成完整的代码覆盖率报告,自动部署到生产环境。 代码短小、整洁、简单、低耦合。测试:单元测试...
  • znyaiw
  • znyaiw
  • 2017-10-09 23:26:24
  • 191

使用JavaScript在网页上动态显示时钟

Test02.html --> function startTime(){ var today = new Date...
  • Isky110
  • Isky110
  • 2011-11-06 16:04:49
  • 1681

前端初级开发笔试题——用js编写一个时钟实例

一般出题形式是要面试者在html页面中填写js代码,比较钻牛角尖的还必须用原生js写(有些面试官就是这样,认为写原生js显得比较牛一些),本人认为没有多大必要,编程的出现本身就是为了提高效率,有jQu...
  • bboyjoe
  • bboyjoe
  • 2015-09-21 00:30:20
  • 2421
收藏助手
不良信息举报
您举报文章:用JavaScript编写网页-反应测试
举报原因:
原因补充:

(最多只允许输入30个字)