使用html+css+javaScript 完成计算器

男娘i 2023-09-26 20:14 6阅读 0赞

## 一、先用html与css搭建骨架 ##

思路:

1.  将计算器的数字按钮放进一个表格里,
2.  再通过css修饰
3.  然后对指定的数字按钮或功能按钮添加事件
4.  将需要计算的式子放进一个字符串里,最后通过全局方法eval( )计算出来

> html的骨架搭建

//这里的用一个 div 将内容包住, 然后再align="center" 将计算机居中
    <div align="center">
    	<div class="main_div">
    		<div class="top_div">wswsjwq的计算器</div>
    		<textarea id="main_div_area" cols="35px" rows="3px"></textarea>
    		<table class="mian_div_table" cellpadding="0" cellspacing="10">
    			<tr>
    				<td class="cell_nub">7</td>
    				<td class="cell_nub">8</td>
    				<td class="cell_nub">9</td>
    				<td class="cell_nub">+</td>
    			</tr>
    			<tr>
    				<td class="cell_nub">4</td>
    				<td class="cell_nub">5</td>
    				<td class="cell_nub">6</td>
    				<td class="cell_nub">-</td>
    			</tr>
    			<tr>
    				<td class="cell_nub">1</td>
    				<td class="cell_nub">2</td>
    				<td class="cell_nub">3</td>
    				<td class="cell_nub">*</td>
    			</tr>
    			<tr>
    				<td class="cell_nub">0</td>
    				//使用οnclick="函数()" 添加点击事件
    				<td onclick="clearArea()">C</td>
    				<td onclick="sum()">=</td>
    				<td class="cell_nub">/</td>
    			</tr>
    		</table>
    	</div>
    </div>

效果:  
![在这里插入图片描述][8e0451ecbe3f4e4f82f76fb1b243fffe.png]

> css点缀修饰

效果:  
![在这里插入图片描述][e173613527ee4c37a2e0aeb2a004962f.png]  
最后的大头javaScript:

当我写javaScript时候遇到的问题;

1.  就是获取文本域的标签对象(也叫文本域的DOM对象)时候,我给那个文本域标签使用class命名,获取DOM对象时候,无法修改文本域里的内容  
    如图:  
    ![在这里插入图片描述][337c4c6992f546a0b84a2c708af23e93.png]

![在这里插入图片描述][735d8acd535e4217afe31c91e6b24476.png]

点击数字按键并不能将按键的内容放到文本域里

1.  在我想将获取的计算式子放到文本域时候老想着使用

areaObj.innerHTML = "我是获取的按钮值";
    
    这样无法获取到,因为文本域标签时功能性标签,并不是想div那样的包裹标签,
    所以应该用value
    
    areaObj.value = "我是获取的按钮值";

1.  还要再注意一下给一类标签添加事件的代码块

如果foreach忘记的兄弟们 [点这里][Link 1]

1.  还有一点  
    如果要在javaScript里获取对象, 那就要写在body的后面

> 这是由于脚本语言是从上向下加载顺序有关

--------------------

**若有错误, 及时提出,作者秒回**

[8e0451ecbe3f4e4f82f76fb1b243fffe.png]: https://img-blog.csdnimg.cn/8e0451ecbe3f4e4f82f76fb1b243fffe.png
[e173613527ee4c37a2e0aeb2a004962f.png]: https://img-blog.csdnimg.cn/e173613527ee4c37a2e0aeb2a004962f.png
[337c4c6992f546a0b84a2c708af23e93.png]: https://img-blog.csdnimg.cn/337c4c6992f546a0b84a2c708af23e93.png
[735d8acd535e4217afe31c91e6b24476.png]: https://img-blog.csdnimg.cn/735d8acd535e4217afe31c91e6b24476.png
[Link 1]: http://t.csdn.cn/z4b4c