html+css+javascript计算器，html+css

编程之家2026-05-22710次浏览

大家好，今天小编来为大家解答html+css+javascript计算器这个问题，html+css很多人还不知道，现在让我们一起来看看吧！

如何用css js制作计算器

源代码如下：

<!doctype html>

<html>

<head>

<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>

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>

</ul>

</ul>

</div>

</ul>

</div>

</div>

</body>

</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>

</tr>

<tr>

<tdheight="30">

<inputtype="button"name="btn4"id="btn4"value="4"onclick="connectionDigital(this);"/></td>

</tr>

<tr>

<tdheight="30">

<inputtype="button"name="btn1"id="btn1"value="1"onclick="connectionDigital(this);"/></td>

</tr>

<tr>

<tdheight="30"><inputtype="button"name="btn0"id="btn0"value="0"onclick="connectionDigital(this);"/></td>

</tr>

</table>

</body>

</html>

JAVAscript与css的区别是什么呀

首先要搞懂这2个是干什么的：

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作等。

css是一种用来表现HTML或XML等文件样式的语言。比如，使用CSS可以更加灵活地控制具体的页面外观，从精确的布局定位到特定的字体和样式。

这2种都是用来做网页的语言，只是使用功能不一样，当然，JS现在可以用来做服务器端开发了。

html+css+javascript计算器和html+css的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！

c语言函数库查询手册(c函数库手册中文版)搭建个人网站？怎么建立个人网站