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 相关文章推荐
js 操作符实例代码
Oct 24 Javascript
JavaScript中的View-Model使用介绍
Aug 11 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
Vue 子组件与数据传递问题及注意事项
Jul 11 Javascript
JavaScript 面向对象基础简单示例
Oct 02 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
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
php中数据库连接方式pdo和mysqli对比分析
2015/02/25 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
nodejs实用示例 缩址还原
2010/12/28 NodeJs
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
JavaScript享元模式原理与用法实例详解
2020/03/09 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
python全栈知识点总结
2019/07/01 Python
python中类的输出或类的实例输出为这种形式的原因
2019/08/12 Python
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
医药工作者的求职信范文
2013/09/21 职场文书
建筑工程专业学生的自我评价
2013/12/25 职场文书
创业计划书——互联网商机
2014/01/12 职场文书
大学考试作弊检讨书
2014/01/30 职场文书
个人作风剖析材料
2014/02/02 职场文书
设计师求职信模板
2014/05/06 职场文书
作文评语怎么写
2014/12/25 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
Python使用openpyxl批量处理数据
2021/06/23 Python
idea下配置tomcat避坑详解
2022/04/12 Servers