一、先用html与css搭建骨架
思路:
- 将计算器的数字按钮放进一个表格里,
- 再通过css修饰
- 然后对指定的数字按钮或功能按钮添加事件
- 将需要计算的式子放进一个字符串里,最后==通过全局方法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>
//使用onclick="函数()" 添加点击事件
<td onclick="clearArea()">C</td>
<td onclick="sum()">=</td>
<td class="cell_nub">/</td>
</tr>
</table>
</div>
</div>效果:
css点缀修饰
<style type="text/css">
.main_div {
width: 500px;
height: 350px;
background-color: #F0F8FF;
}
.top_div {
height: 50px;
line-height: 50px;
background-color: #DFE9F5;
font-weight: bold;
font-size: x-large;
font-family: "宋体";
}
.mian_div_table {
width: 500px;
height: 150px;
}
.mian_div_table td {
padding-left: 40px;
font-size: 30px;
background-color: #A9A9A9;
}
#main_div_area {
font-size: xx-large;
}
</style>效果:
最后的大头javaScript:
<script type="text/javascript">
// 获取到每个数字按键的document对象
var Btn = document.getElementsByClassName("cell_nub");
//获取文本域对象,***注意此处只能使用id来获取文本域对象***
var areaObj = document.getElementById("main_div_area");
//定义一个字符串来接收输入内容
var Str = "";
var arr = [];
//给同一个类添加事件
for (var i = 0; i < Btn.length; i++) {
arr.push(i);
arr.forEach((value) => {
Btn[value].onclick = function () {
//打印出按压结果以便观看
console.log("按压值: "+Btn[value].innerHTML);
//将值传给拼接字符串的方法add()
add(Btn[value].innerHTML);
};
});
}
//字符串拼接方法
function add(temp){
console.log("拼接字符串方法执行");
console.log(Str.charAt(Str.length-1));
//如果此时的按压值是+-*/与上一个字符重复,就要覆盖上一次的符号
if((Str.charAt(Str.length-1)=="+"||Str.charAt(Str.length-1)=="-"||Str.charAt(Str.length-1)=="*")&&(temp=="+"||temp=="-"||temp=="*"||temp=="/")){
console.log("此时的按压值 :"+temp);
//截取0到最后一个,不包括最后一个
Str=Str.substring(0,Str.length-1);
console.log("删除重复符号后"+Str);
Str+=temp;
console.log("添加后"+Str);
}else{
Str+=temp;
}
areaObj.value = Str;
console.log("字符串Str="+Str);
}
//使用eval()求和的方法
function sum(){
console.log("求和方法执行");
console.log("结果是: "+eval(Str));
areaObj.value = eval(Str);
}
//清除的方法
function clearArea(){
console.log("清除方法执行");
Str="";
console.log("清除后"+Str);
areaObj.value = Str;
}
</script>==当我写javaScript时候遇到的问题;==
- 就是获取文本域的标签对象(也叫文本域的DOM对象)时候,我给那个文本域标签使用class命名,获取DOM对象时候,无法修改文本域里的内容
如图:
!在这里插入图片描述](https://img-bog.csdnimg.cn/337c4c6992f546a0b84a2c708af23e93)
在这里插入图片描述](https://ucc.alicdn.com/images/user-upload-01/735d8acd535e4217afe31c91e6b24476.png)
点击数字按键并不能将按键的内容放到文本域里
- 在我想将获取的计算式子放到文本域时候老想着使用
areaObj.innerHTML = "我是获取的按钮值";
这样无法获取到,因为文本域标签时功能性标签,并不是想div那样的包裹标签,
所以应该用value
areaObj.value = "我是获取的按钮值";- 还要再注意一下给一类标签添加事件的代码块
var arr = [];
//用for循环给获取的一组类标签加事件
for (var i = 0; i < Btn.length; i++) {
arr.push(i);
arr.forEach((value) => {
Btn[value].onclick = function () {
//打印出按压结果以便观看
console.log("按压值: "+Btn[value].innerHTML);
//将值传给拼接字符串的方法add()
add(Btn[value].innerHTML);
};
});
}如果foreach忘记的兄弟们 [点这里]
- 还有一点
如果要在javaScript里获取对象, 那就要写在body的后面
这是由于脚本语言是从上向下加载顺序有关
若有错误, 及时提出,作者秒回
){kind=link}