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


Posted in Javascript onMay 07, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
Jquery 表格合并的问题分享
Sep 17 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
JS中async/await实现异步调用的方法
Aug 28 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
浅谈document.write()输出样式
May 07 #Javascript
js库Modernizr的介绍和使用
May 07 #Javascript
详谈LABJS按需动态加载js文件
May 07 #Javascript
JavaScript改变CSS样式的方法汇总
May 07 #Javascript
js实现非常简单的焦点图切换特效实例
May 07 #Javascript
jQuery中closest和parents的区别分析
May 07 #Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
May 07 #Javascript
You might like
Adodb的十个实例(清晰版)
2006/12/31 PHP
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
php浏览历史记录的方法
2015/03/10 PHP
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
Node.js模块加载详解
2014/08/16 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
angularjs指令之绑定策略(@、=、&amp;)
2017/04/13 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
Python中常用的内置方法
2019/01/28 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
物流创业计划书
2014/02/01 职场文书
优秀管理者事迹材料
2014/05/22 职场文书
公司应聘求职信
2014/06/21 职场文书
教师批评与自我批评
2014/10/15 职场文书
医生个人年终总结
2015/02/28 职场文书
辞职信范文大全
2015/03/02 职场文书
用python实现监控视频人数统计
2021/05/21 Python
python自动化测试通过日志3分钟定位bug
2021/11/20 Python