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宝典学习笔记
Feb 07 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
详解react、redux、react-redux之间的关系
Apr 11 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 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+mysql一个名片库程序
2006/10/09 PHP
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
探讨jQuery的ajax使用场景(c#)
2013/12/03 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
解决Python使用列表副本的问题
2019/12/19 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
python logging模块的使用
2020/09/07 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
Python如何实现单例模式
2016/06/03 面试题
工作自我评价分享
2013/12/01 职场文书
《小草和大树》教学反思
2014/02/16 职场文书
洗发水广告词
2014/03/13 职场文书
一体化教学实施方案
2014/05/10 职场文书
淘宝店策划方案
2014/06/07 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android