SOURCE

console 命令行工具 X clear

                    
>
console
$(function () {

    $('#start').blur(function () {

        var _tartget = $('#start').val();
        var _targetArray = _tartget.split("");
        $("#target").empty();
        for (var i = 0; i < _targetArray.length; i++) {
             $("#target").append("<span>"+_targetArray[i]+"</span>"); 
        }
    });
    
    $('#write').keyup(function () {
       
       var _w = $('#write').val();
        var _wArray = _w.split("");

        var _spanArray=$('');
        for (var i = 0; i < _wArray.length; i++) {
          var _t=  $('#target > span:nth-child('+(i+1)+')').text(); 
          if(_t==_wArray[i])
          {
              $('#target > span:nth-child('+(i+1)+')').css('color','blue');

          }
          else
          {
               $('#target > span:nth-child('+(i+1)+')').css('color','red');
          }
        }

    });
})

 
<html>
    <head>
        <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    </head>
    <form>
            
            <input value="" id="start" placeholder="目标"/>
            
            <div id="target">

            </div>

            <input value="" id="write" value="" placeholder="输入"/>
    </form>
    <script>
     
     </script>
</html>

本项目引用的自定义外部资源