用js代码做一个简易计算器如何用js做一个简易计算器html？

www.zhiqu.org 时间： 2024-06-02

function test(){
     var txt1 = document.getElementById("txt1"),
         txt2 = document.getElementById("txt2"),
         txt3 = document.getElementById("txt3"),
         opt  = document.getElementById("sel");
     txt3.value =  eval(txt1.value + opt.value + txt2.value);//eval函数可计算某个字符串，并执行其中的的js代码
}

<input type="text" id="txt1" />
<select id="sel">
     <option value="+">+</option>
     <option value="-">-</option>
     <option value="*">*</option>
     <option value="/">/</option>
</select>
<input type="text" id="txt2" />
=
<input type="text" id="txt3" />
<input type="button" id="btn" value="计算" onclick="test()"/>

输入表达式【如：(1+1)*2+Math.pow(2,3)】：<input type="text" style="width:300px" />
<input type="button" value="计算" />结果：<span></span>
<script>
var span=document.querySelector("span");
document.querySelector("input[type=button]").addEventListener("click",function(){
    try{
        span.innerHTML=eval(document.querySelector("input[type=text]").value)||0;
    }catch(e){
        span.innerHTML="表达式不正确！";
    };
});
</script>

高端大气上档次，原理、输入简单，功能强大，输入Math.pow(2,3)计算2^3，不单单四则运算

1234567function test(){ var txt1 = document.getElementById("txt1"), txt2 = document.getElementById("txt2"), txt3 = document.getElementById("txt3"), opt = document.getElementById("sel"); txt3.value = eval(txt1.value + opt.value + txt2.value);//eval函数可计算某个字符串，并执行其中的的js代码}1234567891011<input type="text" id="txt1" /><select id="sel"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option></select><input type="text" id="txt2" />=<input type="text" id="txt3" /><input type="button" id="btn" value="计算" onclick="test()"/>

全部代码：
首先是css代码：命名为mycalculator.css

@charset "utf-8";
/* CSS Document */
.btn{
width:70px;
height:70px;
font-size:24px;
}
.btn1{
width:120px;
height:70px;
font-size:24px;
color:#F00;
}

下面是html代码：命名为mycalculator.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>无标题文档</title>
<link href="mycalculator.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div style="text-align:center;background-color:#CCC;">
<form id="form1" name="form1" method="post" action="">
<table width="297" height="270" border="1" style="margin:opx;padding:opx;">
<tr>
<td height="52" colspan="4"><input name="result" type="text" id="result" value="" style="width:100%;height:100%;" disabled="true"/></td>
</tr>
<tr>
<td width="75"><input type="button" value="1" onclick="getNum(this)" id=
"1" class="btn"/></td>
<td width="75"><input type="button" value="2" onclick="getNum(this)" id="2" class="btn"/></td>
<td width="75"><input type="button" value="3" onclick="getNum(this)" id="3" class="btn"/></td>
<td width="75" height="75"><input type="button" value="+" onclick="yunsuan(this)" id="+" class="btn" style="color:#F00;"/></td>
</tr>
<tr>
<td width="75"><input type="button" value="4" onclick="getNum(this)" id=
"4" class="btn"/></td>
<td width="75"><input type="button" value="5" onclick="getNum(this)" id="5" class="btn"/></td>
<td width="75"><input type="button" value="6" onclick="getNum(this)" id="6" class="btn"/></td>
<td width="75" height="75"><input type="button" value="-" onclick="yunsuan(this)" id="-" class="btn" style="color:#F00;"/></td>
</tr>
<tr>
<td width="75"><input type="button" value="7" onclick="getNum(this)" id=
"7" class="btn"/></td>
<td width="75"><input type="button" value="8" onclick="getNum(this)" id="8" class="btn"/></td>
<td width="75"><input type="button" value="9" onclick="getNum(this)" id="9" class="btn"/></td>
<td width="75" height="75"><input type="button" value="*" onclick="yunsuan(this)" id="*" class="btn" style="color:#F00;"/></td>
</tr>
<tr >
<td width="75"><input type="button" value="back" onclick="backspace()" id=
"back" class="btn" style="color:#F00;"/></td>
<td width="75" height="75"><input type="button" value="clear" onclick="clearresult()" id="clear" class="btn" style="color:#F00;"/></td>
<td colspan="2" width="75" height="75" style="text-align:center;"><input type="button" value="=" onclick="resultNum()" id="btn1" class="btn1" /></td>
<td colspan="2" width="75" height="75" style="text-align:center;"> </td>
</tr>
</table>
</form>
</div>
<script language="javascript">
//运算表达式
var flag=0;
var first="";
//tem是临时变量
var tem="";

function clearresult(){
document.getElementById("result").value="";
first="";
document.getElementById("+").disabled=false;
document.getElementById("-").disabled=false;
document.getElementById("*").disabled=false;
tem="";
first="";
flag="";
}
//退格函数
function backspace(){
if(tem=="")
{
return null;
}
else
{
var m=document.getElementById("result").value;
var m1=m.substring(0,m.length-1);
document.getElementById("result").value=m1;
tem=m1;
}
}

function resultNum(){
var second=parseInt(document.getElementById("result").value);
if(flag==0)
{
document.getElementById("result").value="";
}
else if(flag==1)
{
document.getElementById("result").value=first+second;
}
else if(flag==2)
{
document.getElementById("result").value=first-second;
}
else if(flag==3){
document.getElementById("result").value=first*second;
}
first="";
tem=document.getElementById("result").value;
flag=0;
document.getElementById("+").disabled=false;
document.getElementById("-").disabled=false;
document.getElementById("*").disabled=false;
}

function getNum(event){
var tmp=document.getElementById(event.id).value;
tem=tem+tmp;
document.getElementById("result").value=tem;
}
//函数运算
function yunsuan(event){
var sign=document.getElementById(event.id).value;
if(tem=="")
{
return null;
}
else{

if(sign=="+")
{
flag=1;
}else if(sign=="-")
{
flag=2;
}
else{
flag=3;
}
//用first保存第一个参数值
first=parseInt(document.getElementById("result").value);
document.getElementById("result").value="";
//临时变量清空
tem="";
document.getElementById("+").disabled=true;
document.getElementById("-").disabled=true;
document.getElementById("*").disabled=true;
}
}
</script>
</body>
</html>

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

js做一个简易计算器具体如下：

js运算

第一个数

运算符号

第二个数

计算结果

function js(){
var num1=document.getElementById("onesum").value;
var num2=document.getElementById("twosum").value;
var fh=document.getElementById("fh").value;
var sum=0;
nu
m1=Number(num1);
num2=Number(num2);
if(fh=='+')
{
sum=num1+num2;
}
else if(fh=='-')
{
sum=num1-num2;
}else if(fh=='*')
{
sum=num1*num2;
}else if(fh=='/')
{
sum=num1/num2;
}
//alert(sum);
document.getElementById("sum").value=sum;
}

JavaScript 教程 JavaScript 是属于网络的脚本语言！ JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。

因为你函数里面又写了个属性方法，你直接调函数，属性方法是不会执行的。所以没有任何反应。并且你那个方法里获取元素的方法，传的参数也是错的，应该是个字符串，你传了一个变量，但是你变量又没有定义。并且你是字符串相加，结果也会是错的。你应该去学习一下javascript的基础,如果你对js感觉兴趣的话

#武背菡# 哪位大侠能帮我:用JAVASCRIPT做个简单的计算器? -
(17021439689)： <html> <head> <title>计算器</title> </head> <body bgcolor=＂#ffffff＂ onload=＂FKeyPad.ReadOut.focus();FKeyPad.ReadOut.select();＂> <FORM name=＂Keypad＂ action=＂＂> <TABLE align=＂center＂> <B> <TABLE align=＂center＂ ...

#武背菡# 利用JavaScript脚本语言编写一个简单的“网页计算器” -
(17021439689)： <!DOCTYPE html PUBLIC ＂-//W3C//DTD XHTML 1.0 Transitional//EN＂＂http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd＂><br><html xmlns=＂http://www.w3.org/1999/xhtml＂><br><head><br><meta http-equiv=＂Content-Type＂ ...

#武背菡# 在HTML里用JS做个简易计算机
(17021439689)： <HTML> <style type=＂text/css＂>  </style> <script language=＂javascript＂> var opData1 = 0; // 第一个数 var opData2 = 0; // 第...

#武背菡# 怎样用javascript编写一个计算器
(17021439689)： 3个input文本框 +-*/ 是点击事件用doucment获取2个输入框的值赋值给结果

#武背菡# 如何用下面的html结合js做出一个简单的计算器
(17021439689)： <!DOCTYPE html> <html> <head> <title>计算器</title> <script type=＂text/javascript＂> function count(){ var res=0; var firnum = parseInt(document.getElementById(＂txt1＂).value); var secnum = parseInt(document.getElementById(＂txt2＂).value); ...

#武背菡# javascript写一个计算器
(17021439689)： <script> var s='3+4*5-4'; alert(eval('('+s+')')); </script> 用eval就可以了.

#武背菡# 如何用js做计算机? -
(17021439689)：我有一个js计算器的简单代码<br><br><html><br> <head><br> <script language=＂javascript＂><br><br> var among = 0;<br> var oper = ＂+＂;<br><br> function cal(obj) {<br><br> var press = obj.value; //得到所按键的信息<br> var result = document....

#武背菡# 简易的网页计算器代码 -
(17021439689)：代码如下:<html><head><title>低B计算器</title><script language=＂javascript＂ type=＂text/javascript＂>var a;function t(){var num1=parseFloat(document.form1.textfield.value);var num2=parseFloat(document.form1.textfield2.value);var result;...

#武背菡# 求助,用js做个简易计算器 -
(17021439689)： <!DOCTYPE html><html><head><meta charset=＂utf-8＂> <title></title></head><body ><input type='text' id='txt1' /><select id='select'> <option value='+'>+</option><option value=＂-＂>-</option><option value=＂*＂>*</option><option value=...

#武背菡# 如何用JS创建一个简单的网页计算器 -
(17021439689)： <!doctype html> <html> <head> <title>计算器</title> <meta charset=＂utf-8＂/> <style type=＂text/css＂> .panel{ border:4px solid #ddd; width:192px; margin:100px auto; } .panel p,.panel input{ font-family:＂微软雅黑＂; font-size:20px; margin:...

志趣排行榜

用js代码做一个简易计算器如何用js做一个简易计算器html？

你可能感兴趣的

志趣排行榜

用js代码做一个简易计算器 如何用js做一个简易计算器html？

你可能感兴趣的

用js代码做一个简易计算器如何用js做一个简易计算器html？