<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机键盘</title>
<style type="text/css">
input{
30px;
height: 30px;
border-radius: 20px;
margin: 2px;
outline: none;
}
.div{
120px;
height: 150px;
padding: 10px;
text-align: center;
background: rgba(180,90,30,0.3);
border: 2px solid orange;
}
.inp{
130px;
height: 20px;
}
.clear,.new{
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>
html5 javascript 事件练习3随机键盘
天道酬勤，厚积薄发。
君子之行，静以修身，俭以养德。
非淡泊无以明志，非宁静无以致远。
如有恒，何须三更起，半夜眠；最怕莫，三天打鱼两天晒网，竹篮打水一场空。