显示随机键盘

显示随机键盘_css

显示随机键盘_css_02

 

 显示随机键盘_人工智能_03

 



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>