< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html charset=utf-8" />
< title>写给新手：js表单操作（四） 简单计算器（二）</title>
< style type="text/css">
body {
font-size:12px
font-family:Arial, Georgia, "Times New Roman", Times, serif
color:#555
text-align:center
background-color:#e2e2e2
}
h6{
margin:0
font-size:12px
}
#calculator {
width:240px
height:auto
overflow:hidden
margin:10px auto
border:#fff 1px solid
padding-bottom:10px
background-color:#f2f2f2
}
#calculator div {
clear:both
}
#calculator ul{
padding:0
margin:5px 14px
border:#fff 1px solid
height:auto
overflow:hidden
}
#calculator li{
list-style:none
float:left
width:32px
height:32px
margin:5px
display:inline
line-height:32px
font-size:14px
background-color:#eaeaea
}
#calculator li.tool{
background-color:#e2e2e2
}
#calculator li:hover{
background-color:#f9f9f9
cursor:pointer
}
#calculator li:active{
background-color:#fc0
cursor:pointer
}
#calculator li.tool:active{
background-color:#d8e8ff
cursor:pointer
}
#calcu-head {
text-align:left
padding:10px 15px 5px
}
span.imyeah {
float:right
color:#ccc
}
span.imyeah a{
color:#ccc
}
.screen{
width:200px
height:24px
line-height:24px
padding:4px
border:#e6e6e6 1px solid
border-bottom:#f2f2f2 1px solid
border-right:#f2f2f2 1px solid
margin:10px auto
direction:ltr
text-align:right
font-size:16px
color:#999
}
#calcu-foot{
text-align:left
padding:10px 15px 5px
height:auto
overflow:hidden
}
span#note{
float:left
width:210px
height:auto
overflow:hidden
color:red
}
span.welcome{
clear:both
color:#999
}
span.welcome a{
float:right
color:#999
}
< /style>
< script language="javascript">
//此处插入上面的js代码
</script>
< /head>
< body>
< div id="calculator">
< div id="calcu-head"><span class="imyeah">© <a href="http://www.cnblogs.com/imyeah/" target="_blank">I'm Yeah!</a></span><h6>简单的计算器</h6></div>
< form name="calculator" action="" method="get">
< div id="calcu-screen">
< !--配置显示窗口，使用onfocus="this.blur()"避免键盘输入-->
< input type="text" name="numScreen" class="screen" value="0" onfocus="this.blur()" />
< /div>
< div id="calcu-btn">
< ul> <!--配置按钮-->
< li onclick="command(7)">7</li>
< li onclick="command(8)">8</li>
< li onclick="command(9)">9</li>
< li class="tool" onclick="del()">←</li>
< li class="tool" onclick="clearscreen()">C</li>
< li onclick="command(4)">4</li>
< li onclick="command(5)">5</li>
< li onclick="command(6)">6</li>
< li class="tool" onclick="times()">×</li>
< li class="tool" onclick="divide()">÷</li>
< li onclick="command(1)">1</li>
< li onclick="command(2)">2</li>
< li onclick="command(3)">3</li>
< li class="tool" onclick="plus()">+</li>
< li class="tool" onclick="minus()">-</li>
< li onclick="command(0)">0</li>
< li onclick="dzero()">00</li>
< li onclick="dot()">.</li>
< li class="tool" onclick="persent()">%</li>
< li class="tool" onclick="equal()">=</li>
< /ul>
< /div>
< div id="calcu-foot">
< span id="note"></span>
< span class="welcome">欢迎使用javascript计算器！<a href="http://www.cnblogs.com/imyeah" target="_blank">反馈</a></span>
< /div>
< /form>
< /div>
< /body>
< /html> js代码：
var num=0,result=0,numshow="0"
var operate=0 //判断输入状态的标志
var calcul=0 //判断计算状态的标志
var quit=0 //防止重复按键的标志
function command(num){
var str=String(document.calculator.numScreen.value) //获得当前显示数据
str=(str!="0") ? ((operate==0) ? str : "") : "" //如果当前值不是"0"，且状态为0，则返回当前值，否则返回空值
str=str + String(num) //给当前值追加字符
document.calculator.numScreen.value=str //刷新显示
operate=0 //重置输入状态
quit=0 //重置防止重复按键的标志
}
function dzero(){
var str=String(document.calculator.numScreen.value)
str=(str!="0") ? ((operate==0) ? str + "00" : "0") : "0" //如果当前值不是"0"，且状态为0，则返回当str+"00"，否则返回"0"
document.calculator.numScreen.value=str
operate=0
}
function dot(){
var str=String(document.calculator.numScreen.value)
str=(str!="0") ? ((operate==0) ? str : "0") : "0" //如果当前值不是"0"，且状态为0，则返回当前值，否则返回"0"
for(i=0 i<=str.lengthi++){ //判断是否已经有一个点号
if(str.substr(i,1)==".") return false //如果有则不再插入
}
str=str + "."
document.calculator.numScreen.value=str
operate=0
}
function del(){ //退格
var str=String(document.calculator.numScreen.value)
str=(str!="0") ? str : ""
str=str.substr(0,str.length-1)
str=(str!="") ? str : "0"
document.calculator.numScreen.value=str
}
function clearscreen(){ //清除数据
num=0
result=0
numshow="0"
document.calculator.numScreen.value="0"
}
function plus(){ //加法
calculate() //调用计算函数
operate=1 //更改输入状态
calcul=1 //更改计算状态为加
}
function minus(){ //减法
calculate()
operate=1
calcul=2
}
function times(){ //乘法
calculate()
operate=1
calcul=3
}
function divide(){ //除法
calculate()
operate=1
calcul=4
}
function persent(){ //求余
calculate()
operate=1
calcul=5
}
function equal(){
calculate() //等于
operate=1
num=0
result=0
numshow="0"
}
//
function calculate(){
numshow=Number(document.calculator.numScreen.value)
if(num!=0 && quit!=1){ //判断前一个运算数是否为零以及防重复按键的状态
switch(calcul){ //判断要输入状态
case 1:result=num+numshowbreak //计算"+"
case 2:result=num-numshowbreak //计算"-"
case 3:result=num*numshowbreak
case 4:if(numshow!=0){result=num/numshow}else{document.getElementById("note").innerHTML="被除数不能为零！" setTimeout(clearnote,4000)} break
case 5:result=num%numshowbreak
}
quit=1 //避免重复按键
}
else{
result=numshow
}
numshow=String(result)
document.calculator.numScreen.value=numshow
num=result //存储当前值
}
function clearnote(){ //清空提示
document.getElementById("note").innerHTML=""
}
js计算器代码，通过弹窗显示步骤如下。1、js计算器代码编写html，实现计算器页面视图效果。
2、js计算器代码编写，实现点击输入数字和符号输出结果。
3、js计算器代码创建click1函数，判断flag的值，如果是true就定位到第一个输入框，如果是false就定位到第二个输入框，将点击传过来的值与输入框里面的字符串拼接到一起。
4、js计算器代码定义result函数，定位到两个输入框，取出其中的值并转成整数，定位到隐藏输入框，取出里面的符号，然后判断是什么符号，进行相应的运算，弹出运算结果。
以下简单说下用 JavaScript 编写简单计算器的思路。
一、运算核心
对于 JavaScript 来说，编写一个简单的计算器的核心，是借用 js 提供的 eval 函数，eval 函数可以对给定的字符串表达式执行运算，并返回结果。
举例来说：
s = eval("50+20-30*40/20")其结果是 10。可以看出，先乘除后加减等运算规则都能正确处理。
二、输入（组合）运算式
核心运算解决后，下一步就是解决如何输入（组合）运算式。
其实也并不复杂，计算器上的符号可以分为4类：
1、0-9 数值
2、% .
3、+ - * /
4、= 退格
除了第 2 类和第 4 类，需要专门处理外，基本上都可以当做字符串处理。即，设置一个全局变量，用于保存用户的输入，当点击时，将值添加进变量字符串的末尾。
当用户点击 “=” 时，调用 eval 函数，计算表达式，并输出结果。
当用户点击“退格”时，删除表达式的最后一个字符。
三、进行界面设计
对于 JS 来说，大多还是要借用 HTML 元素，如 Button 等，样式用 CSS 进行控制。
以下提供相关代码供参考：
<script>var num = 0 // 定义第一个输入的数据
function jsq(num) {
//获取当前输入
if(num=="%"){
document.getElementById('screenName').value=Math.round(document.getElementById('screenName').value)/100
}else{
document.getElementById('screenName').value += document.getElementById(num).value
}
}
function eva() {
//计算输入结果
document.getElementById("screenName").value = eval(document.getElementById("screenName").value)
}
function clearNum() {
//清0
document.getElementById("screenName").value = null
document.getElementById("screenName").focus()
}
function tuiGe() {
//退格
var arr = document.getElementById("screenName")
arr.value = arr.value.substring(0, arr.value.length - 1)
}
</script>
