如何用css js制作计算器？

2023-02-21 17:03:02html-css07

如何用css js制作计算器？,第1张

源代码如下：

<!doctype html>

<html>

<head>

<title>js加减乘除计算器代码</title>

<style>

body,ul{ margin:0pxpadding:0px}

body{ background:#AF6332}

li{ list-style:none}

.fl{ float:left}

.fr{ float:right}

.clearfix:after{ content:""display:blockclear:both}

.clearfix{zoom:1}

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

.calBox{ width:460pxpadding-bottom:10pxbackground:#FDFDFDborder-radius:5pxposition:absoluteleft:50%top:50%margin-left:-230pxmargin-top:-225pxbox-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) insetbackground:#F9F9F9overflow:hidden}

input{ width:406pxheight:82pxmargin:10px 7px 0pxborder-radius:5pxborder:1px solid #64655Fbox-shadow:0px 5px 2px rgba(157,157,145,0.8) inset-webkit-box-shadow:0px 5px 2px rgba(157,157,145,0.8) insetoutline:nonebackground:#FCFDEBtext-align:rightfont-family:"微软雅黑"font-size:40pxpadding:0px 10px}

ul{}

li{ list-style:nonewidth:74pxheight:34pxline-height:34pxtext-align:centerfont-family:"微软雅黑"border:1px solid #8B8B8Bborder-radius:5pxbackground:url(/jscss/demoimg/201402/calBg) repeat-xfloat:leftmargin:12px 6px 0px}

.one li{ height:44pxbackground:url(/jscss/demoimg/201402/calBg1.jpg) repeat-xline-height:44pxcursor:pointer}

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

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

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

.zero{ width:160px}

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

.twoBox{ width:353pxoverflow:hidden}

.two{ width:358px}

.calBox .three { margin:0px}

.calu{ padding:0px 10pxwidth:470px}

</style>

function findArr(a,c){for(var b=0b<a.lengthb++){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=0c<e.lengthc++){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=0i<aNum.lengthi++)

{

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=0j<aPer.lengthj++)

{

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>

html网页计算器代码编写过程如下：

1.首先我们要做好一个计算器的界面，主要用到html与css的知识，下面是代码

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr >

</tr>

上面设置一个简单的table表格，主要内容是计算器的数字键盘和符号，还有就是class名和ID名，函数名，主要是用作css样式设计和javascript程序设计，后面会用到，就先贴出来了

colspan="5" 是合并五列的意思，表示这个单元格要占五列

rowspan="3"是合并三行的意思，表示这个单元格要占三行

效果如下，这样一个简单的架构就完成了

2.接下来就是css的设计，下面是代码

padding:0

margin:1px

}

#calculater{

margin: auto

margin-top: 30px

border: solid 6px #2371D3

border-spacing: 0px

}

#display{

width: 100%

height: 30px

border-bottom: solid 4px #2371D3

font-weight: bold

color: #193D83

font-family: 黑体

padding-left: 2px

}

.numberkey{

cursor: pointer

width: 40px

height: 30px

border: solid 1px #FFFFFF

background: #2371D3

color: #ffffff

text-align: center

font-weight: bold

font-family: 黑体

}

#equality{

cursor: pointer

width: 40px

height: 100%

background: #2371D3

border: solid 1px #FFFFFF

color: #ffffff

text-align: center

font-weight: bold

font-family: 黑体

}

.numberkey:hover{

background: #EA6F30

}

#equality:hover{

background: #EA6F30

}

以上是css代码，比较简单

border-spacing: 0px

这里代码的意义是：table中单元格与单元格，表格边缘都有默认距离，这里border-spacing: 0px能使其默认距离为零，没有这句会比较难设计好看的样式。

cursor: pointer

这里代码的意义是：使鼠标放在上面时变成一个手的标志

效果如下

3.接下来是javascript的代码，按照思路来一点点写

首先我们要设计，当鼠标点击某个单元格时我们能获取这个单元格上的内容，即数字或符号

所以我们在table标签里加上onClick="calculater()"，添加一个点击事件

然后用event.srcElement.innerText获取单元格上的内容，event是事件的意思，在这里这个事件当然是点击了，srcElement就是事件的元素，在这里是被点击的单元格，innerText是获取这个单元格的内容。

这里我们就可以写出这个函数第一行代码，获取被点击的单元格的内容

function calculater(){

results=event.srcElement.innerText

}

results就是单元格的内容

4.当然获取了什么要显示在第一个单元格那里，这里我们还是用innerText，来输出这个点击的值

display.innerText=results

这里代码的意义是：display是第一格单元格的id,就是在第一行显示你点击了什么

calculater()的代码就变成这样

function calculater(){

results=event.srcElement.innerText

display.innerText=results

}

这样我们就能输出我们点击的单元格内容

5.但这样我们只能输出一次单击的内容，为了把内容串起来，我们把代码改为

var results=""

function calculater(){

results+=event.srcElement.innerText

display.innerText=results

}

设置results为全局变量，event.srcElement.innerText用+=累加进results，

这样我们就能输入并显示一条算式

6.我们在“=”单元格标签里加上onClick="resultscalcaulte()"，计算这个结果

function resultscalcaulte(){

calresults=eval(results)

display.innerText=calresults

}

eval()能运行括号里的javascript语句的字符串，并返回其值，如果results等于7+8，那eval就会计算7+8，并返回56，然后后面一条代码把56显示出来

7.加入上面的运算后，还是无法显示结果，原因是点击“=”单元格会先触发resultscalcaulte()函数，再触发calculater()函数，所以我们在resultscalcaulte()得到的结果就被calculater()的结果覆盖了，我们需要再在calculater()里加上

if (event.srcElement.innerText=="=") {

return

}

使点击“=”单元格触发的calculater()函数得不到任何结果

最后得到最简单的计算器运算代码

var results=""

var calresults=""

function calculater(){

if (event.srcElement.innerText=="=") {

return

}

results+=event.srcElement.innerText

display.innerText=results

}

function resultscalcaulte(){

calresults=eval(results)

display.innerText=calresults

}

8.下面是计算7*8的结果

<!DOCTYPE html>

<head>

</head>

<body>

</select>

function validate(str){

var reg = /^\d+$/

if (!reg.test(str)) {

alert("请输入数字")

}

function calculator(){

var pre=document.getElementById("pre").value

var next=document.getElementById("next").value

var opra=document.getElementById("operator").value

var result=0

switch(opra) {

case "+":

result=parseInt(pre)+parseInt(next)

break

case "-":

result=parseInt(pre)-parseInt(next)

break

case "*":

result=parseInt(pre)*parseInt(next)

break

case "/":

if(parseInt(next)!=0){

result=parseInt(pre)/parseInt(next)

}

else{

alert("除数不能为0")

return

}

break

default:

break

}

document.getElementById("result").value=result

}

</script>

</body>

</html>

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：为什么要模块化，如何定义一个amdcmd的模块

# 下一篇：日本电影《杀戮都市》下集结局是什么？

推荐阅读

热门文章

最新发布

标签列表

如何用css js制作计算器？

给您推荐相同类型的内容：