首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJuly 15, 2016

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计算器网页版实现代码分享

- Author -

qq_34416191

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
几个高效，简洁的字符处理函数
Apr 12 Javascript
Javascript 同时提交多个Web表单的方法
Feb 19 Javascript
javascript五图轮播切换实用版
Aug 17 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 Javascript
JS实现选项卡实例详解
Nov 17 Javascript
JS短信验证码倒计时功能的实现（没有验证码，只有倒计时）
Oct 27 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
jquery实现轮播图效果
Feb 13 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
Vue中点击active并第一个默认选中功能的实现
Feb 24 Javascript
Webpack3+React16代码分割的实现
Mar 03 Javascript
js实现楼层效果的简单实例
Jul 15 #Javascript
基于JavaScript实现轮播图代码
Jul 14 #Javascript
js轮播图代码分享
Jul 14 #Javascript
jQuery中deferred对象使用方法详解
Jul 14 #Javascript
Bootstrap 最常用的JS插件系列总结（图片轮播、标签切换等）
Jul 14 #Javascript
基于jQuery的ajax方法封装
Jul 14 #Javascript
由浅入深剖析Angular表单验证
Jul 14 #Javascript
短波(1) 天线(6) 电台(1) 电路图(1) 东芝(1) SONY(15) 德劲(5) ICF-7600(1) 索尼(5) PL-880(1)
You might like
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
python获得文件创建时间和修改时间的方法
2015/06/30 Python
深入解析Python中的变量和赋值运算符
2015/10/12 Python
Python简单实现enum功能的方法
2016/04/25 Python
Python 爬虫图片简单实现
2017/06/01 Python
Python实现通讯录功能
2018/02/22 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
python_mask_array的用法
2020/02/18 Python
Python调用Redis的示例代码
2020/11/24 Python
ebookers英国：隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
综合素质的自我鉴定
2013/10/07 职场文书
门诊挂号室室长岗位职责
2013/11/27 职场文书
市政施工员自我鉴定
2014/01/15 职场文书
人力资源本科毕业生求职信
2014/06/04 职场文书
七一建党日演讲稿
2014/09/05 职场文书
学风建设演讲稿
2014/09/12 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
政府会议通知范文
2015/04/15 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
集结号观后感
2015/06/08 职场文书
《包身工》教学反思
2016/02/23 职场文书
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL