28,390
社区成员
发帖
与我相关
我的任务
分享
<html>
<head>
<title>点击图片/按钮返回相应的数字</title>
<style type="text/css">
body,input{font-size:12px;}
body{text-align:center;}
#main{border:solid 1px gray;width:400px;padding:10px;margin-top:50px;}
.num{border:solid 1px gray;padding:2px 0 2px 5px;width:154px;height:20px;font-weight:bold;}
.pic{border:solid 1px gray;padding:2px;width:20px;height:20px;cursor:pointer;}
.bds{border:solid 1px gray;padding:2px;width:50px;height:20px;cursor:pointer;}
</style>
<script type="text/javascript">
function _get(obj){document.getElementById("num").value += obj.value;}
function _back(){
var m=document.getElementById("num").value;
if(m.length>=1){document.getElementById("num").value = m.substring(0,m.length-1);}
}
function changebtn(){
var a=document.body;
a.onmouseover=function(){
if(event.srcElement.tagName=="INPUT"){event.srcElement.style.borderColor="red";}}
a.onmouseout=function(){
if(event.srcElement.tagName=="INPUT"){event.srcElement.style.borderColor="";}}
a.onclick=function(){
if(!isNaN(event.srcElement.value)){_get(event.srcElement);}}
}
</script>
</head>
<body>
<div id="main">
请点击下面的图片输入数字: <input type="text" id="num" class="num" readOnly /> <input type="button" class="bds" value=" 查询 " /><br /><br />
<input type="button" class="pic" value="1" />
<input type="button" class="pic" value="2" />
<input type="button" class="pic" value="3" />
<input type="button" class="pic" value="4" />
<input type="button" class="pic" value="5" />
<input type="button" class="pic" value="6" />
<input type="button" class="pic" value="7" />
<input type="button" class="pic" value="8" />
<input type="button" class="pic" value="9" />
<input type="button" class="pic" value="0" />
<input type="button" class="bds" value="←退格" onclick="_back()" />
<input type="button" class="bds" value=" 清除 " onclick="num.value=''" />
</div>
<script type="text/javascript">changebtn();</script>
</body>
</html>