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 相关文章推荐
用JavaScript获取网页中的js、css、Flash等文件
Dec 20 Javascript
JS查看对象功能代码
Apr 25 Javascript
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
Apr 15 Javascript
javascript arguments 传递给函数的隐含参数
Aug 21 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
使用js实现关闭js弹出层的窗口
Feb 10 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
javascript遍历对象的五种方式实例代码
Oct 24 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抽象类使用要点与注意事项分析
2015/02/09 PHP
php利用反射实现插件机制的方法
2015/03/14 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
php7性能提升的原因详解
2019/10/13 PHP
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
python3.3实现乘法表示例
2014/02/07 Python
python基础教程之面向对象的一些概念
2014/08/29 Python
Python专用方法与迭代机制实例分析
2014/09/15 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
python实现ID3决策树算法
2017/12/20 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
测绘工程个人的自我评价
2013/11/10 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
社区春季防火方案
2014/06/02 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers