JavaScript计算器网页版实现代码分享

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：869 次日期：2016-07-27 14:55:31

温馨提示：小编为您整理了“JavaScript计算器网页版实现代码分享”,方便广大网友查阅！

这篇文章主要为大家详细介绍了JavaScript计算器网页版实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

JavaScript网页计算器代码，该计算器是用DW写的！

HTML篇

<html

<head>

</head>

<body >

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</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运算符——条件,逗号,赋值,()和void运算符

下一篇：js实现楼层效果的简单实例

手机网站地址：JavaScript计算器网页版实现代码分享

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！