html网页计算器代码怎么写？

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

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

<table id="calculater" onClick="calculater()">

<tr>

<td id="display" colspan="5">0</td>

</tr>

<tr>

<td class="numberkey" >1</td>

<td class="numberkey" >2</td>

<td class="numberkey" >3</td>

<td class="numberkey" >+</td>

<td class="numberkey"  id="deletesign">c</td>

</tr>

<tr>

<td class="numberkey" >4</td>

<td class="numberkey" >5</td>

<td class="numberkey" >6</td>

<td class="numberkey" >-</td>

<td rowspan="3" id="equality" onclick="resultscalcaulte()">=</td>

</tr>

<tr>

<td class="numberkey" >7</td>

<td class="numberkey" >8</td>

<td class="numberkey" >7</td>

<td class="numberkey" >*</td>

</tr>

<tr >

<td class="numberkey" >+/-</td>

<td class="numberkey" >0</td>

<td class="numberkey" >.</td>

<td class="numberkey" >/</td>         

</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的结果

你可以到别的网站去申请计数器、留言本什么的，然后只需把它给你的一段话插在主页里就行了，告诉你一个简单的法子，在编辑主页时你一定看到下面的三个标签，其中中间一个是“HTML”标签，点一下，你要插入一段语句，（这句话大抵是“<script src="http://…………"></script>或<a href="http://……">”什么的）就必须插入到HTML的页面里，在“HTML”而里找一下这句话“</body>”（看清了，这句话有个“/”，是在HTML的未尾。)找到这个语句后将你申请的计数器的那句话复制到这个语句之后，（最好之前备份一下这个页面文件，免得搞错了）复制完了保存一下，会发现那个“</body>”自己跑到后面去了，然后回到编辑页里看看，页面最后是不是多点东东？你可以试着上网看看这个计数器管不管用，方法嘛，你只要刷新一下你在硬盘上的页面文件就应能看到计数器了。记好，刷新是很重要的，凡是你修改并保存了页面，想看看改变后的结果，你只需点一下刷新就成啦，不必关掉再打开IE。这时你就可以对这个计数器象 *** 作图片一样放在你喜欢的地方了，剪切复制粘贴都行，放好后就不必管它，当你的主页上传后它就会每天忠实的给你报告访问量了。

满意请采纳

唉，为什么写这么多代码呢。。。。

本来，就不应该完全给代码的，面对任何人都是。

况且你看看楼主，很明显，他是个比较喜欢钻研的人，计数器自己写，当然是喜欢DIY喽。呵呵。给这么多代码，还有点问题。让人家怎么搞嘛。。。。呵呵。。。开玩笑啦。。。

我说说原理算了。。。

两个办法。

1：JAVASCRIPT做。

写一个函数。读取TXT文件的。里面就是记录你的访问统计信息的。在你的HTML里用这个函数读出你的访问统计出来。就可以了。

2：动态写静态。

把你的HTML的源码写到数据库里，把显示访问的那个数设置为一个特殊字符串，如replace_string1,然后写个ASP，数据库里的HTML源代码读出来。再用replace函数把原来的特殊字符串（这里是replace_string2)换成你的统计数字。再利用ASP的FSO写静态HTML页面。就可以了。呵呵。对了，动态页面里的访问统计你知道写的吧。呵呵。那就ok了。。。

上面两种方法，各有各的好处。。。。

第一种。JS写的，当然，没那么麻烦，而且也很“动态”，缺点，要运行JS代码，每次访问都是同样的速度，“慢”。呵呵。希望你明白引号的意思。。。。（这方法用得比较多一些）

第二种。ASP的FSO写静态页面。应该用的人比较少吧。呵呵。优点，纯HTML，无JS，这样运行速度比较快一点。缺点，如果每次受访问都去重写HTML页面，相对来说就慢了，但是如果你一个星期，一个月更新一次。那么访问速度就比较可观了。

OK。原理都在上面了。写法的话，DIY吧。呵呵。

祝你好运！

---