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程序设计有所帮助。
热门推荐
10 诗词送行祝福语大全简短
11 新房开工吉日祝福语简短
12 50多岁生日简短祝福语
13 安徽疫情祝福语简短英语
14 农民朋友发财祝福语简短
15 对生活祝福语简短精辟
16 搬家词简短祝福语朋友
17 女神结婚快乐祝福语简短
18 文学短句祝福语大全简短