-- 创造无限可能

js:打字游戏

2023-06-10 16:49:54
457 人浏览 0 人点赞
有用,点赞支持一下

流程

  1. 定义一个变量,存储英文字符串
  2. 获取用户输入字符,和当前需要对比的字符匹配
  3. 修改已匹配的文字颜色

    js 代码

    定义一个变量,存储英文字符串
     var str="......"
    
    获取字符串排序
     var currentIndex=0
    
    让字符串为空
     let strShow=""
    
    循环
     for(let i = 0;i < str.length; i ++){
     strShow += "<span id='chat_" + i +"'>" + str[i] + "</span>"
     }
    
    显示字符串长度
     document.setElementById("content").innerHTML=strShow
    
    获取字符串长度
     document.setElementById("total").innerHTML=(str.length)
    
    用户输入为空
     var userInput=""
    
    获取用户输入
     document.onkeydown = function(envent){
         var e = event || windown.event;
         //获取用户输入字符
         let value = e.key
         //和当前的字符匹配是否相等
         userInput = userInput + str[currentIndex]
         //显示用户完整输入
         document.getElementById("userInput").innerHTMl=userInput
         //用户输入字符,字符串改变颜色
         document.getElementById("chat_" + currentIndex).classList.add('red')
         //自增,设置下一个需要匹配的索引
         currentIndex ++
     }