Day1-使用Html+css+JavaSrcipt制作简易计算器
第一步:需要制作前端界面
使用表格和表单布局
<div class="main">
<div class="math">
<table>
<tr>
<td><input id="num1" type="text" class="txt"><td>
<td><input id="type" type="text" class="txt"><td>
<td><input id="num2" type="text" class="txt"><td>
<td><input id="result" type="text" class="txt"><td>
</tr>
</table>
</div>
<div class="key">
<table width="200">
<tr>
<td><input type="button" value="1" class="btn"></td>
<td><input type="button" value="2" class="btn"></td>
<td><input type="button" value="3" class="btn"></td>
<td><input type="button" value="+" class="btn"></td>
</tr>
<tr>
<td><input type="button" value="4" class="btn"></td>
<td><input type="button" value="5" class="btn"></td>
<td><input type="button" value="6" class="btn"></td>
<td><input type="button" value="-" class="btn"></td>
</tr>
<tr>
<td><input type="button" value="7" class="btn"></td>
<td><input type="button" value="8" class="btn"></td>
<td><input type="button" value="9" class="btn"></td>
<td><input type="button" value="x" class="btn"></td>
</tr>
<tr>
<td><input type="button" value="/" class="btn"></td>
<td><input type="button" value="0" class="btn"></td>
<td><input type="button" value="=" class="btn"></td>
<td><input type="button" value="%" class="btn"></td>
</tr>
</table>
</div>
咳咳,代码好像有点多。主要是因为布局使用表格,各个按钮之间比较好布局。
差不多,就是下面这个样子。
第二步:需要用css将前端界面美化。
<style>
.math{width:260px;height:32px;border:1px solid #000;}
.key{width:262px;height:140px; background-color:PINK;}
.txt{width:50px;}
.btn{width:50px; margin-right:10px;}
</style>
然后就变成这个样子了:
做得有点low,凑合着看吧。要做好看自己写。
第三步:需要用js实现具体功能。
首先要有编程思路,思考先实现哪一步。
从最简单的开始:将按钮上的值输入到第一个文本框中。
- 首先需要点击按钮才会把值传入第一个文本框中,所以要给每个按钮添加点击事件;
- 在点击事件上添加c(x)方法;传的值为x;
例:<input type="button" value="1" class="btn" onClick="c(1)">
例:<input type="button" value="2" class="btn" onClick="c(2)">
- 定义c(x)方法;
function c(x){
//获取文本框对象
var num1 = document.getElementById("num1");
var type = document.getElementById("type");
var num2 = document.getElementById("num2");
var result = document.getElementById("result");
//判断x的值
switch(x){
case 11:
type.value = "+";
break;
case 12:
type.value = "-";
break;
case 13:
type.value = "*";
break;
case 14:
type.value = "/";
break;
case 15:
type.value = "%";
break;
//为 = 的时
case 20:
//判断符号
switch(type.value){
case "+":
result.value = add(parseInt(num1.value),parseInt(num2.value));
break;
case "-":
result.value = subtraction(parseInt(num1.value),parseInt(num2.value));
break;
case "*":
result.value = muli(parseInt(num1.value),parseInt(num2.value));
break;
case "/":
if(parseInt(num2) == 0){
alert("被除数不能为0");
}else{
result.value = division(parseInt(num1.value),parseInt(num2.value));
}break;
case "%":
result.value = yu(parseInt(num1.value),parseInt(num2.value));
break;
}
break;
//优化,将0-9,改为default;
default:
//判断如果有符号,给num1赋值,否则给num2赋值
if(type.value == ""){
//因为传过来的x是String类型,而为了可以连续输入,则需要后面输入的值叠加在之前的值之后。
//故num1.value = num1.value + x;
num1.value += x;
}else{
num2.value += x;
}
break;
}
}
第四步:定义加、减、乘、除、取余 的方法
function add(a,b){
return a+b;
}
function subtraction(a,b){
return a-b;
}
function muli(a,b){
return a*b;
}
function division(a,b){
return a/b;
}
function yu(a,b){
return a%b;
}
第五步:完成(效果图)