首页 / JAVASCRIPT / JavaScript计算器网页版实现代码分享

JavaScript计算器网页版实现代码分享

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript计算器网页版实现代码分享，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6289字，纯文字阅读大概需要9分钟。

内容图文

JavaScript网页计算器代码，该计算器是用DW写的！
HTML篇

<html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>计算器</title>
<link href="style/calculator.css" rel="stylesheet" type="text/css" />
<script src="JavaScript/calculator.js"></script>>
</head>

<body >
<form id="form1" name="form1" method="post" action="">
 <table width="320" border="1" cellpadding="0" cellspacing="0" class="trb" id="calculator">
  <tr>
   <td height="100" colspan="4" align="left" valign="top"><label for="txt"></label>
   <input name="txt" type="text" class="txt" id="txt" value="0" onfocus="this.blur();"/></td>
  </tr>
  <tr>
   <td width="80" height="40" align="center" valign="middle" onclick="deleteAll();">C</td>
   <td width="80" height="40" align="center" valign="middle" onclick="Backspace();">←</td>
   <td width="80" height="40" align="center" valign="middle" onclick="sign();">±</td>
   <td width="80" height="40" align="center" valign="middle" class="operator" onclick="add();">＋</td>
  </tr>
  <tr>
   <td width="80" height="40" align="center" valign="middle" onclick="command(7);">7</td>
   <td width="80" height="40" align="center" valign="middle" onclick="command(8);">8</td>
   <td width="80" height="40" align="center" valign="middle" onclick="command(9);">9</td>
   <td width="80" height="40" align="center" valign="middle" class="operator" onclick="subtract();">－</td>
  </tr>
  <tr>
   <td width="80" height="40" align="center" valign="middle" onclick="command(4);">4</td>
   <td width="80" height="40" align="center" valign="middle" onclick="command(5);">5</td>
   <td width="80" height="40" align="center" valign="middle" onclick="command(6);">6</td>
   <td width="80" height="40" align="center" valign="middle" class="operator" onclick="multiply();">×</td>
  </tr>
  <tr>
   <td width="80" height="40" align="center" valign="middle" onclick="command(1);">1</td>
   <td width="80" height="40" align="center" valign="middle" onclick="command(2);">2</td>
   <td width="80" height="40" align="center" valign="middle" onclick="command(3);">3</td>
   <td width="80" height="40" align="center" valign="middle" class="operator" onclick="divide();">÷</td>
  </tr>
  <tr>
   <td width="80" height="40" align="center" valign="middle" onclick="command(0);">0</td>
   <td width="80" height="40" align="center" valign="middle" onclick="dot();">?</td>
   <td height="40" colspan="2" align="center" valign="middle" bgcolor="#CC6600" onclick="equal();">＝</td>
  </tr>
 </table>
 <p> </p>
 <p> </p>
</form>
</body>
</html>

CSS篇

@charset "utf-8";
/* CSS Document */

.trb {
 font-family: Georgia, "Times New Roman", Times, serif;
 font-size: 24px;
 color: #FFF;
 background-color: #333;
 text-align: center;
 border: 1px solid #999;
}
.operator {
 background-color: #333;
 font-size: 18px;
 color: #C60;
 font-family: Verdana, Geneva, sans-serif;
}
td:hover{ 
 font-size: 28px;
 cursor:pointer; 
}
.txt {
 height: 100px;
 width: 320px;
 background-color: #333;
 text-align: left;
 vertical-align: bottom;
 color: #FFF;
 font-size: 30px;
}

JavaScript篇

 //实现计算器功能

//结果
var result = 0;
//显示框中的数（默认为“0”）
var screenNum = "0";
//数的初始输入状态，默认为0；当按了任意运算符键后，数的输入状态变为1
var state = 0;
//防止重复按运算符键
var avoidRepeat = true;
//运算符键（默认为0--等于号）
var operator = 0;

//第一步：获取按键值，并显示在显示框中
function command(num) {
 //获取显示框的值
 var str = String(document.form1.txt.value);
 //对该值进行判断，如果该值不为"0"，且输入状态0，则返回前者，否则为""(双重三目运算)
 //两个判断条件：1、显示框中值是否为"0",  2、数的输入状态
 str = (str != "0")?((state == 0)?str:""):"";
 //给当前值追加字符
 str = str + String(num);
 //刷新显示
 document.form1.txt.value = str;
 //按了任意数字键后，数的输入状态变为0
 state = 0;
 //重置防止重复按键
 avoidRepeat = true;
}

//第二步：确保输入的数是合法的，每个数至多只有一个小数点
function dot() {
 var str = String(document.form1.txt.value);
 //若该数前面未接运算符，则返回前值，否则为"0"；
 str = (state == 0)?str:"0";
 //Java里String有length()方法，而JS里String有length属性
 for(i=0;i<=str.length;i++) {
 //substr()获取下标从i开始，个数为1个的子串
 if(str.substr(i,1)==".") {
  //当存在小数点时，则程序终止
  return;
 } 
 }
 //若无小数点，则在该数后面加上
 str = str+".";
 //刷新显示
 document.form1.txt.value = str;
 //恢复数的初始输入状态
 state = 0;
 
}

//第三步：处理退格键
function Backspace() {
 var str= String(document.form1.txt.value);
 //若显示框中数不等于"0",则返回str，否则返回""
 str = (str != "0")?str:"";
 //获取子串
 str = str.substr(0,str.length-1);
 //若str不为"",则返回子串str，否则str="0"
 str = (str != "")?str:"0";
 //刷新显示
 document.form1.txt.value = str;
 
}

//第四步：删除所有
function deleteAll() {
 //显示框设为"0"
 document.form1.txt.value = "0";
 //恢复数的初始输入状态
 state = 0;
 //恢复运算符键，默认为0--等于号
 operator = 0;
}

//第五步：加法
function add() {
 //调用计算函数
 calculate();
 //更改数的输入状态
 state = 1;
 //更改运算符键，1--加号
 operator = 1;
 
}

//第六步：减法
function subtract() {
 //调用计算函数
 calculate();
 //更改数的输入状态
 state = 1;
 //2--减号
 operator = 2;
 
 
}

//第七步：乘法
function multiply() {
 //调用计算函数
 calculate();
 //更改数的输入状态
 state = 1;
 //3--乘号
 operator = 3;
 
}

//第八步：除法
function divide() {
 //调用计算函数
 calculate();
 //更改数的输入状态
 state = 1;
 //4--除号
 operator = 4;
 
}

//第九步：正负号
function sign() {
 //5--正负号
 operator = 5;
 //调用计算函数
 calculate();
 //更改数的输入状态
 state = 1;
 //0--等于号
 operator = 0;
 //正负号可以连续按
 avoidRepeat = true;

}

//第十步：等于
function equal() {
 //调用计算函数
 calculate();
 //更改数的输入状态
 state = 1;
 //0--等于号
 operator = 0;
 
 
}

//第十一步：计算
function calculate() {
 //获取显示框中的值
 screenNum = Number(document.form1.txt.value);
 if(avoidRepeat) { 
 switch(operator){
  case 1:
  result = result + screenNum;
  document.form1.txt.value = result;
  break;
  case 2:
  result = result - screenNum;
  document.form1.txt.value = result;
  break;
  case 3:
  result = result * screenNum;
  document.form1.txt.value = result;
  break;
  case 4:
  if(screenNum == 0){
   //设置显示框的值
   document.getElementById("txt").value="除数不能为0";
   //3s后，执行清屏函数
   setTimeout(clearScreen,3000);
  }else{
   result = result/screenNum;
   document.form1.txt.value = result;
  }
  break;
  case 5:
  result = (-1)*screenNum;
  document.form1.txt.value = result;
  break;
  case 0:
  result = screenNum;
  document.form1.txt.value = result;
  break;
  
 }
 //当按了运算符键后，不能再按
 avoidRepeat = false;
 }
 
}

//第十二步：清屏函数
function clearScreen() {
 document.getElementById("txt").value = "0";
 
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的JavaScript计算器网页版实现代码分享全部内容，希望文章能够帮你解决JavaScript计算器网页版实现代码分享所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/351183.html

来源：【匿名】

【上一篇】浅谈javascript运算符——条件,逗号,赋值,()和void运算符【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScript计算器网页版实现代码分享】教程文章相关的互联网学习教程文章

asp.net中JavaScript数据验证实现代码

今天在做一个数据修改的页面，页面上有一个DropDownList控件，绑定的是实体中的重要属性，我希望用户在修改该控件值的时候，提示用户，他修改了该控件的值。所以为该下拉控件加上了如下语句。复制代码代码如下:DDLmaterial.Attributes.Add("onchange", "alert(‘注意：您修改了物品类型!‘)"); 似乎不错，不仅有提示效果，也不需要刷新页面。可是当我打开页面进行测试的时候就发现了问题，当我把下拉控件的值改回原值的时候，它还...

一个简单的JavaScript数据缓存系统实现代码

代码如下:var DataCache = function(){ if(!(this instanceof DataCache)){ return new DataCache(); } this.id = 0; this.caches = {}; }; DataCache.prototype = { add : function(val){ val = val || null; key = "dc_" + this.id; this.caches[key] = val; return key; }, remove : function(key){ delete this.caches[key]; }, get : function(key){ return this.caches[key]; }, set : function(key,val){ this.caches[key] ...

一个简单的JavaScript数据缓存系统实现代码_javascript技巧

代码如下: var DataCache = function(){ if(!(this instanceof DataCache)){ return new DataCache(); } this.id = 0; this.caches = {}; }; DataCache.prototype = { add : function(val){ val = val || null; key = "dc_" + this.id; this.caches[key] = val; return key; }, remove : function(key){ delete this.caches[key]; }, get : function(key){ return this.caches[key]; }, set : function(key,val){ this.caches[key]...

js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)【图】

很庆幸，我又见到了末日后新升的太阳，所以我还能在这里写文章，言归正传哈，最近做了一个项目，需要用子域名调用主域名下的一个现有的功能，于是想到了用jsonp来解决，在我们平常的项目中不乏有这种需求的朋友，于是记录下来以便以后查阅同时也希望能帮到大家。什么是JSONP协议? JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求，我们可以通过使用...

JavaScript用JQuery呼叫Server端方法实现代码与参考语法【图】

Insus.NET从2013年开始学习Javascript，此博文是第一次使用JQuery，从Javascript客户端用JQuery呼叫Server端的方法。首先看看此例的演示：准备好Server端的方法：代码如下:[System.Web.Services.WebMethod] public static string VeryUserName(string name) { string rtn = "恭喜，此帐号还没有注册，你可以使用。"; if (name == "") rtn = "请填写一个注册帐号。"; if (name == "Insus.NET") rtn = "此用户已经注册，请使用另...

vue+vue-validator 表单验证功能的实现代码

官方文档：http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址：https://github.com/vuejs/vue-validator 下面给大家介绍vue+vue-validator 表单验证功能，具体代码如下所示： 1. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <validator name="myForm"> <form novalidate> Zip: <input type="text" v-validate:zip="[required]"...

JQuery里选择超链接的实现代码

语法规则如下： $('a[href$="ABC"]')... 支持的选择方式如下： = 判断完全相符； != 不相符； ^=以某字符串开头； $=以某字符串结尾； *=包含某字符串。进一步，可以通过$('a[href$="ABC"]:first')返回结果集中的第一条记录如果需要遍历结果集：代码如下:$(a[href*=/Lists/Booking/DispForm.aspx]).each(function(){ // $(this)… }); 如果要获取相关属性可以通过$(a[href$="ABC"]:first).attr(‘title)等来获取如果需要返回...

cookie的复制与使用记住用户名实现代码

代码如下:<!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> <title></title> <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="Scripts/jquery.cookie.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { if ($....

微信小程序封装自定义弹窗的实现代码【图】

最近在做小程序的登录，需要同时获取用户手机号和头像昵称等信息，但是小程序又不支持单个接口同时获取两种数据，因此想到自定义一个弹窗，通过弹窗按钮触发获取手机号事件。记录一下。具体代码如下：业务代码中：在业务代码中引入dialog组件即可 <dialog visible="{{dialogVisible}}" showFooter="{{footerVisible}}" title="测试一下"><view class=dialog-body slot="dialog-body"><view class=dialog-content>申请获取你微信绑...

使用jQuery操作Cookies的实现代码_jquery

当你浏览某网站时，你硬盘上会生产一个非常小的文本文件，它可以记录你的用户ID、密码、浏览过的网页、停留的时间等信息。当你再次来到该网站时，网站通过读取Cookies，得知你的相关信息，就可以做出相应的动作，如在页面显示欢迎你的标语，或者让你不用输入ID、密码就直接登录等等。从本质上讲，它可以看作是你的身份证。使用传统的Javascript来设置和获取Cookies信息很麻烦，要写上几个函数来处理，幸运的是jQuery帮我们做了很...

jQuery 淡入淡出、展开收缩菜单实现代码【图】

效果图:运行以后，刷新下即可。jQuery淡入淡出、展开收缩菜单 ul li{list-style:none;} ul li.menu{position:relative;width:120px;} ul li.menu ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:100px;padding:5px;} ul li.menu ul li{padding:5px 0;border-bottom:1px dotted #ddd;} $(document).ready(function(){ $(".menu").hover( function(){ //$(".content").fadeIn(800); // 淡入 ...

JS判断元素是否在数组内的实现代码

一、JQuery 如果是用JQuery的话，可以用inArray()函数： jquery inarray()函数详解 jquery.inarray(value,array) 确定第一个参数在数组中的位置(如果没有找到则返回 -1 )。 determine the index of the first parameter in the array (-1 if not found). 返回值 jquery 参数 value (any) : 用于在数组中查找是否存在 array (array) : 待处理数组。用法为：代码如下: $.inArray(value, array) 二、自己写函数 function contains(ar...

jQuery获取浏览器中的分辨率实现代码

代码如下:<script type="text/javascript"> $(document).ready(function(){ alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(document.body).height());//浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度包括border padding margin alert($(window).width()); //浏览器当前窗口可视区域宽...

Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码

在调试功能模块时候，发现怎么用什么方法都无法在infowindow里面添加的div进行绑定事件处理。郁闷啊！上网搜了好多方法也没用，后来想想还是查了一下官方的API，发现了google.maps.InfoWindow下面的Events里面有个domready事件官方解释： This event is fired when the containing the InfoWindow's content is attached to the DOM. You may wish to monitor this event if you are building out your info window content dyna...

使用jQuery操作Cookies的实现代码

首页 / JAVASCRIPT / JavaScript计算器网页版实现代码分享

JavaScript计算器网页版实现代码分享

内容导读

内容图文

内容总结

内容备注

内容手机端

【JavaScript计算器网页版实现代码分享】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程