JavaScript计算器网页版实现代码分享_Javascript教程-查字典教程网

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

摘要：JavaScript网页计算器代码，该计算器是用DW写的！HTML篇C←±＋789－456×123÷0▪＝CSS篇@charse...

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

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 + 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)"; //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.substr(0,str.length-1); //若str不为"",则返回子串str，否则str="0" str = (str != "")"; //刷新显示 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应用中使用RequireJS来实现延迟加载

★ javascript实现简单的进度条

★ JavaScript的9种继承实现方式归纳

★ javascript基于DOM实现权限选择实例分析

★ JavaScript里实用的原生API汇总

★ javascript函数特点实例

★ JavaScript实现仿网易通行证表单验证

★ JavaScript模版引擎的基本实现方法浅析

★ JavaScript实现添加、查找、删除元素

★ JavaScript实现简单的数字倒计时

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

下一篇：浅谈javascript运算符——条件,逗号,赋值,()和void运算符

学习工具