js实现模拟计算器退格键删除文字效果的方法
本文实例讲述了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白色简洁计算器
本文中计算器代码很简单,你可以很容易把该网页特效应用到你的项目中. HTML 首先我们在网页上放置一个输入框及多个计算器按钮. <div id="calcuator"> <input type="text" id="input-box" value="0" size="21" maxlength="21" readonly="readonly" /&
-
简易js代码实现计算器操作
复制代码 代码如下: <html> <head> <title>JS版计算器</title> <link rel="stylesheet" type="text/css" href=""> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <!--
-
JSP实现计算器功能（网页版）
jsp实现网页计算器代码如下:只有两个jsp页面 myCal.jsp如下: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getS
-
基于JSP实现一个简单计算器的方法
本文实例讲述了基于JSP实现一个简单计算器的方法.分享给大家供大家参考.具体实现方法如下: index.jsp 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="GB18030"%> <% String path = request.getContextPath(); String basePath = request.getSch
-
用js编写的简单的计算器代码程序
最近编写的一个简单的计算器代码程序,先给大家展示一下 分享代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta htt
-
javascript实现简易计算器的代码
今天闲来无聊,想写点什么,突然想到用javascript写一个计算器.程序还存在很多的Bug,先在这里记录一下,以后慢慢更正. 代码如下: <!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.or
-
用JS写的简单的计算器实现代码
1.本页效果图片 2.美化后的效果 Array.prototype.remove=function(index) { if(isNaN(index)||index>this.length){return false;} for(var i=0,n=0;i 0){ del = 1; this.tmp = this.register[0]; } if(_sign == '-'){ this.tmp = -this.tmp; }else{ this.tmp = Math.abs(this.
-
JS实现的简单四则运算计算器功能示例
本文实例讲述了JS实现的简单四则运算计算器功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <meta name="content-type" content="text/html; charset=UTF-8"> <head> <title>www.jb51.net 计算器 Calculator</title> <!
-
javascript简单计算器 可美化
JS计算器代码: javascript简单计算器 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 说明: JavaScript eval() 函数 定义和用法 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 返回值 通过计算 string 得到的值(如果有的话). 说明 该方法只接受原始字符串作为参数,如果 string 参数不是原始字符串,那么该方法将不作任何改变地返回.因此请不要为 eval() 函数传递 String 对象来作为参数. 如果试图
-
javascript-简单的计算器实现步骤分解(附图)
知识点: 1.数学运算"+,-,*,/"的使用 2.输入内容的判断,对于事件对象的来源的判断 效果: 代码: 复制代码 代码如下: <style> #calculate { line-height: 60px; text-align: center; background: #ccc; font-size: 16px; font-weight: bold; } #calculate tbody input{ width: 100%; height: 60px; back
-
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=&