js打字练习回退功能

最新推荐文章于 2023-09-04 10:46:54 发布

qq_41537835

最新推荐文章于 2023-09-04 10:46:54 发布

阅读量208

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_41537835/article/details/93377276

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
	function $(id){
		return document.getElementById(id);
	}
	
	var str="hello,welcome to study center!" //希望练习的内容
	
	window.onload=function(){
		var htmlstr="";
		for(var j=0;j<str.length;j++){
			htmlstr+="<span id='myspan"+j+"'/>"+str.substring(j,j+1)+"</span>";
		}
		$("test").innerHTML=htmlstr;
	}
	
	var i=0; 

	function check(){
		
			
		var e=window.event;
		var keycode=e.keyCode;
		
		//fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个字符串。
		var realkey=String.fromCharCode(keycode+32) ;
		console.log(keycode);
		 
			 if(keycode==188){
				realkey= String.fromCharCode(44);
			 }
		
				if(keycode==8){
				        i--;
					if(i>=0){
						
						$("myspan"+i).className="";
						
					}
				}else{
					
					if(str.substring(i,i+1)==realkey){
						$("myspan"+i).className='style1';
					}else{
						$("myspan"+i).className='style2';
					}
					i++;
				}
			
		 
	
		
	}
</script>
<style>
	.style1{
		color:green;
	}
	
	.style2{
		color:red;
	}
</style>
</head>

<body>
  打字练习：<h2 id="test"></h2>
  <P>键入内容：
    <input name="textfield" type="text" size="50" onKeyDown="check()">
  </P>
</body>
</html>

qq_41537835

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js打字练习回退功能

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script> function $(id){ return document.getElementById(id); } var str="hello...
复制链接

扫一扫