js计算器怎么判断初始值只为数字而不是符号,又不影响数字的点击
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>计算器</title><linkrel...
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>计算器</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"></head><body> <div class="container"> <form name="calculator" action="" method="get"> <div class="inner"> <div class="region"> <input type="text" name="numScreen" id="screen" class="screen" value="0"/> </div> <div class="main" > <div class="num" id="num"> <button type="button" class="btn btn-default" value="7" >7</button> <button type="button" class="btn btn-default" value="8" >8</button> <button type="button" class="btn btn-default" value="9" >9</button> <button type="button" class="btn btn-default" value="4" >4</button> <button type="button" class="btn btn-default" value="5" >5</button> <button type="button" class="btn btn-default" value="6" >6</button> <button type="button" class="btn btn-default" value="1" >1</button> <button type="button" class="btn btn-default" value="2" >2</button> <button type="button" class="btn btn-default" value="3" >3</button> <button type="button" class="btn btn-default" value="." >.</button> <button type="button" class="btn btn-default" value="0" >0</button> <button type="button" class="btn btn-default" value="=" >=</button> </div> <div class="conter" id="conter"> <button type="button" class="btn btn-default" value="/" >÷</button> <button type="button" class="btn btn-default" value="*" >×</button> <button type="button" class="btn btn-default" value="-" >-</button> <button type="button" class="btn btn-default" value="+" >+</button> </div> <div class="formula" id="formula"> <button type="button" class="btn btn-default" value="sin" >sin</button> <button type="button" class="btn btn-default" value="cos" >cos</button> <button type="button" class="btn btn-default" value="tan" >tan</button> <button type="button" class="btn btn-default" value="C" >C</button> </div> </div> </div> </form> </div> <script type="text/jacascript" src="bootstrap/js/bootstrap.min.js "></script> <script type="text/javascript" src="js/index.js"></script></body></html>var oNum = document.getElementById("num");var aBtn = oNum.getElementsByTagName("button");var numinupt = document.getElementById('screen');for(var i=0; i<aBtn.length;i++){ aBtn[i].onclick = function(){ if(this.value=="." || this.value=="=") { }else if(numinupt.value=="0") { numinupt.value = ''; document.getElementById('screen').value += this.value; }else{ document.getElementById('screen').value += this.value; } }}
展开
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< 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.length;i++){ //判断是否已经有一个点号
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+numshow;break; //计算"+"
case 2:result=num-numshow;break; //计算"-"
case 3:result=num*numshow;break;
case 4:if(numshow!=0){result=num/numshow;}else{document.getElementById("note").innerHTML="被除数不能为零!"; setTimeout(clearnote,4000)} break;
case 5:result=num%numshow;break;
}
quit=1; //避免重复按键
}
else{
result=numshow;
}
numshow=String(result);
document.calculator.numScreen.value=numshow;
num=result; //存储当前值
}
function clearnote(){ //清空提示
document.getElementById("note").innerHTML="";
}
追问
你发的这些我都查过了,请你看清楚我的问题好不
追答
你是想点“.”显示小数的话,就直接加等就行了,不知道这个“=”为什么和“.”在一起判断?“=”的逻辑应该和运算符在一起吧
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询