首页
所有分类
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之小练习代码
Oct 12 Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
JS打开摄像头并截图上传示例
Feb 18 Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 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
印度购物网站(45) 墨西哥购物网站(16) 德国购物网站(227) 埃及购物网站(2) 俄罗斯购物网站(137) 印尼购物网站(37) 日本购物网站(72) 西班牙购物网站(115) 马来西亚购物网站(41) 瑞士购物网站(28)
You might like
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
JavaScript中null与undefined分析
2009/07/25 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
Python单元测试框架unittest简明使用实例
2015/04/13 Python
Python 实现简单的电话本功能
2015/08/09 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
Python基础语言学习笔记总结（精华）
2017/11/14 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
python文件拆分与重组实例
2018/12/10 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
python学生管理系统学习笔记
2019/03/19 Python
在python里面运用多继承方法详解
2019/07/01 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
简单的命令查看安装的python版本号
2020/08/28 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
就业推荐表自我鉴定范文
2014/03/21 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书
导游词之西安骊山
2019/12/20 职场文书
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android