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 相关文章推荐
javascript 数组的方法集合
Jun 05 Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
JS中操作JSON总结
Dec 06 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
微信小程序实现animation动画
Jan 26 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 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
You might like
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
PHP汉字转换拼音的函数代码
2015/12/30 PHP
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
2016/04/18 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
JS实现方形抽奖效果
2018/08/27 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
python生成二维码的实例详解
2017/10/29 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
python 元组和列表的区别
2020/12/30 Python
Skyscanner波兰:廉价航班
2017/11/07 全球购物
商务英语求职自荐信范文
2013/12/24 职场文书
英语专业学生个人求职信范文
2014/01/06 职场文书
给国外客户的邀请函
2014/01/30 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
安阳殷墟导游词
2015/02/10 职场文书
Python保存并浏览用户的历史记录
2022/04/29 Python