一、计算器代码

<!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。