<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { display: inline-block; color:green; } span { color: red; } input { display: block; } p i{ color: #000; font-style: normal; } </style> </head> <body> <p></p><span></span> <input type="text"> <script> var p=document.getElementsByTagName('p')[0]; var int=document.getElementsByTagName('input')[0]; var span =document.getElementsByTagName('span')[0]; var i=p.getElementsByTagName('i')[0]; var Arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'g', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']; function fn() { var rd=Arr[Math.floor(Math.random()*26)]; var thiss=rd.toUpperCase().charCodeAt(); span.innerHTML=rd; int.onkeydown=function(event){ if(event.keyCode==thiss){ p.insertAdjacentText("beforeend", rd); fn() } else if (event.keyCode!=thiss&&event.keyCode!=8) { p.insertAdjacentHTML("beforeend", '<i>'+rd+'</i>'); fn() } } } fn() </script> </body> </html>
JS打字通
最新推荐文章于 2024-08-02 23:21:12 发布