您的位置:

csjs制作计算器(js编写计算器)

csjs制作计算器(js编写计算器)

更新:

本文目录一览:

如何使用javascript编写一个计算器

首先,由于JS的存在数值的精度误差问题:

0.1+0.2   //0.30000000000000004

0.3-0.1   //0.19999999999999998

所以在编写计算器是应首先解决计算精度问题,以下四个代码段分别是js中精确的加减乘除运算函数

//浮点数加法运算

function floatAdd(arg1,arg2){

var r1,r2,m;

try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}

try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}

m=Math.pow(10,Math.max(r1,r2));

return (arg1*m+arg2*m)/m

}

//浮点数减法运算

function floatSub(arg1,arg2){

   var r1,r2,m,n;

   try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}

   try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}

   m=Math.pow(10,Math.max(r1,r2));

   //动态控制精度长度

   n=(r1=r2)?r1:r2;

   return ((arg1*m-arg2*m)/m).toFixed(n);

}

//浮点数乘法运算

function floatMul(arg1,arg2){

   var m=0,s1=arg1.toString(),s2=arg2.toString();

   try{m+=s1.split(".")[1].length}catch(e){}

   try{m+=s2.split(".")[1].length}catch(e){}

   return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)

}

//浮点数除法运算

function floatDiv(arg1,arg2) {

   var t1 = 0, t2 = 0, r1, r2;

   try {t1 = arg1.toString().split(".")[1].length} catch (e) {}

   try {t2 = arg2.toString().split(".")[1].length} catch (e) {}

   with (Math) {

       r1 = Number(arg1.toString().replace(".", ""));

       r2 = Number(arg2.toString().replace(".", ""));

       return (r1 / r2) * pow(10, t2 - t1);

   }

}

以下是详细的计算器代码: 

HTML5

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

title简单计算器/title

link href="main.css" rel="stylesheet"

/head

body

div id="calculator"

div id="calculator_container"

h3计算器/h3

table id="calculator_table"

tbody

tr

td colspan="5"

input type="text" id="resultIpt" readonly="readonly" value="" size="17" maxlength="17" style="width:294px;color: black"

/td

/tr

tr

tdinput type="button" value="←"       class="btn_color1 btn_operation"/td

tdinput type="button" value="全清"     class="btn_color1 btn_operation"/td

tdinput type="button" value="清屏"     class="btn_color1"/td

tdinput type="button" value="﹢/﹣"    class="btn_color2 btn_operation"/td

tdinput type="button" value="1/×"     class="btn_color2 btn_operation"/td

/tr

tr

tdinput type="button"  value="7"     class="btn_color3 btn_number"/td

tdinput type="button"  value="8"     class="btn_color3 btn_number"/td

tdinput type="button"  value="9"     class="btn_color3 btn_number"/td

tdinput type="button"  value="÷"    class="btn_color4 btn_operation"/td

tdinput type="button"  value="%"    class="btn_color2 btn_operation"/td

/tr

tr

tdinput type="button"   value="4"   class="btn_color3 btn_number"/td

tdinput type="button"   value="5"   class="btn_color3 btn_number"/td

tdinput type="button"   value="6"   class="btn_color3 btn_number"/td

tdinput type="button"   value="×"  class="btn_color4 btn_operation"/td

tdinput type="button"   value="√"  class="btn_color2 btn_operation"/td

/tr

tr

tdinput type="button"  value="1"   class="btn_color3 btn_number"/td

tdinput type="button"  value="2"   class="btn_color3 btn_number"/td

tdinput type="button"  value="3"   class="btn_color3 btn_number"/td

tdinput type="button"  value="-"  class="btn_color4 btn_operation"/td

td rowspan="2"

input type="button"  value="="  class="btn_color2" style="height: 82px" id="simpleEqu"

/td

/tr

tr

td colspan="2"

input type="button"  value="0"   class="btn_color3 btn_number" style="width:112px"

/td

tdinput type="button"  value="."   class="btn_color3 btn_number" /td

tdinput type="button"  value="+"  class="btn_color4 btn_operation"/td

/tr

/tbody

/table

/div

/div

script type="text/javascript" src="calculator.js"/script

/body

/html

CSS3

* {

margin: 0;

padding: 0;

}

#calculator{

position: relative;

margin: 50px auto;

width: 350px;

height: 400px;

border: 1px solid gray;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

-webkit-box-shadow: 2px 2px 4px gray;

-moz-box-shadow: 2px 2px 4px gray;

box-shadow: 2px 2px 4px gray;

behavior:url("ie-css3.htc");  /*IE8-*/

}

#calculator_table{

position: relative;

margin: 10px auto;

border-collapse:separate;

border-spacing:10px 20px;

}

h3{

position: relative;

width: 60px;

height: 30px;

margin: 0 auto;

}

#calculator_table td{

width: 50px;

height: 30px;

border: 1px solid gray;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

behavior:url("ie-css3.htc");  /*IE8-*/

}

#calculator_table td input{

font-size: 16px;

border: none;

width: 50px;

height: 30px;

color: white;

}

input.btn_color1{

background-color: orange;

}

input.btn_color2{

background-color: #133645;

}

input.btn_color3{

background-color: #59807d;

}

input.btn_color4{

background-color: seagreen;

}

input:active{

-webkit-box-shadow: 3px 3px 3px gray;

-moz-box-shadow: 3px 3px 3px gray;

box-shadow: 3px 3px 3px gray;

behavior:url("ie-css3.htc");  /*IE8-*/

}

JS

window.onload=function() {

var resultIpt = document.getElementById("resultIpt"); //获取输出文本框

var btns_number = document.getElementsByClassName("btn_number"); //获取数字输入按钮

var btns_operation = document.getElementsByClassName("btn_operation"); //获取操作按钮

var simpleEqu = document.getElementById("simpleEqu"); //获取"="按钮

var temp = "";

var num1= 0,num2=0;

//获取第一个数

for(var i=0;ibtns_number.length;i++){

btns_number[i].onclick=function (){

temp += this.value;

resultIpt.value = temp;

};

}

//对获取到的数进行操作

for(var j=0;jbtns_operation.length;j++) {

btns_operation[j].onclick = function () {

num1=parseFloat(resultIpt.value);

oper = this.value;

if(oper=="1/×"){

num1 = Math.pow(num1,-1); //取倒数

resultIpt.value = num1.toString();

}else if(oper=="﹢/﹣"){    //取相反数

num1 = -num1;

resultIpt.value = num1.toString();

}else if(oper=="√"){      //取平方根

num1 =Math.sqrt(num1);

resultIpt.value = num1.toString();

}else if(oper=="←"){    //删除个位

resultIpt.value = resultIpt.value.substring(0, resultIpt.value.length - 1);

}else if(oper=="全清"){  //清除数字

resultIpt.value = "";

}

else{          //oper=="+" "-" "×" "÷" "%"时,继续输入第二数字

temp = "";

resultIpt.value = temp;

}

}

}

//输出结果

simpleEqu.onclick=function(){

num2=parseFloat(temp);  //取得第二个数字

calculate(num1, num2, oper);

resultIpt.value = result.toString();

}

};

//定义一个计算函数

function calculate(num1, num2, oper) {

switch (oper) {

case "+":

result=floatAdd(num1, num2); //求和

break;

case "-":

result=floatSub(num1, num2); //求差

break;

case "×":

result=floatMul(num1, num2);  //求积

break;

case "÷":

result=floatDiv(num1, num2);  //求商

break;

case "%":

result=num1%num2;  //求余数

break;

}

}

//精确计算

//浮点数加法运算

function floatAdd(arg1,arg2){

var r1,r2,m;

try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}

try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}

m=Math.pow(10,Math.max(r1,r2));

return (arg1*m+arg2*m)/m

}

//浮点数减法运算

function floatSub(arg1,arg2){

var r1,r2,m,n;

try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}

try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}

m=Math.pow(10,Math.max(r1,r2));

//动态控制精度长度

n=(r1=r2)?r1:r2;

return ((arg1*m-arg2*m)/m).toFixed(n);

}

//浮点数乘法运算

function floatMul(arg1,arg2){

var m=0,s1=arg1.toString(),s2=arg2.toString();

try{m+=s1.split(".")[1].length}catch(e){}

try{m+=s2.split(".")[1].length}catch(e){}

return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)

}

//浮点数除法运算

function floatDiv(arg1,arg2) {

var t1 = 0, t2 = 0, r1, r2;

try {t1 = arg1.toString().split(".")[1].length} catch (e) {}

try {t2 = arg2.toString().split(".")[1].length} catch (e) {}

with (Math) {

r1 = Number(arg1.toString().replace(".", ""));

r2 = Number(arg2.toString().replace(".", ""));

return (r1 / r2) * pow(10, t2 - t1);

}

}

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

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

html

head

titlejs运算/title

boby

table

tr

td第一个数/td

tdinput type="text" id="onesum"/td

/tr

tr

td运算符号/td

tdinput type="text" id="fh"/td

/tr

tr

td第二个数/td

tdinput type="text" id="twosum"/td

/tr

tr

td计算结果/td

tdinput type="text" id="sum"/td

/tr

tr

td colspan="2"input type="button" value="   计算   " onclick="js()"/td

/tr

table

script

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;

}

/script

/boby

/html

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

如何用css js制作计算器?

源代码如下:

!doctype html

html

head

meta charset="utf-8"

titlejs加减乘除计算器代码/title

style

body,ul{ margin:0px; padding:0px;}

body{ background:#AF6332}

li{ list-style:none;}

.fl{ float:left;}

.fr{ float:right;}

.clearfix:after{ content:""; display:block;clear:both}

.clearfix{zoom:1;}

/*是用inset可以将外部阴影改成内部阴影;若要实现内外阴影同时存在,将其并在一行用逗号隔开*/

.calBox{ width:460px; padding-bottom:10px;background:#FDFDFD; border-radius:5px; position:absolute; left:50%; top:50%; margin-left:-230px; margin-top:-225px; box-shadow:0px 0px 10px rgba(0,0,0,0.8),0px 0px 10px rgba(0,0,0,0.5) inset; -webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.8),0px 0px 10px rgba(0,0,0,0.5) inset; background:#F9F9F9; overflow:hidden}

input{ width:406px; height:82px; margin:10px 7px 0px; border-radius:5px; border:1px solid #64655F; box-shadow:0px 5px 2px rgba(157,157,145,0.8) inset; -webkit-box-shadow:0px 5px 2px rgba(157,157,145,0.8) inset; outline:none; background:#FCFDEB; text-align:right; font-family:"微软雅黑"; font-size:40px; padding:0px 10px;}

ul{}

li{ list-style:none; width:74px; height:34px; line-height:34px; text-align:center; font-family:"微软雅黑"; border:1px solid #8B8B8B; border-radius:5px; background:url(/jscss/demoimg/201402/calBg) repeat-x; float:left; margin:12px 6px 0px;}

.one li{ height:44px; background:url(/jscss/demoimg/201402/calBg1.jpg) repeat-x; line-height:44px;cursor:pointer;}

.one .orange{ background:url(/jscss/demoimg/201402/calBg2.jpg) repeat-x; border:1px solid #875733;}

.one .black{ background:url(/jscss/demoimg/201402/calBg3.jpg) repeat-x; border:1px solid #363636; color:#fff;}

.one .gray{ background:url(/jscss/demoimg/201402/calBg4.jpg) repeat-x; border:1px solid #5F6366;}

.zero{ width:160px;}

.one .deng{ background:url(/jscss/demoimg/201402/calBg5.jpg); height:100px;}

.twoBox{ width:353px; overflow:hidden; }

.two{ width:358px;}

.calBox .three { margin:0px}

.calu{ padding:0px 10px; width:470px;}

/style

script type="text/javascript"

function findArr(a,c){for(var b=0;ba.length;b++){if(a[b]==c){return true}}return false}function getClass(d,f){if(document.getElementsByClassName){return d.getElementsByClassName(f)}else{var a=[];var e=document.getElementsByTagName("*");for(var c=0;ce.length;c++){var b=e[c].className.split(" ");if(findArr(b,f)){a.push(e[c])}}return a}};

window.onload=function()

{

var aNum=getClass(document,'num');

var oText=document.getElementById('text');

var aPer=getClass(document,'oper');

var oPer=document.getElementById('per');

var oText1=document.getElementById('text1');

var oDeng=getClass(document,'deng')[0];

var oSq=getClass(document,'sq')[0];

var oRec=getClass(document,'rec')[0];

var oZheng=getClass(document,'zheng')[0];

var oOn=getClass(document,'on')[0];

var oOff=getClass(document,'off')[0];

var oClea=getClass(document,'clea')[0];

var bOnOrOffClick=false;

function fnNum(a)

{

var bClear=false;

oText.value='0'

for(var i=0;iaNum.length;i++)

{

aNum[i].onclick=function()

{

if(!bOnOrOffClick)return;

if(bClear)

{

bClear=false;

}

if(oText.value.indexOf('.')!=-1)

{

if(this.innerHTML=='.')

{

return;

}

}

if(oPer.valueoText.valueoText1.value=='')

{

oText1.value=oText.value;

oText.value='';

}

var re=/^0\.{1}\d+$/;

var re1=/^([0]\d+)$/;

oText.value+=this.innerHTML;

if(re.test(oText.value))

{

return;

}

if(re1.test(oText.value))

{

oText.value=this.innerHTML;

}

}

//符号部分的添加

for(var j=0;jaPer.length;j++)

{

aPer[j].onclick=function()

{

if(oText.valueoPer.valueoText1.value)

{

var n=eval(oText1.value+oPer.value+oText.value);

oText.value=n;

oText1.value='';

}

oPer.value=this.innerHTML;

}

}

//点击等号的时候

oDeng.onclick=function()

{

//+-*/%的情况

if(oText1.value==''oPer.value==''oText.value=='')

{

return;

}

var n=eval(oText1.value+oPer.value+oText.value);

oText.value=n;

oText1.value='';

oPer.value='';

bClear=true;

}

//点击开根号的时候

oSq.onclick=function()

{

var m=Math.sqrt(oText.value);

oText.value=m;

}

//点击倒数的时候

oRec.onclick=function()

{

var a=1/oText.value;

if(oText.value=='0')

{

a='正无穷'

}

oText.value=a;

}

//正负号的时候

oZheng.onclick=function()

{

if(oText.value0)

{

oText.value=-oText.value;

}

else

{

oText.value =-oText.value;

}

}

//清屏的时候

oClea.onclick=function()

{

oText.value='0';

oText1.value='';

oPer.value='';

}

}

}

//on时

oOn.onclick=function()

{

bOnOrOffClick=true;

fnNum(bOnOrOffClick);

}

//off时

oOff.onclick=function()

{

bOnOrOffClick=false;

fnNum(bOnOrOffClick);

oText.value='';

}

}

/script

/head

body

div class="calBox"

div class="calu"

input type="text" id="text"

ul class="one clearfix"

li class="orange on"开机/li

li class="orange off"关机/li

li class="orange clea"清屏/li

li class="black zheng"+/-/li

li class="black rec"1/x/li

li class="num"7/li

li class="num"8/li

li class="num"9/li

li class="gray oper"//li

li class="black oper"%/li

li class="num"4/li

li class="num"5/li

li class="num"6/li

li class="gray oper"*/li

li class="black sq"√/li

!-- --

/ul

div class="clearfix"

div class="twoBox fl"

ul class="one fl two"

li class="num"1/li

li class="num"2/li

li class="num"3/li

li class="gray oper"-/li

li class="zero num"0/li

li class="num"./li

li class="gray oper"+/li

/ul

/div

ul class="one three clearfix fl"

li class="black deng fl"=/li

/ul

/div

/div

/div

input type="text" id="per" style="display:none"

input type="text" id="text1" style="display:none"

div style="text-align:center;clear:both"

/div

/body

/html

csjs制作计算器(js编写计算器)

本文目录一览: 1、如何使用javascript编写一个计算器 2、如何用js做一个简易计算器? 3、如何用css js制作计算器? 如何使用javascript编写一个计算器 首先,由于JS的存在数

2023-12-08
用js实现网页计算器,JS计算器

本文目录一览: 1、JS实现计算器 2、如何用JS创建一个简单的网页计算器 3、如何用js做一个简易计算器? 4、利用JS算术运算符实现一个简单的页面计算器功能。效果见下图: 5、如何使用JS完成一个

2023-12-08
计算js安装cpu,js编写简易计算器编程

本文目录一览: 1、怎样用JS获取客户端的硬件,系统等信息(适 2、面对JS用软件刷出来的CPU和显卡参数 3、js 获取当前网速 及 cpu占用率 怎样用JS获取客户端的硬件,系统等信息(适 Jav

2023-12-08
实用计算器js代码怎么写呢,js简单计算器的实现

2022-11-23
js设计一个网页计算器,用js做简单网页计算器

本文目录一览: 1、如何用js做一个简易计算器 2、如何使用javascript编写一个计算器 3、如何用JS创建一个简单的网页计算器 4、用js代码做一个简易计算器 如何用js做一个简易计算器 js

2023-12-08
js高级程序设计笔记14(js高级程序设计笔记14页)

本文目录一览: 1、JavaScript高级程序设计 该怎么看 2、JavaScript学习笔记之数组基本操作示例 3、JS中有关sort以及return的问题 JavaScript高级程序设计 该怎

2023-12-08
高级计算器js代码,高级计算器js代码大全

本文目录一览: 1、如何使用javascript编写一个计算器 2、计算器使用JS代码如下,请高手做个连等功能? 3、计算器怎么用JS写 4、用JS脚本实现网页计算器!!求代码!求高手!!!! 5、用

2023-12-08
js网页在线计算器运算,js 计算

本文目录一览: 1、用JS脚本实现网页计算器!!求代码!求高手!!!! 2、用JavaScript做个网页版的计算器? 3、如何用JS创建一个简单的网页计算器 4、怎么在网页上制作一个简易计算器 5、

2023-12-08
js写的计算总额代码,js写的计算总额代码是什么

2022-11-22
js金额计算代码(js计算价格合计)

本文目录一览: 1、js表单计算金额问题 2、javascript自动计算金额(计算结果只显示小数点后的两位) 3、javascript自动计算金额(急) 4、JS代码自动计算代码小数保留两位位四舍五

2023-12-08
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08
用java编写计算器(用java编写计算器代码)

2022-11-12
java编写计算器,java编写计算器程序代码

2022-11-27
js计算梯形代码,js计算阶乘的代码

2022-11-23
js计算器代码手机版下载(JS简易计算器)

本文目录一览: 1、用js代码做一个简易计算器 2、网页版计算器代码 3、简易的加减乘除的计算器代码js 用js代码做一个简易计算器 function test(){ var txt1 = docum

2023-12-08
网页计算器简易js代码,网页计算器简易js代码

本文目录一览: 1、简易的加减乘除的计算器代码js 2、如何用js做一个简易计算器 3、用js代码做一个简易计算器 简易的加减乘除的计算器代码js //htmlinput type="text" id

2023-12-08
求一个java编程计数器的代码,计算器编程代码java

2022-11-22
php日期倒计时,php日期计算器

2022-11-29
计算js文件代码量(js 大数计算)

本文目录一览: 1、如何写出规范的JavaScript代码 2、百度广告管家JS代码问题 3、求代码!js自动计算 4、完美解决js校验文件大小 5、求指导web项目开发,前端js代码的整理。多个Js

2023-12-08
java计算器,java计算器代码

2022-11-27