- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 随机键盘 </title>
- <style type="text/CSS">
- input{
- width: 30px;
- height: 30px;
- border-radius: 20px;
- margin: 2px;
- outline: none;
- }
- .div{
- width: 120px;
- height: 150px;
- padding: 10px;
- text-align: center;
- background: rgba(180,90,30,0.3);
- border: 2px solid orange;
- }
- .inp{
- width: 130px;
- height: 20px;
- }
- .clear,.new{
- width: 60px;
- font-size: 12px;
- }
- </style>
- </head>
- <body>
- <input type="text" class="inp" id="txt"><br>
- <input type="button" class="clear" value="清除" onclick="clearnum()">
- <input type="button" class="new" value="重置键盘" onclick="cz()">
- <div id="div1" class="div"></div>
- <script>
- var txt=document.getElementById('txt');
- var div1=document.getElementById('div1');
- function getrandom(){
- var num=[0,1,2,3,4,5,6,7,8,9];
- var rans=[];
- for (var i = 0; i <10; i++) {
- var n=Math.floor(Math.random()*(10-i));
- rans.push(num[n]);
- num.splice(n,1);
- }
- return rans;
- }
- // alert(getrandom());
- function creatkey(){
- var ranarr=getrandom();
- var btnarr=[];
- for (var i = 0; i < ranarr.length; i++) {
- var btn=document.createElement('input');
- btn.setAttribute('type','button');
- btn.value=ranarr[i];
- btn.onclick=btnclick;
- btnarr.push(btn);
- div1.appendChild(btn);
- }
- }
- creatkey();
- function btnclick(){
- txt.value+=this.value;
- }
- function clearnum(){
- txt.value='';
- }
- function cz(){
- window.location.reload();
- }
- </script>
- </body>
- </html>
来源: http://www.bubuko.com/infodetail-2763776.html