js实现模拟计算器退格键删除文字效果的方法
本文实例讲述了js实现模拟计算器退格键删除文字效果的方法。分享给大家供大家参考。具体如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<styletype="text/css">
.myinput{
width:70px;height:30px;
}
.tf{
width:220px;height:30px;
margin-bottom:5px;font-size:26px;
font-family:Tahoma,Geneva,sans-serif;
color:#fff;border:2pxsolid#999;
background:#000;text-align:right;
}
</style>
<scriptlanguage="javascript"type="text/javascript">
window.onload=function()
{
vartf=$("tf");
for(vari=0;i<11;i++){
$("btn"+i).onclick=function(){
if(this.value=="."&&tf.value=="")returnfalse;
if(this.value=="."&&tf.value.indexOf(".")!=-1)returnfalse;
if(tf.value=="0"){
if(this.value=="."){
tf.value+=this.value;
}
}else{
tf.value+=this.value;
}
}
}
$("back").onclick=function(){
tf.value=tf.value.replace(/.$/,'')
}
}
function$(id){returndocument.getElementById(id);}
</script>
</head>
<body>
<inputclass="tf"name="textfield"type="text"id="tf"size="30"/>
<br/>
<inputclass="myinput"type="submit"name="button"id="btn0"value="0"/>
<inputclass="myinput"type="submit"name="button"id="btn1"value="1"/>
<inputclass="myinput"type="submit"name="button"id="btn2"value="2"/>
<br/>
<inputclass="myinput"type="submit"name="button"id="btn3"value="3"/>
<inputclass="myinput"type="submit"name="button"id="btn4"value="4"/>
<inputclass="myinput"type="submit"name="button"id="btn5"value="5"/>
<br/>
<inputclass="myinput"type="submit"name="button"id="btn6"value="6"/>
<inputclass="myinput"type="submit"name="button"id="btn7"value="7"/>
<inputclass="myinput"type="submit"name="button"id="btn8"value="8"/>
<br/>
<inputclass="myinput"type="submit"name="button"id="btn9"value="9"/>
<inputclass="myinput"type="submit"name="button"id="btn10"value="."/>
<inputclass="myinput"type="submit"name="button"id="back"value="退格"/>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。