1024programmer Java JavaScript implements single-English Kingsoft Typing

JavaScript implements single-English Kingsoft Typing

The specific implementation code of Kingsoft Typing in English is for your reference. The specific content is as follows

1. The page layout code is as follows:

  Please press the word displayed on the screen on the button

2. The style code of the page layout is as follows:

  margin: 0;
  /*Enable flexible layout and make the child elements in the flexible layout
  Horizontal center alignment, vertical center alignment*/
  display: flex;
  /* Used to set or retrieve the alignment of the flexible box element in the main axis (horizontal axis) direction */
  justify-content: center;
  align-items: center;
  /*Center text*/
  text-align: center;
  /*Set the image gradient of the background color*/
  background: radial-gradient(circle,#444,#000,#000);
  font-size: 400px;
  color: lightgreen;
  /*Set text shadow*/
  /*Position can be negative*/
  /*text-shadow: horizontal position vertical position blur distance shadow color*/
  text-shadow: 0 0 50px #666;
  font-size: 20px;
  color: #888;
  /*Find the div element with id char and class name error*/
  color: red;

3. Declare variables to receive parameters

 //To save any random integer between 65~90
  var code;
 //Indicates the correct number of times
  varokCount = 0;
 //Number of errors
  var errorCount = 0;
 //Get the div that displays characters
  var charBox = document.getElementById('char');
 //Get the div that displays the results
  var result = document.getElementById('result');

4. Write the show() method to get any character between A~Z

 function show() {
  //Get a random number between [0,1)
  var rand = Math.random();
  // //Get a random number between 0 and 26 (excluding 26)
  code = rand * 26;
  // //Math.floor(a) rounds down the number a and obtains the nearest integer less than or equal to a
  // //Get any integer between 0 and 25
  code = Math.floor(code);
  // //Get any integer between 65~90
  code = code + 65;

  //Convert Unicode decimal encoding into corresponding characters
  //Get any character from A~Z
  var char = String.fromCharCode(code);
  //Display characters on the interface
  charBox.innerHTML = char;
  show();//Call method

5. Keyboard press event

 window.Onkeydown= function (ev) {
  //Get the Unicode decimal encoding corresponding to the key
  var key = ev.keyCode;
  //Determine whether the number corresponding to the key letter is equal to the randomly obtained number
  if (key == code) {
  //Correct key press, correct number +1
  //When the key is pressed correctly, redisplay the new characters
  //Add the correct animation and add a class name to the div through js
  charBox.className = 'animated zoomIn';
  } else {
  //Key press error, number of errors +1
  //Add keystroke error animation
  charBox.className = 'animated shake error';
  //Clear after 0.5 seconds, animation
  setTimeout(clearAnimated, 500);//The red color disappears

6. Methods responsible for clearing animations

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

7. Display the calculation results

 function showResult() {
  var rate = 100 * okCount / (okCount + errorCount);
  //Display the correct number, incorrect number and accuracy rate
  result.innerHTML = 'Correct' + okCount + 'Person' + 'Error' + errorCount + 'Person'
  + 'Correct rate' + rate.toFixed(2) + '%';//toFixed(2) retains two decimal places

8. Renderings

The above is the entire content of this article. I hope it will be helpful to everyone’s study and I hope you will support me a lot.

This article is from the internet and does not represent1024programmerPosition, please indicate the source when reprinting:https://www.1024programmer.com/714813

author: admin

Previous article
Next article

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

Contact us


Online consultation: QQ交谈

E-mail: [email protected]

Working hours: Monday to Friday, 9:00-17:30, holidays off

Follow wechat
Scan wechat and follow us

Scan wechat and follow us

Follow Weibo
Back to top