首页
所有分类
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 相关文章推荐
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
深入理解基于vue-cli的vuex配置
Jul 24 Javascript
jquery自定义显示消息数量
Dec 19 jQuery
JS简单获得节点元素的方法示例
Feb 10 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
harbor(1) dockerfile(1) Tablespace(1) SQLite3(1) commit(1) GoFrame(3) 短信验证码(1) pytz(1) 分布式锁(3) reduce(2)
You might like
MySQL相关说明
2007/01/15 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
基于jquery点击自以外任意处，关闭自身的代码
2012/02/10 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
Javascript验证方法大全
2015/09/21 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
Python算法应用实战之栈详解
2017/02/04 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
Django中使用Celery的方法示例
2018/11/29 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
django中forms组件的使用与注意
2019/07/08 Python
Python中Qslider控件实操详解
2021/02/20 Python
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
工程采购员岗位职责
2014/03/09 职场文书
公司应聘求职信
2014/06/21 职场文书
个人党性分析材料
2014/12/19 职场文书
2016年员工年度考核评语
2015/12/02 职场文书
导游词之潮音寺
2019/09/26 职场文书
anaconda python3.8安装后降级
2021/06/11 Python
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA