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 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
详解JavaScript函数
Dec 01 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
原生js实现选项卡功能
Mar 08 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
vue 保留两位小数 不能直接用toFixed(2) 的解决
Aug 07 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 Javascript
Java无向树分析 实现最小高度树
Apr 09 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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
Zend 输出产生XML解析错误
2009/03/03 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
laravel自定义分页效果
2017/07/23 PHP
js下获取div中的数据的原理分析
2010/04/07 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
vue项目中使用tinymce编辑器的步骤详解
2018/09/11 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
python中requests小技巧
2017/05/10 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
MIS软件工程师的面试题
2016/04/22 面试题
化妆品店促销方案
2014/02/24 职场文书
文案策划求职信
2014/03/18 职场文书
小学母亲节活动总结
2015/02/10 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
2019学生会干事辞职信
2019/06/27 职场文书
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis