Hbuilder X中实现网页计算器(+-*/)
一、计算器代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算器</title>
<style type="text/css">
.kuang {
border: 2px black solid;
width: 700px;
height: 500px;
margin: auto;
border-radius: 10px;
background-color: #000000;
}
div,
input,
label {
font-size: 30px;
margin-top: 15px;
}
.jisuanqi {
color: rgba(241, 163, 60);
font-size: 50px;
margin-left: 23%;
margin-top: 30px;
}
div button {
width: 130px;
height: 60px;
margin: auto 19px;
margin-top: 20px;
}
.result {
margin-top: 30px;
}
.num1,
label,
input {
color: #FFFFFF;
}
.num2,
label,
input {
color: rgb(241, 163, 60);
}
.result,
label,
input {
color: rgb(241, 163, 60);
}
.algorithm button {
color: #FFFFFF;
background-color: rgba(241, 163, 60);
font-size: 40px;
}
/*hover 用来表示鼠标移入的状态*/
div button:hover {
border-color: red;
cursor: pointer;
background-color: #A9A9A9;
}
/*active 用来表示鼠标点击*/
/*shadow 用来设置影子*/
div button:active {
box-shadow: 1px 1px 10px red;
}
</style>
</head>
<body>
<div class="kuang">
<div class="jisuanqi">
<label class="jisuanqi">计算器</label>
</div>
<div class="num1" align="center">
<label for="numl">num1:</label>
<input type="number" name="num1" id="num1" />
</div>
<div class="num2" align="center">
<label for="num2">num2:</label>
<input type="number" name="num2" id="num2" />
</div>
<!--+-*/按钮-->
<div class="algorithm">
<button type="button" value="+" onclick="calcul(this.value)">+</button>
<button type="button" value="-" onclick="calcul(this.value)">-</button>
<button type="button" value="x" onclick="calcul(this.value)">x</button>
<button type="button" value="÷" onclick="calcul(this.value)">÷</button>
</div>
<div class="result" align="center">
<label for="结果">结果:</label>
<input type="number" name="result" id="result" />
</div>
</div>
<script type="text/javascript">
//获得用户输入的num1和num2的值,从页面获取的值都是字符串
//parseFloat("10"):将字符串转化为小数
//parseInt("10"):将字符串转化为整数
function calcul(fuhao) {
let num1 = parseFloat(document.getElementById("num1").value);
let num2 = parseFloat(document.getElementById("num2").value);
switch (fuhao) {
case "+":
var result = num1 + num2;
break;
case "-":
var result = num1 - num2;
break;
case "x":
var result = num1 * num2;
break;
case "÷":
if (num2 == 0) {
alert("除数不能为0"); //alert警告
return;
}
var result = num1 / num2;
break;
default:
alert("符号错误"); //alert警告
break;
}
//获得结果输入框对象并为value属性赋值
document.getElementById("result").value = result;
}
</script>
</body>
</html>
结果:
苹果风格配色,不能说很像吧,但是起码还是占了一点边。 button的背景颜色是我直接用ps取色器取出的rgb三原色。
iPhone的计算器:
二、代码分析
.kuang {
border: 2px black solid;
width: 700px;
height: 500px;
margin: auto;
border-radius: 10px;
background-color: #000000;
}
div,
input,
label {
font-size: 30px;
margin-top: 15px;
}
.jisuanqi {
color: rgba(241, 163, 60);
font-size: 50px;
margin-left: 23%;
margin-top: 30px;
}
div button {
width: 130px;
height: 60px;
margin: auto 19px;
margin-top: 20px;
}
.result {
margin-top: 30px;
}
.num1,
label,
input {
color: #FFFFFF;
}
.num2,
label,
input {
color: rgb(241, 163, 60);
}
.result,
label,
input {
color: rgb(241, 163, 60);
}
.algorithm button {
color: #FFFFFF;
background-color: rgba(241, 163, 60);
font-size: 40px;
}
/*hover 用来表示鼠标移入的状态*/
div button:hover {
border-color: red;
cursor: pointer;
background-color: #A9A9A9;
}
/*active 用来表示鼠标点击*/
/*shadow 用来设置影子*/
div button:active {
box-shadow: 1px 1px 10px red;
}
这些都是style中的代码,基本上都是设置边框大小和颜色的,比较简单。唯一需要记得就是hover:用来表示鼠标移入的状态,active:用来表示鼠标点击,shadow:用来设置影子。
<div class="num1" align="center">
<label for="numl">num1:</label>
<input type="number" name="num1" id="num1" />
</div>
<div class="num2" align="center">
<label for="num2">num2:</label>
<input type="number" name="num2" id="num2" />
</div>
<!--+-*/按钮-->
<div class="algorithm">
<button type="button" value="+" onclick="calcul(this.value)">+</button>
<button type="button" value="-" onclick="calcul(this.value)">-</button>
<button type="button" value="x" onclick="calcul(this.value)">x</button>
<button type="button" value="÷" onclick="calcul(this.value)">÷</button>
</div>
<div class="result" align="center">
<label for="结果">结果:</label>
<input type="number" name="result" id="result" />
</div>
</div>
边框里的内容,<label> 标签为 input 元素定义标注。"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。通俗点说就是接受你输入的num1和num2以便于后续的算法计算。然后设置button按钮,onclick的用法是鼠标点击时执行设定要执行的javascript脚本。
<script type="text/javascript">
//获得用户输入的num1和num2的值,从页面获取的值都是字符串
//parseFloat("10"):将字符串转化为小数
//parseInt("10"):将字符串转化为整数
function calcul(fuhao) {
let num1 = parseFloat(document.getElementById("num1").value);
let num2 = parseFloat(document.getElementById("num2").value);
switch (fuhao) {
case "+":
var result = num1 + num2;
break;
case "-":
var result = num1 - num2;
break;
case "x":
var result = num1 * num2;
break;
case "÷":
if (num2 == 0) {
alert("除数不能为0"); //alert警告
return;
}
var result = num1 / num2;
break;
default:
alert("符号错误"); //alert警告
break;
}
//获得结果输入框对象并为value属性赋值
document.getElementById("result").value = result;
}
</script>
script标签中的函数 ,获得用户输入的num1和num2的值,从页面获取的值都是字符串
//parseFloat("10"):将字符串转化为小数,//parseInt("10"):将字符串转化为整数。
switch选择语句,要注意的一点就是在除法的时候要判断一下分母是否为零,如何是就用alert给出提示,最后default给出其他符号错误的情况。然后在把计算出的结果值赋值给value。