https://www.safedai.com.cn

贷款计算器js实现_如何用js做一个简易计算器

如何用js做一个简易计算器

你这计算器.....为每个button添加单击事件,很浪费内存

<inputtype="text"id="num1"/>

<selectid="cal">

<optionvalue="1">+</option>

<optionvalue="2">-</option>

<optionvalue="3">*</option>

<optionvalue="4">/</option>

</select>

<inputtype="text"id="num2"/>

<inputtype="button"id="btn"value="计算"/>

<h2id="result"></h2>

<script>

document.getElementById("btn").onclick=function(){

/*

判断输入是否为空(略),为空则return

*/

//获取输入的值和运算符

vara=parseFloat(document.getElementById('num1').value);

varb=parseFloat(document.getElementById('num2').value);

vark=document.getElementById('cal').value;

console.log(a,b,k);

//运算符的值设置了1,2,3,4,option的value,即cal的value

switch(k){

case"1":

document.getElementById('result').innerHTML=a+b;

break;

case"2":

document.getElementById('result').innerHTML=a-b;

break;

case"3":

document.getElementById('result').innerHTML=a*b;

break;

case"4":

if(b==0){

alert("除数不能为0");

return;

}

else{

document.getElementById('result').innerHTML=a/b;

}

break;

}

}

</script>

这个计算器用JS怎么实现,急啊

你是要现成代码还是?

思路是除了功能键

其他键每按一次就写入文本框裏

当按功能键(加减乘除类的)

就把文本框输入的存入一个变量,然後再把功能键存入另一个变量,然後清空文本框,

当文本框再次输入後,

如果按等於号,

那麼则把之前的变量取出计算

网页中如何做计算器

输入如下代码就可以了

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>Calculate</title>

<script language="VBSCRIPT">

Function Show(m)

If (Myform.Expression.Value = "" AND InStr(". + - * / ",m)) Then

Myform.Expression.Value = ""

ElseIf (InStr("+ - * / . ",Right(Myform.Expression.Value,1)) And InStr("+ - * / ",m)) Then

ElseIf (m = ".") Then

If (InStr("+ - * / . ",Right(Myform.Expression.Value,1))) Then

ElseIf ((InstrRev(Myform.Expression.Value,".") > InstrRev(Myform.Expression.Value,"+")) And (InstrRev(Myform.Expression.Value,".") > InstrRev(Myform.Expression.Value,"-")) And (InstrRev(Myform.Expression.Value,".") > InstrRev(Myform.Expression.Value,"*")) And (InstrRev(Myform.Expression.Value,".") > InstrRev(Myform.Expression.Value,"/"))) Then

Else

Myform.Expression.Value = Myform.Expression.Value + m

End If

Else

Myform.Expression.Value = Myform.Expression.Value + m

END If

End Function

Function Sqrt()

If (Myform.Expression.Value = "") Then

Myform.Expression.Value = ""

ElseIf (InStr(". + - * / ",Right(Myform.Expression.Value,1))) Then

Else

Myform.Expression.Value = Eval(Myform.Expression.Value)^2

End If

End Function

Function Result()

If (Myform.Expression.Value = "") Then

Myform.Expression.Value = ""

ElseIf (InStr(". + - * / ",Right(Myform.Expression.Value,1))) Then

Else

Myform.Expression.Value = Eval(Myform.Expression.Value)

End If

End Function

Function Clean()

Myform.Expression.Value = ""

End Function

</script>

<style type="text/css">

<!--

.style5 {font-size: 18px}

-->

</style>

</head>

<body bgcolor="#ffffee" text=#000000>

<form name="myform" method="post" action="">

<div align="center">

<table bgcolor="#C0e0ff" width="214" height="245" border="4">

<tr>

<th width="206" scope="col"><H2><font color="#0000A0"> 计算器 </font></H2></th>

</tr>

<tr>

<th height="36" scope="col"><table width="200" border="1">

<tr>

<td colspan="4"><div align="center">

<input name="expression" type="text" value="" size="28" maxlength="28" >

</div></td>

</tr>

<tr>

<td><div align="center">

<INPUT TYPE="button" id="seven"

onClick="Show('7')" VALUE=" 7 ">

</div></td>

<td><div align="center">

<INPUT TYPE="button" VALUE=" 8 "

onClick="Show('8')">

</div></td>

<td><div align="center">

<INPUT TYPE="button" VALUE=" 9 "

onClick="Show('9')">

</div></td>

<td><div align="center">

<INPUT TYPE="button" VALUE=" / "

onClick="Show('/')">

</div></td>

</tr>

<tr>

<td><div align="center">

<INPUT TYPE="button" VALUE=" 4 "

onClick="Show('4')">

</div></td>

<td><div align="center">

<INPUT TYPE="button" VALUE=" 5 "

onClick="Show('5')">

</div></td>

<td><div align="center">

<INPUT TYPE="button" VALUE=" 6 "

onClick="Show('6')">

</div></td>

<td><div align="center">

<INPUT TYPE="button" VALUE=" * "

onClick="Show('*')">

</div></td>

</tr>

<tr>

<td><div align="center">

<INPUT TYPE="button" VALUE=" 1 "

onClick="Show('1')">

</div></td>

<td><div align="center">

<INPUT TYPE="button" VALUE=" 2 "

onClick="Show('2')">

</div></td>

<td><div align="center">

<INPUT TYPE="button" VALUE=" 3 "

onClick="Show('3')">

</div></td>

<td><div align="center">

<INPUT TYPE="button" VALUE=" - "

onClick="Show('-')">

</div></td>

</tr>

<tr>

<td><div align="center">

<INPUT TYPE="button" VALUE=" 0 "

onClick="Show('0')">

</div></td>

<td><div align="center">

<INPUT TYPE="button" VALUE=" . "

onClick="Show('.')">

</div></td>

<td><div align="center">

<input type="button" value="sqr"

onClick="sqrt()">

</div></td>

<td><div align="center">

<input type="button" value=" + "

onClick="Show('+')">

</div></td>

</tr>

<tr>

<td colspan="2"><div align="center">

<INPUT TYPE="button" VALUE=" AC "

onClick="clean()">

</div></td>

<td colspan="2"><div align="center">

<INPUT TYPE="button" VALUE=" = "

onClick="result()">

</div></td>

</tr>

</table></th>

</tr>

</table>

</div>

</form>

</body>

</html>

javascript怎么实现计算器

如下代码仅仅实现了加、减、乘、除四个小功能。

<script>

window.onload=function(){

varoText1=document.getElementById('txt1');

varoText2=document.getElementById('txt2');

varoSel=document.getElementById('sel1');

varoBtn=document.getElementById('btn');

oBtn.onclick=function(){

varn1=parseFloat(oText1.value);

varn2=parseFloat(oText2.value);

vara=oSel.value;

'12+5'

varres=0;

switch(a)

{

case'+':

res=n1+n2;

break;

case'-':

res=n1-n2;

break;

case'*':

res=n1*n2;

break;

case'/':

res=n1/n2;

break;

}

alert(res);

};

};

</script>

</head>

<body>

<inputtype="text"id="txt1"/>

<selectid="sel1">

<optionvalue="+">+</option>

<optionvalue="-">-</option>

<optionvalue="*">*</option>

<optionvalue="/">/</option>

</select>

<inputtype="text"id="txt2"/>

<inputtype="button"value="计算"id="btn"/>

</body>

定义一个select选择器,进行选择计算方式。点击按钮计算,将计算出结果。

如何使用JS编写一个简单的计算器

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="";

}

html部分:

<!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实现简单的计算器功能

<!doctypehtml>

<html>

<head>

<metacharset="utf-8">

<title>无标题文档</title>

<style>

table{

border-collapse:separate;

border-spacing:8px;

width:800px;

}

table,td{

border:1pxdashedblack;

padding:1px;

}

</style>

<scriptlanguage="javascript">

functionadd()

{

varn1=parseInt(document.getElementById('n1').value);

varn2=parseInt(document.getElementById('n2').value);

varn3=n1+n2;

document.getElementById('n3').value=n3;

}

functionminx()

{

varn1=parseInt(document.getElementById('n1').value);

varn2=parseInt(document.getElementById('n2').value);

varn3=n1-n2;

document.getElementById('n3').value=n3;

}

functionplus()

{

varn1=parseInt(document.getElementById('n1').value);

varn2=parseInt(document.getElementById('n2').value);

varn3=n1*n2;

document.getElementById('n3').value=n3;

}

functiondivd()

{

varn1=parseInt(document.getElementById('n1').value);

varn2=parseInt(document.getElementById('n2').value);

varn3=n1/n2;

document.getElementById('n3').value=n3;

}

</script>

</head>

<body>

<table>

<tr>

<tdcolspan="4">

第一个数:

<inputtype="text"id="n1"size="4"maxlength="10">

</td>

<tdcolspan="4">

第二个数:

<inputtype="text"id="n2"size="4"maxlength="10">

</td>

<tdcolspan="4">

结果:

<inputtype="text"id="n3"size="4"maxlength="10">

</td>

</tr>

<tr>

<tdcolspan="3">

<inputtype="button"name="button"id="button1"value="+"onclick="add()">

</td>

<tdcolspan="3">

<inputtype="button"name="button"id="button2"value="-"onclick="minx()">

</td>

<tdcolspan="3">

<inputtype="button"name="button"id="button3"value="*"onclick="plus()">

</td>

<tdcolspan="3">

<inputtype="button"name="button"id="button4"value="/"onclick="divd()">

</td>

</tr>

</table>

</body>

</html>

以上代码是我修改后的,你的代码有几个问题:

没有方法 document.getElementsByld,应该是document.getElementById,注意:你用的是'L',应该是'哎'。同时html中input的name="n1",name="n2",name="n3"修改为id="n1",id="n2",id="n3"。

var n2=parseInt(document.getElementsByld('n2').value); 你每次获取n2的值的时候用的是中文的前括号,js里面是不允许的。

document.getElementsByld('n3').value)=n3; 在个n3赋值的时候,前括号也是中文的,value后面多了一个后括号。

郑重声明:本文版权归原作者所有,安全贷转载文章仅为传播信息之目的;如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

相关文章阅读