html计算器代码(html制作简易计算器)
大家好，今天来为大家分享html计算器代码的一些知识点，和html制作简易计算器的问题解析，大家要是都明白，那么可以忽略，如果不太清楚的话可以看看本篇文章，相信很大概率可以解决您的问题，接下来我们就一起来看看吧！
用javascript编写计算器
用javascript编写计算器:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""">
<htmlxmlns="">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>Javascript实现计算器</title>
<styletype="text/css">
input{
width:30px;
height:20px;
text-align:center;
}
#tbCalculatortd
{
text-align:center;
vertical-align:middle;
}
</style>
<scripttype="text/javascript">
varresult;//保存点击运算符之前输入框中的数值
varoperator;//保存运算符
varisPressEqualsKey=false;//记录是否按下”=“键
//数字键事件
functionconnectionDigital(control)
{
vartxt=document.getElementById('txtScream');
if(isPressEqualsKey)
{
txt.value="";//已进行过计算，则清空数值输入框重新开始
isPressEqualsKey=false;
}
//数值输入已经存在小数点,则不允许再输入小数点
if(txt.value.indexOf('.')>-1&&control.value=='.')
returnfalse;
txt.value+=control.value;//将控件值赋给数值输入框中
}
//退格键事件
functionbackspace()
{
vartxt=document.getElementById('txtScream');
txt.value=txt.value.substring(0,txt.value.length-1);
}
//ce键事件：清空数字输入框
functionclearAll()
{
document.getElementById('txtScream').value="";
result="";
operator="";
}
//+、-、*、/事件
functioncalculation(control)
{
//将运算符保存入全局变量中
operator=control.value;
vartxt=document.getElementById('txtScream');
if(txt.value=="")returnfalse;//数值输入框中没有数字，则不能输入运算符
//将数值输入框中的值保存到计算表达式中
result=txt.value;
//清空输入框，以待输入操作值
txt.value="";
}
//计算结果
functiongetResult()
{
varopValue;
//计算表达式中存在运算符
varsourseValue=parseFloat(result);
vartxt=document.getElementById('txtScream');
if(operator=='*')
opValue=sourseValue*parseFloat(txt.value);
elseif(operator=='/')
opValue=sourseValue/parseFloat(txt.value);
elseif(operator=='+')
opValue=sourseValue+parseFloat(txt.value);
elseif(operator=='-')
opValue=sourseValue-parseFloat(txt.value);
txt.value=opValue;
isPressEqualsKey=true;
result="";
opValue="";
}
</script>
</head>
<body>
<tableid="tbCalculator"width="200"border="1"align="center"cellpadding="0"cellspacing="0"bordercolor="#0066FF">
<tr>
<tdheight="30"colspan="4"align="center">
<inputtype="text"name="txtScream"id="txtScream"style="width:180px;border-style:none;text-align:right;"readonly="readonly"/></td>
</tr>
<tr>
<tdheight="30"colspan="2">
<inputtype="button"name="btnCE"id="btnCE"value="C E"style="width:80px;"align="right";onclick="clearAll();"/></td>
<tdheight="30"colspan="2">
<inputtype="button"name="btn10"id="btn10"value="Backspace"style="width:80px;"align="right";onclick="backspace();"/></td>
</tr>
<tr>
<tdheight="30"><inputtype="button"name="btn7"id="btn7"value="7"onclick="connectionDigital(this);"/></td>
<td><inputtype="button"name="btn8"id="btn8"value="8"onclick="connectionDigital(this);"/></td>
<td><inputtype="button"name="btn9"id="btn9"value="9"onclick="connectionDigital(this);"/></td>
<td><inputtype="button"name="btn6"id="btn6"value="/"onclick="calculation(this);"/></td>
</tr>
<tr>
<tdheight="30">
<inputtype="button"name="btn4"id="btn4"value="4"onclick="connectionDigital(this);"/></td>
<td><inputtype="button"name="btn5"id="btn5"value="5"onclick="connectionDigital(this);"/></td>
<td><inputtype="button"name="btn6"id="btn6"value="6"onclick="connectionDigital(this);"/></td>
<td><inputtype="button"name="btn13"id="btn13"value="*"onclick="calculation(this);"/></td>
</tr>
<tr>
<tdheight="30">
<inputtype="button"name="btn1"id="btn1"value="1"onclick="connectionDigital(this);"/></td>
<td><inputtype="button"name="btn2"id="btn2"value="2"onclick="connectionDigital(this);"/></td>
<td><inputtype="button"name="btn3"id="btn3"value="3"onclick="connectionDigital(this);"/></td>
<td><inputtype="button"name="btn18"id="btn18"value="-"onclick="calculation(this);"/></td>
</tr>
<tr>
<tdheight="30"><inputtype="button"name="btn0"id="btn0"value="0"onclick="connectionDigital(this);"/></td>
<td><inputtype="button"name="btndot"id="btndot"value="."onclick="connectionDigital(this);"/></td>
<td><inputname="btn22"type="button"id="btn22"value="="onclick="getResult();"/></td>
<td><inputtype="button"name="btn23"id="btn23"value="+"onclick="calculation(this);"/></td>
</tr>
</table>
</body>
</html>
如何用css js制作计算器
源代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js加减乘除计算器代码</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;b<a.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;c<e.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;i<aNum.length;i++)
{
aNum[i].onclick=function()
{
if(!bOnOrOffClick)return;
if(bClear)
{
bClear=false;
}
if(oText.value.indexOf('.')!=-1)
{
if(this.innerHTML=='.')
{
return;
}
}
if(oPer.value&&oText.value&&oText1.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;j<aPer.length;j++)
{
aPer[j].onclick=function()
{
if(oText.value&&oPer.value&&oText1.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.value>0)
{
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>
c语言编写“多功能计算器”的代码
#include<stdio.h>
#include<windows.h>
#include<math.h>
double
EPS=10E-6;
double
sum(double
a,double
b)
{
return
a+b;
}
double
sub(double
a,double
b)
{
return
a-b;
}
double
mul(double
a,double
b)
{
return
a*b;
}
double
divv(double
a,double
b)
{
return
a/b;
}
int
rem(int
a
,
int
b)
{
return
a%b;
}
int
addnumber(int
c,int
d)
{
int
sum=0;
for(int
i=c;i<=d;i++)
{
sum+=i;
}
return
sum;
}
int
factor(int
n)
{
int
f=1;
for(int
i=1;i<=n;i++)
{
f*=i;
}
return
f;
}
void
displaymenu()
{
printf("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
\n");
printf("*############高级计算器############*
\n");
printf("************************************
\n");
printf("*
①加法运算
*
\n");
printf("*
②减法运算
*
\n");
printf("*
③乘法运算
*
\n");
printf("*
④除法运算
*
\n");
printf("*
⑤取余运算
*
\n");
printf("*
⑥累加运算
*
\n");
printf("*
⑦阶乘运算
*
\n");
printf("*
⊙结束运算
*
\n");
printf("************************************
\n");
printf("************************************
\n");
}
void
main()
{
int
c,d;
/*用于做四则运算的两个数值的说明*/
double
a,b;
/*用来做累加函数的两个参数值的说明*/
int
intresult;
double
result;
/*用于保存表单运算中函数的返回值*/
int
choice;
displaymenu();/*保存用户选择项目菜单项*/
while(1)
{
printf("请选择你所进行运算项目的符号：");
scanf("%d",&choice);
switch(choice)
{
case
1:
/*加法计算*/
printf("请输入两个数字：");
scanf("%lf%lf",&a,&b);
result=sum(a,b);
printf("%lf+%lf的计算结果是：%lf\n",a,b,result);
break;
case
2:
/*减法计算*/
printf("请输入两个数字：");
scanf("%lf%lf",&a,&b);
result=sub(a,b);
printf("%lf-%lf的计算结果是：%lf\n",a,b,result);
break;
case
3:
/*乘法计算*/
printf("请输入两个数字：");
scanf("%lf%lf",&a,&b);
result=mul(a,b);
printf("%lf*%lf的计算结果是：%lf\n",a,b,result);
break;
case
4:
/*除法计算*/
{
scanf("%lf%lf",&a,&b);
if(b-0.0<EPS)
printf("数字错误\n");
else
{
printf("请输入两个数字：");
result=divv(a,b);
printf("%lf/%lf的计算结果是：%lf\n",a,b,result);
}
break;
}
case
5:
/*取余计算*/
printf("请输入两个数字：");
scanf("%d%d",&c,&d);
result=rem(c,d);
printf("%d
%
%d的计算结果是：%d\n",c,d,result);
break;
case
6:
/*累加计算*/
printf("请输入两个整数");
scanf("%d%d",&c,&d);
intresult=addnumber(c,d);
printf("%d-%d的累加计算结果是：%d\n",c,d,intresult);
break;
case
7:
//阶乘计算
{
printf("请输入一个大于0小于10的整数字");
scanf("%d",&c);
if(c<0||c>10)
{
printf("请输入一个大于0小于10的整数字，数据错误。\n");
break;
}
intresult=factor(c);
printf("%d的阶乘计算结果是：%d\n",c,intresult);
break;
}
case
0:
printf("谢谢使用。欢迎下次再用。\n");
return
;
default:
printf("选择错误，程序结束\n");
break;
}
}
}
好了，文章到这里就结束啦，如果本次分享的html计算器代码和html制作简易计算器问题对您有所帮助，还望关注下本站哦！