脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • await Streaking解决原理示例详解

    await Streaking解决原理示例详解

    这篇文章主要为大家介绍了await Streaking解决原理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • 详细分析JavaScript中的深浅拷贝

    详细分析JavaScript中的深浅拷贝

    这篇文章主要介绍了JavaScript中的深浅拷贝，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下
    2020-09-09
  • JS中实现replaceAll的方法(实例代码)

    JS中实现replaceAll的方法(实例代码)

    本文是对JS中实现replaceAll的方法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • JavaScript数字数组的13个实用小技巧

    JavaScript数字数组的13个实用小技巧

    数组是JS最常见的一种数据结构,咱们在开发中也经常用到,在这篇文章中,提供一些小技巧,帮助咱们提高开发效率,这篇文章主要给大家分享介绍了关于JavaScript数字数组的13个实用小技巧,需要的朋友可以参考下
    2023-11-11
  • 利用CSS、JavaScript及Ajax实现图片预加载的方法

    利用CSS、JavaScript及Ajax实现图片预加载的方法

    预加载图片是提高用户体验的一个很好方法，实现图片预加载可以使用css、JavaScript、Ajax三种方法。下面逐一给大家介绍利用CSS、JavaScript及Ajax实现图片预加载的方法，需要的朋友参考下吧
    2016-11-11
  • 一文搞懂V8引擎的垃圾回收机制

    一文搞懂V8引擎的垃圾回收机制

    我们平时在写代码的过程中，好像很少需要自己手动进行垃圾回收，那么V8是如何来减少内存占用，从而避免内存溢出而导致程序崩溃的情况的，为了更高效地回收垃圾，V8引入了两个垃圾回收器，它们分别针对不同场景进行工作
    2023-06-06
  • JavaScript作用域与作用域链使用重点讲解

    JavaScript作用域与作用域链使用重点讲解

    当代码在一个环境中执行时,会创建变量对象的一个作用域链,作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问,下面这篇文章主要给大家介绍了关于JavaScript作用域与作用域链的相关资料,需要的朋友可以参考下
    2022-10-10
  • 初识javascript 文档碎片

    初识javascript 文档碎片

    今天遇到一个问题: 我通过 ajax 取回另一个页面的 Html 。但这些 HTML 我不想直接输出，想通过　getElementsByName　处理后再输出相应的内容。用原生的 javascript怎样可以处理呢？
    2010-07-07
  • js 获取元素所有兄弟节点的实现方法

    js 获取元素所有兄弟节点的实现方法

    下面小编就为大家带来一篇js 获取元素所有兄弟节点的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • JavaScript对象数组排序实例方法浅析

    JavaScript对象数组排序实例方法浅析

    这篇文章主要介绍了JavaScript对象数组排序实例方法浅析的相关资料，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-06-06

最新评论