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 相关文章推荐
游戏人文件夹程序 ver 3.0
Jul 14 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
JS常用正则表达式总结
Nov 12 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
浅谈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
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
PHP实现的简单日历类
2014/11/29 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
php中使用GD库做验证码
2016/03/31 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
javascript函数自动执行常用方法汇总
2016/03/28 Javascript
json的使用小结
2016/06/08 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python学习笔记之常用函数及说明
2014/05/23 Python
Python3.6正式版新特性预览
2016/12/15 Python
python3中str(字符串)的使用教程
2017/03/23 Python
python3实现基于用户的协同过滤
2018/05/31 Python
Django中的Model操作表的实现
2018/07/24 Python
Numpy之random函数使用学习
2019/01/29 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
安全教育演讲稿
2014/05/09 职场文书
房屋过户委托书范本
2014/10/07 职场文书