一、计算器代码

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

JavaScript实现网页计算器相关推荐

基于JavaScript实现网页计算器
基于JavaScript的网页计算器基于HTML.CSS.JavaScript制作的网页计算器,其中可以实现加.减.乘.除.取整.求余.阶乘.科学计数等功能界面如下: 代码如下: 有兴趣的朋友欢迎 ...
html怎么实现计算器功能键介绍,JavaScript实现网页计算器功能
本文实例为大家分享了JavaScript实现网页计算器的具体代码,供大家参考,具体内容如下要求:在网页上实现简单的计算器功能和界面 CSS样式代码: * { margin: 0; padding: ...
HTML5实现网页计算器清空操作,基于JavaScript实现网页计算器
本文实例为大家分享了JavaScript实现网页计算器的扫雷游戏的具体代码,供大家参考,具体内容如下先看效果: 此外,计算器还附有数字.运算符检查功能: 下贴源码: 计算器 var oper1=pr ...
JavaScript制作网页计算器
JavaScript制作网页计算器 <!DOCTYPE html> <html lang="en"> <head><meta charse ...
用JavaScript编写网页计算器
编写网页计算器,首先用两个text文本框接收输入的两个值,然后通过触发按钮的单击事件,即触发calc()函数,传递实参(add.sub.mul或者div),实现相应的加减乘除运算,最后将结果显示在结果 ...
用JavaScript制作简单的网页计算器
一.题目利用JavaScript中的函数,完成数字加.减.乘.除的运算,实现一个简单的计算器. 二.代码 <!doctype html> <html> <head> ...
html浮点计算器,javascript公式计算引擎-解决浮点数计算误差-网页计算器
我们大家都知道,javascript在计算公式的时候,会出现误差,导致我们本来就应该正确的代码,出现了我们意想不到的结果. 例如:45.6*13=592.8000000000001(结果应该是592. ...
用javascript制作二位数的网页计算器
script部分 function add(clickNum){document.getElementById("screen").value += clickNum.value; ...
JavaScript网页计算器
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>& ...

JavaScript实现网页计算器

文章目录

一、计算器代码

二、代码分析

JavaScript实现网页计算器相关推荐

最新文章

热门文章