js实现模拟计算器退格键删除文字效果的方法

2024-05-06 16:19:39

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了js实现模拟计算器退格键删除文字效果的方法,涉及javascript字符串截取操作的相关技巧,需要的朋友可以参考下

本文实例讲述了js实现模拟计算器退格键删除文字效果的方法。分享给大家供大家参考。具体如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="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:2px solid #999;

background:#000; text-align:right;

}

</style>

<script language="javascript" type="text/javascript">

window.onload = function()

{

var tf = $("tf");

for( var i=0;i<11;i++ ){

$("btn"+i).onclick = function(){

if(this.value == "." && tf.value == "") return false;

if(this.value == "." && tf.value.indexOf(".") != -1) return false;

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){return document.getElementById(id);}

</script>

</head>

<body>

<input class="tf" name="textfield" type="text" id="tf" size="30" />

<br />

<input class="myinput" type="submit" name="button" id="btn0" value="0" />

<input class="myinput" type="submit" name="button" id="btn1" value="1" />

<input class="myinput" type="submit" name="button" id="btn2" value="2" />

<br />

<input class="myinput" type="submit" name="button" id="btn3" value="3" />

<input class="myinput" type="submit" name="button" id="btn4" value="4" />

<input class="myinput" type="submit" name="button" id="btn5" value="5" />

<br />

<input class="myinput" type="submit" name="button" id="btn6" value="6" />

<input class="myinput" type="submit" name="button" id="btn7" value="7" />

<input class="myinput" type="submit" name="button" id="btn8" value="8" />

<br />

<input class="myinput" type="submit" name="button" id="btn9" value="9" />

<input class="myinput" type="submit" name="button" id="btn10" value="." />

<input class="myinput" type="submit" name="button" id="back" value="退格" />

</body>

</html>