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 相关文章推荐
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
vue addRoutes路由动态加载操作
Aug 04 Javascript
vue选项卡切换的实现案例
Apr 11 Vue.js
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
You might like
各种咖啡的英文名子是什么
2021/03/03 新手入门
E路文章系统PHP
2006/12/11 PHP
PHP+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
php的一个简单加密解密代码
2014/01/14 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
使用Python从零开始撸一个区块链
2018/03/14 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
土木工程专业自荐信
2013/10/04 职场文书
会计电算化专业个人的自我评价
2013/11/24 职场文书
会计实习自我鉴定
2013/12/04 职场文书
大学生社会实践评语
2014/04/25 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
计划生育诚信协议书
2014/11/02 职场文书
担保书格式
2015/01/20 职场文书
二十年同学聚会感言
2015/07/30 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
JavaScript实例 ODO List分析
2022/01/22 Javascript