JavaScript实现单英文金山打字通


Posted in Javascript onJuly 24, 2020

单英文的金山打字通的具体实现代码,供大家参考,具体内容如下

1、页面的布局代码如下:

<div> 
 <div id="char">A</div>
 <div id="result">请在按键上按下屏幕上显示的字</div>
</div>

2、页面布局的样式代码如下:

body{
 margin: 0;
 /*开启弹性布局,并让弹性布局中的子元素
 水平居中对齐,垂直居中对齐*/
 display: flex;
 /* 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式 */
 justify-content: center;
 align-items: center;
 /*文字居中*/
 text-align: center;
 /*设置背景颜色的经像渐变*/
 background: radial-gradient(circle,#444,#000,#000);
 }
 #char{
 font-size: 400px;
 color: lightgreen;
 /*设置文字阴影*/  
 /*位置可以为负值*/
 /*text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色*/
 text-shadow: 0 0 50px #666;
 }
 #result{
 font-size: 20px;
 color: #888;
 }
 /*找到id为char及类名为error的div元素*/
 #char.error{
 color: red; 
 }

3、声明变量接收参数

//来保存65~90之间的任意一个随机整数
 var code;
//表示正确的次数
 var okCount = 0;
//错误的次数
 var errorCount = 0;
//获取显示字符的div
 var charBox = document.getElementById('char');
//获取显示结果的div
 var result = document.getElementById('result');

4、写show()方法获取A~Z之间的任意一个字符

function show() {
 //获取[0,1)之间的一个随机数
 var rand = Math.random();
 // //获取一个0到26之间的一个随机数(不包含26)
 code = rand * 26;
 // //Math.floor(a)对数字a向下取整,获取到一个小于等于a最近的整数
 // //获取0~25之间任意一个整数
 code = Math.floor(code);
 // //获取到65~90之间的任意整数
 code = code + 65;

 //把Unicode的十进制编码转化成对应的字符
 //获取A~Z的任意一个字符
 var char = String.fromCharCode(code);
 console.log(char);
 //把字符显示在界面上
 charBox.innerHTML = char;
 }
 show();//调用方法

5、键盘按下来的事件

window.onkeydown = function (ev) {
 //获取按键所对应的Unicode十进制编码
 var key = ev.keyCode;
 //判断按键字母所对应的数字和随机获取的数字是否相等
 if (key == code) {
 //按键正确,正确次数+1
 okCount++;
 //当按键正确时,重新显示新的字符
 show();
 //添加正确的动画 通过js给div添加类名
 charBox.className = 'animated zoomIn';
 } else {
 //按键错误,错误次数+1
 errorCount++;
 //添加按键错误的动画
 charBox.className = 'animated shake error';
 }
 showResult();
 //0.5秒之后清除,动画
 setTimeout(clearAnimated, 500);//红色颜色消失
}

6、负责清除动画的方法

function clearAnimated() { 
 charBox.className = '';
}

7、展示计算的结果

function showResult() {
 var rate = 100 * okCount / (okCount + errorCount);
 //显示正确个数 错误个数 及正确率
 result.innerHTML = '正确' + okCount + '个' + '错误' + errorCount + '个'
 + '正确率' + rate.toFixed(2) + '%';//toFixed(2)保留两位小数
 }

8、效果图

JavaScript实现单英文金山打字通

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 Javascript
javascript实现导航栏分页效果
Jun 27 #Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 #Javascript
原生js实现抽奖小游戏
Jun 27 #Javascript
JavaScript实现图片放大镜效果
Jun 27 #Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 #Javascript
微信小程序自定义组件实现环形进度条
Nov 17 #Javascript
vue + typescript + 极验登录验证的实现方法
Jun 27 #Javascript
You might like
php对大文件进行读取操作的实现代码
2013/01/23 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
python实现人人网登录示例分享
2014/01/19 Python
Python聊天室实例程序分享
2016/01/05 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
Python: 传递列表副本方式
2019/12/19 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
一年级班主任寄语
2014/01/19 职场文书
毕业生自我鉴定实例
2014/01/21 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL