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

1.页面布局代码如下：

div div id=' char ' a/div div id=' result '请按下屏幕上显示的单词/div/div2上的键。页面布局的样式代码如下：

正文{ margin : 0；/*打开灵活布局，水平和垂直对齐灵活布局中的子元素*/display : flex；/*用于设置或检索弹性盒元件在主轴(水平轴)方向上的对齐方式)*/alize-content : center；align-items:居中；/*文本居中*/text-align:居中；/*设置背景色的图像渐变*/background:径向-渐变(圆形，# 444，# 000，# 000)；} # char { font-size : 400 px；color:浅绿色；/*设置文字阴影*//*位置可以为负*//*文字-阴影：水平位置垂直位置模糊距离阴影颜色*/文字-阴影： 0 0 50px # 666；} #结果{ font-size : 20px；color: # 888}/*找到id为char、类名为error */# char . error { color : red；}3.声明变量接收参数

//保存65到90之间的任意随机整数var代码；//表示var okCount=0的正确次数；//错误数var error count=0；//获取显示字符的div var charbox=document . getelementbyid(' char ')；//获取divvar结果=文档。显示结果的getelementbyid(' result ')；4.编写show()方法获取A和z之间的任意字符。

函数show() {//获取一个介于[0，1]之间的随机数var rand=math . random()；////得到一个0到26之间的随机数(不含26)码=rand * 26////Math.floor(a)向下舍入数字a，得到小于或等于a的最近整数////得到0到25之间的任意整数code=math . floor(code)；////获取任意整数代码=65到90之间的代码65；//将Unicode十进制代码转换为相应的字符//获取A~Z var char=string的任意字符。fromcharcode(代码)；console . log(char)；//在界面上显示字符charBox.innerHTML=char} show()；//调用方法5。键盘按压事件

window . onkeydown=function(ev){//获取该键对应的Unicode十进制码var key=ev . key code；//如果(key==code) {//按键正确，正确的数字为1 okCount，则判断按键字母对应的数字是否等于随机获取的数字；//按键正确后，新字符show()将再次显示。//添加正确的动画通过js将类名charbox . name‘’动画放大’添加到div} else {//button错误，错误号1 errorCount//添加动画charbox。错误的按键会导致“动画抖动错误”;} show result()；//0.5秒后清除，设置动画输出(clearAnimated，500)；//红色消失}6。负责清除动画的方法

函数clearanid(){ charbox . class name=' '；}7.显示计算结果

函数showResult(){ var rate=100 * okCount/(okCount error count)；//显示正确的错误数量和正确率。result . innerhtml=' correct ' okCount ' ' error count ' '正确率. tofixed(2)' % '；//toFixed(2)保留两位小数}8。翻译

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。