用JavaScript编写网页-反应测试

制作工具: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就出现*/

画面效果
这里写图片描述

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页