显示随机键盘
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="utf-8"> 5 <title>7-77 课堂演示</title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 <style type="text/css"> 8 input{ 9 width: 30px; 10 height: 30px; 11 border-radius: 20px; 12 margin: 2px; 13 outline: none; 14 } 15 .div{ 16 width: 120px; 17 height: 150px; 18 padding: 10px; 19 text-align: center; 20 background: rgba(180,90,30,0.3); 21 border:2px solid orange; 22 } 23 .inp{ 24 width: 130px; 25 height: 20px; 26 } 27 .clear,.new{ 28 width: 60px; 29 font-size: 12px; 30 } 31 </style> 32 </head> 33 <body> 34 <input type="text" class="inp" id="txt"><br> 35 <input type="button" class="clear" value="清楚" onclick="clearnum()"> 36 <input type="button" class="new" value="重置键盘" onclick="cz()"> 37 <div id="div1" class="div"></div> 38 <script> 39 var txt=document.getElementById('txt') 40 var div1=document.getElementById('div1') 41 //生成随机数 42 function getRandom(){ 43 var num=[0,1,2,3,4,5,6,7,8,9] 44 var Rans=[] 45 for(var i=0;i<10;i++){ 46 var n=Math.floor(Math.random()*(10-i)); 47 Rans.push(num[n]) 48 num.splice(n,1) //删除num数组中下标为n的元素，保证不会出现重复数字 49 } 50 return Rans; 51 } 52 53 // alert(getRandom()) 54 55 //创建随机按钮 56 function creatKey(){ 57 var ranArr=getRandom() 58 var btnArr=[]; 59 for(var i=0;i<ranArr.length;i++){ 60 var btn=document.createElement('input'); 61 btn.setAttribute('type','button') 62 btn.value=ranArr[i]; 63 btn.onclick=btnClick; 64 btnArr.push(btn) 65 div1.appendChild(btn) 66 67 } 68 } 69 70 creatKey() 71 72 function btnClick(){ 73 txt.value+=this.value //这里this就是调用这个函数的对象 74 } 75 76 function clearnum(){ 77 txt.value=''; 78 } 79 function cz(){ 80 window.location.reload(); 81 } 82 </script> 83 </body> 84 </html>