脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js模拟计算器退格键删除文字效果

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

 更新时间：2015年05月07日 15:02:58   投稿：shichen2014  
这篇文章主要介绍了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>

希望本文所述对大家的javascript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • JS发起HTTP请求的多种方式总结

    JS发起HTTP请求的多种方式总结

    这篇文章主要为大家详细介绍了JavaScript发起HTTP请求的多种方式,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-11-11
  • 微信小程序实现红包功能（后端PHP实现逻辑）

    微信小程序实现红包功能（后端PHP实现逻辑）

    这篇文章主要为大家详细介绍了微信小程序实现红包功能，以及后端PHP实现逻辑，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-07-07
  • JavaScript的Number对象的toString()方法

    JavaScript的Number对象的toString()方法

    toString()方法可以把Number对象转换成字符串，并返回此字符串，本文给大家介绍JavaScript的Number对象的toString()方法，对javascript对象方法相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • webpack打包后index.html引用文件地址问题小结

    webpack打包后index.html引用文件地址问题小结

    在前端开发中,src 属性指定的相对路径是相对于当前 HTML 文件的路径,而不是相对于网站的根目录,这篇文章主要介绍了webpack打包后index.html引用文件地址问题,需要的朋友可以参考下
    2024-05-05
  • JS获取页面input控件中所有text控件并追加样式属性

    JS获取页面input控件中所有text控件并追加样式属性

    使用jquery来在页面加载时获取页面input控件中所有text控件并添加样式,由于其他方式比较麻烦所以就想通过在页面加载的时候将要改动的text找到并添加属性，感兴趣的你可以参考下，希望可以帮助到你
    2013-02-02
  • js实现随机数小游戏

    js实现随机数小游戏

    这篇文章主要为大家详细介绍了js实现随机数小游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-06-06
  • 判断iframe里的页面是否加载完成

    判断iframe里的页面是否加载完成

    这篇文章主要介绍了通过js来判断iframe里的页面是否加载完成,需要的朋友可以参考下
    2014-06-06
  • Javascript获取数组中的最大值和最小值的方法汇总

    Javascript获取数组中的最大值和最小值的方法汇总

    比较数组中数值的大小是比较常见的操作，下面同本文给大家分享四种放哪广发获取数组中最大值和最小值，对此感兴趣的朋友一起学习吧
    2016-01-01
  • 纯js和css完成贪吃蛇小游戏demo

    纯js和css完成贪吃蛇小游戏demo

    这篇文章主要为大家详细介绍了纯js和css完成贪吃蛇小游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • JS中比较冷门但非常好用的方法总结

    JS中比较冷门但非常好用的方法总结

    在Js中有一些比较冷门但是非常好用的方法，我在这里称之为高级方法，这些方法没有被广泛使用或多或少是因为存在一些兼容性的问题，不是所有的浏览器都读得懂的，这篇文章主要就是对这些方法做一个总结，让我们一起来看一下吧
    2023-06-06

最新评论