2021-08-07
2024-07-04 07:30:21
测试反应小游戏
用户点击开始按钮进入测试，每当出现蓝色三角形时，快速按下空格键，测试用户反应速度。
1.用户登录页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户信息记录</title><body>
<form action="test.html">
<h2 align="center">个人信息表 </h2><table style="border: 1px;margin: 0 auto;background: snow" width="50%" cellpadding="5" cellspacing="0" ><tr><td style="background: salmon">姓名</td><td><input type="text" style="width:95%"></td><td>年龄</td><td><input type="tel" style="width:95%"></td></tr><tr><td>当前时间：</td><td><div id= "linkweb" style= " display:inline;" ></div></td></tr><tr><td colspan="4" align="right"><input type="submit" value="提交"><input type="reset" value="退出"></td></tr></table>
</form>
</body>
</head></html>
<script>setInterval( "document.getElementById('linkweb').innerHTML=new Date ().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay ());" ,1000);
</script>
2.测试页面
<!DOCTYPE html>
<html οnkeydοwn="record()">
<meta charset="UTF-8"><head><title>测试反应能力</title><style type="text/css">/* 按钮设置*/#div1 {width: 80px;height: 40px;left: 80%;top: 80%;border: #F0FFFF;position: absolute;background-color: #00ff00;}/* 红色正方形*/#div2 {width: 4px;height: 4px;background-color: white;text-align: center;margin: auto;padding-top: 10%;}/* 蓝色三角形*/#div3 {width: 4px;height: 3.5px;background-color: white;text-align: center;margin: auto;display: flex;padding-top: 10%;}</style>
</head><body>
<!-- 按钮 -->
<button id="div1" style="padding-left: 5px; padding-top: 0px" οnclick="btnchange()"> 开始 </button>
<!-- 红色正方形 -->
<div id="div2"><img src="picture/red_square.png" height="200" width="200" />
</div>
<!-- 蓝色三角形 -->
<div id="div3"><img src="picture/blue_triangle.png" height="200" width="280" />
</div>
<div>命中次数：</div>
<div id="result"> </div>
</body></html>
<script language="javascript" type="text/javascript">/*1、首先要有图片、按钮的大小和初始位置2、然后就是获取用户敲击键盘数，并记录次数5、出现蓝色三角形用户敲击空格键3、需要setTimeout()函数设置图片随机显示的时间4、需要Math.random()函数产生随机数*/var num = 0;var t = 0;var r1 = null;var r2 = null;var d2 = document.getElementById("div2");var d3 = document.getElementById("div3");function suiji() {//6min=6*60s=360000ms//6分钟后，测试结束if(t >= 360000) {document.getElementById("result").innerHTML = Math.floor(num);return num;}//使用random随机获取0-1随机整数var random = Math.floor(Math.random() * 3);if(random == 0) {setTimeout(sq, 1000); //显示正方形，持续1st += 1000;} else if(random == 1) {setTimeout(tri, 80); //显示三角形，持续80mst += 80;} else if(random == 2) {setTimeout(null, 20); //显示空白，持续20ms}biaoge();}//显示红色正方形function sq() {d2.style.display = "block";d3.style.display = "none";}//显示蓝色三角形function tri() {d2.style.display = "none";d3.style.display = "block";}//初始状态function first() {d2.style.display = "none";d3.style.display = "none";}//敲击空格键function record() {if(d3.style.display == "block") {num++;}}//点击按钮变色function btnchange() {setTimeout(first); //测试开始，设置为初始状态var button = document.getElementById("div1");button.style.backgroundColor = "red"; //按钮变为红色，开始测试var tab = document.createElement('table');var tr = document.createElement('tr');var th1 = document.createElement('th');th1.innerHTML = '编号';var th2 = document.createElement('th');th2.innerHTML = '出现时间';var th3 = document.createElement('th')th3.innerHTML = '图形';var th4 = document.createElement('th');th4.innerHTML = '击中时间';// 将列添加到行内tr.appendChild(th1);tr.appendChild(th2);tr.appendChild(th3);tr.appendChild(th4);// 将行添加到表格中tab.appendChild(tr);document.body.appendChild(tab);setInterval(function() {let that = thisthat.suiji();}, t);//t秒调用一次suiji方法}function biaoge() {var tab = document.createElement('table');//创建表格对象var num = 1;var date = new Date();var hour = date.getHours();//获取小时var minute = date.getMinutes();//获取分钟var second = date.getSeconds();//获取秒// 添加表格内容var tb_tr1 = document.createElement('tr');//创建行var tr1_td1 = document.createElement('td');//创建列tr1_td1.innerHTML = num;//给列赋值var tr1_td2 = document.createElement('td');tr1_td2.innerHTML = hour + "点" + minute + "分" + second + "秒";var tr1_td3 = document.createElement('td');var tr1_td4 = document.createElement('td');if(d2.style.display == "block") {tr1_td3.innerHTML = "红色正方形";} else if(d3.style.display == "block") {tr1_td3.innerHTML = "蓝色三角形";tr1_td4.innerHTML = hour + "点" + minute + "分" + second + "秒";}//将列添加到行内tb_tr1.appendChild(tr1_td1);tb_tr1.appendChild(tr1_td2);tb_tr1.appendChild(tr1_td3);tb_tr1.appendChild(tr1_td4);//将行添加到表格中tab.appendChild(tb_tr1);// 将表格添加到页面中document.body.appendChild(tab);num++;}
</script>
2021-08-07相关推荐
- Doris Weekly FAQ】2021.07.19~2021.08.01
观众朋友们: 晚上好! 欢迎收看[ Doris 近日要闻]~本次为您带来的是 2021年07月19日 - 2021年08月01日 的双周总结. Doris 社区周报每期会包含 FAQ 环节.我们会在社 ...
- 2021.08.09【普及组】模拟赛C组比赛总结
文章目录 2021.08.09[普及组]模拟赛C组比赛总结 写在前面: T1 :[普及模拟]生产武器 题目大意: 正解: T2 :[普及模拟]城市连接 题目大意: 正解: T3 :[普及模拟]抢救文件 ...
- 《安富莱嵌入式周报》第227期：2021.08.23--2021.08.29
往期周报汇总地址:http://www.armbbs.cn/forum.php?mod=forumdisplay&fid=12&filter=typeid&typeid=104 ...
- 纯Go实现的Firebase的替代品 | Gopher Daily (2021.08.11) ʕ◔ϖ◔ʔ
每日一谚:Global variables should have longer names. Go技术生态 如何才能成功将Python切换到Go - https://itnext.io/opinio ...
- GNSS数据下载网站整理，包括gamit、bernese更新文件地址[2021.08更新]
本人博客园同名原创文章,展示到CSDN供大家参考,转载请声明地址:https://www.cnblogs.com/ydh2017/p/6474654.html 从事GNSS研究的小伙伴大都离不开GNS ...
- 2021年07月-2022年1月币种涨幅跌幅排行
使用OKX永续合约SWAP数据. 分为两个部分 2021年07月15日-2021年11月15日 4个月上涨 2021年11月01日-2022年01月31日 2个月下跌 COIN UHIGH ULOW ...
- 【Yolov5】1.认真总结6000字Yolov5保姆级教程（旧版本2021.08.03作为备份）
旧版本2021.08.03 新版本https://blog.csdn.net/m0_53392188/article/details/119334634 以作备份 目录 一.前言 二.学 ...
- 本博客导读(2021/08/09更新)
文章目录 1. 简介 1.1 博客精神 1.2 写作目的 1.3 技术方向 1.4 博主 1.5 版权说明 2 推荐内容 2.1 主要代表作 2.2 其他推荐内容 3. 程序类 3.1 C#程序设计 ...
- 【2021.08】python会员数据化运营task2
基于RFM的精细化用户管理 1.案例背景 对用户进行分组可以更好的了解用户价值.本案例使用某企业四年的家电订单数据,使用RFM模型对用户进行分组,基于业务部门的用户分群需求,我们计划将RFM的3个维度 ...
- Go 1.17 RC2发布 | Gopher Daily (2021.08.03) ʕ◔ϖ◔ʔ
每日一谚:Package name space is flat Go技术生态 Go 1.17 RC2发布 - https://groups.google.com/g/golang-announce/c ...
最新文章
- 为什么HR 20分钟就淘汰了一个前端高级工程师？
- 一个函数两个return
- CVPR 2018 《Towards High Performance Video Object Detection》论文笔记
- 使用Docker-数据卷挂载案例2
- 个人博客域名迁移说明 www.paincker.com
- 你这么喜欢敲代码，那么技术的乐趣在哪里？
- Deepin安装Curl的方法
- plsql 为空显示 0 的函数_不加班只加薪！从0到1教你制作出入库进销存表格
- u-boot移植随笔：EEPROM移植及测试
- phalapi 数据库锁_phalApi数据库操作
- 简述对linux系统的认识,对Linux的认识
- 计算机管理要继续请输入,若要继续,请键入管理员密码然后单击是问题解决方法...
- ros自己写避障算法_ROS：激光数据转换超声进行避障
- 不安全的文件下载原理
- java ByteBuffer flip()和limit()的理解
- mysql where range_MYSQL explain详解之range
- 网络便签与网络通讯录
- android游戏策划方案,游戏策划案模板.doc
- 教你一秒无插件下载B站/MOOC课视频
- windows server2019共享选项中网络发现无法启用