基于HTML和JavaScript的灵敏度测试

最新推荐文章于 2024-05-17 13:52:13 发布

爱敲代码的小菜鸡

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量391

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_50972467/article/details/118250869

版权

通过HTML和CSS进行页面布局，设置页面的背景及其颜色调整

<head>
    <meta charset="UTF-8">
    <title>小挑战</title>
</head>
<style>
    #button {
        background-color: green;
    }
    #body{
        background:url("img/background.png") no-repeat;
        background-size: 100%;
    }
</style>
<body id="body">
<h1 align="center">测测你的灵敏度</h1>     <!--标题-->
<h2 align="center">使用说明;点击绿色按钮开始测试，开始之后请在出现蓝色三角形时敲击键盘上的除空格和回车的任意一个按键进行测试和计数</h2>

<div align="center"><input id="input" placeholder="请输入你的名字"></div>
<table align="center">  <!--使用一个table标签进行布局控制-->
    <tr>
        <td style="visibility: hidden" id="redSquare"><img src="img/红色正方形.png"></td>
        <td style="visibility: hidden" id="blueTrigon"><img src="img/蓝色三角形.png"></td>
    </tr>

</table>

<div align="center">
    <button id="button">开始</button>
</div>

JavaScript部分代码

<script>
    var square = document.getElementById("redSquare");  //获取红色正方形图片的对象
    var trigon = document.getElementById("blueTrigon"); //获取蓝色三角形图片的对象
    var button = document.getElementById("button");     //获取按钮对象
    var body = document.getElementById("body");         //获取body对象
    var input = document.getElementById("input");       //获取到文本输入框的对象

    var count = 0;        //计数，统计蓝色三角形出现的次数
    var num = 0;          //计数，统计用户敲击键盘的次数

    var id; //定义一个变量，用来标记循环定时器
    function challenge() {
        id = setInterval(function () {
            var number = parseInt(10 * Math.random());    //生成一个0-10之间的随机整数
            if (number >= 5) {
                showSquare();
                hiddenSquare()
            } else {
                showTrigon();
                hiddenTrigon();
            }
        }, 1000);
    }

    //让蓝色三角形在200毫秒后隐藏
    function hiddenTrigon() {

        setTimeout(function () {
            trigon.style.visibility = "hidden";
        }, 80);
    }

    //让红色矩形在980毫秒后隐藏
    function hiddenSquare() {
        setTimeout(function () {
            square.style.visibility = "hidden";
        }, 980);
    }

    //等待20毫秒，之后让红色正方形显示
    function showSquare() {
        setTimeout(function () {
            square.style.visibility = "visible";
        }, 20)
    }

    //等待20毫秒，之后让蓝色三角形显示
    function showTrigon() {
        setTimeout(function () {
            trigon.style.visibility = "visible";
        }, 20)
        count = count + 1;  //蓝色三角形出现的次数+1
        body.onkeydown = function () {  //对整个页面监听键盘的敲击事件，如果敲下了，记录此时+1
            num = num + 1;
        };
    }

    var flag = true;    //设置一个标记位，记录按钮的状态
    button.onclick = function () {
        if (flag) {      //如果按钮是绿色的，按一下变红并且将按钮的文本值设置为“正在运行”
            this.style.backgroundColor = "red";
            this.innerText = "正在运行";
            flag = false;
            challenge();    //调用交换显示图片的方法
        } else {    //如果按钮是红色的，按一下变绿并且将按钮的文本值设置为"点我开始"
            clearInterval(id);//结束循环定时器
            this.style.backgroundColor = 'green';
            this.innerText = "点我开始";
            alert("尊敬的" + input.value + "用户,蓝色方框共出来" + count + "次，你按下了" + num + "次");
            count = 0;//让蓝色三角形出现的次数变为0
            num = 0;//让用户敲击键盘的次数变为0
            flag = true;
        }
    };
</script>

通过JavaScript获取到按钮对象，并进行事件监听以实现按钮颜色和文字的改变，再通过一次性定时器和循环定时器进行时间设置，交替展示图片。

运行结果展示

爱敲代码的小菜鸡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
基于HTML和JavaScript的灵敏度测试

通过HTML和CSS进行页面布局，设置页面的背景及其颜色调整<head> <meta charset="UTF-8"> <title>小挑战</title></head><style> #button { background-color: green; } #body{ background:url("img/background.png...
复制链接

扫一扫