首页
所有分类
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 相关文章推荐
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
JavaScript EasyPager 分页函数
May 25 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
RequireJS多页面应用实例分析
Jun 29 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
第一次记录Bootstrap table学习笔记（1）
May 18 Javascript
js评分组件使用详解
Jun 06 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 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
Hudi(1) Apache(17) sortInts(1) 数据处理(2) apply(1) WebSockets(3) Tkinter(4) Pool(1) feDisplacementMap(1) GUI(2)
You might like
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
深入讲解PHP的Yii框架中的属性（Property）
2016/03/18 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
详解微信小程序开发—你期待的分享功能来了，微信小程序序新增5大功能
2016/12/23 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
python自动翻译实现方法
2016/05/28 Python
python僵尸进程产生的原因
2017/07/21 Python
python生成随机图形验证码详解
2017/11/08 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
python生成密码字典的方法
2018/07/06 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
python统计字符的个数代码实例
2020/02/07 Python
python3排序的实例方法
2020/10/20 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
会计电算化专业求职信
2014/06/10 职场文书
重点工程汇报材料
2014/08/27 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
自主招生英文自荐信
2015/03/25 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python