JavaScript实现网页计算器

最新推荐文章于 2023-02-06 11:31:05 发布
最新推荐文章于 2023-02-06 11:31:05 发布
阅读量5k 收藏 60
点赞数 16
文章标签： java html5 css chrome javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55166132/article/details/123628733
版权
本文详细介绍了如何使用HBuilderX开发一款带有基本算术运算功能的网页计算器，包括HTML布局、CSS样式设置和JavaScript交互逻辑。通过实例展示了如何获取用户输入、转换数值类型，并处理加减乘除运算。
摘要由CSDN通过智能技术生成

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。

不爱健身的数学子弟不是好程序员
关注
  • 16
    点赞
  • 踩
  • 60
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
JavaScript简易网页计算器
lwangji的博客
07-09 1522
JavaScript简易网页计算器 带时间显示功能的网页计算器，显示效果如图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>calculator</title> <style> .form{ border: 2px solid gold; b
js实现网页计算器
05-27
一个漂亮的网页计算器，学习的人可以做为参考！
JavaScript 网页简易计算器
最新发布
weixin_62630571的博客
02-06 857
JavaScript 设计简易计算器
基于JavaScript实现网页计算器
一切因为是码农
04-29 588
先看效果： 此外，计算器还附有数字、运算符检查功能： 下贴源码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Conten
javascript 实现一个网页计算器
godofwarlove的博客
05-24 363
function calc(){ while(1){ var checked=Number(prompt('欢迎使用简易计算器：\n1.加法运算\n2.减法运算\n3.乘法运算\n4.除法运算\n5.退出\n请输入您的选项')) switch(checked){ case 1:var sum= Number(prompt('请输入第一个数') );var sum2=Number(prompt('请输入第二个数'));result=sum+sum2;al...
【JavaScript源代码】基于JavaScript实现网页计算器.docx
12-30
基于JavaScript实现网页计算器 　本文实例为大家分享了JavaScript实现网页计算器的扫雷游戏的具体代码，供大家参考，具体内容如下　先看效果：　此外，计算器还附有数字、运算符检查功能：　下贴源码：　<!DOCTYPE ...
利用Javascript实现BMI计算器
10-21
根据提供的文件内容，我们可以生成关于如何使用JavaScript实现一个BMI（Body Mass Index，身体质量指数）计算器的知识点。 ### BMI计算器的背景和重要性 BMI指数是一种计算方法，用于评估一个人的体重是否处于健康...
js 前端实现网页计算器
01-31
本项目“js 前端实现网页计算器”旨在教你如何利用HTML、CSS和JavaScript创建一个功能完备的网页计算器。下面我们将详细探讨这个过程中的关键知识点。 首先，我们需要创建HTML结构。HTML（超文本标记语言）是网页的...
javascript实现简易计算器功能
10-14
在本教程中，我们将探讨如何使用JavaScript实现一个简易计算器，涵盖基本的四则运算、小数点、回退、清零等核心功能。这个项目旨在帮助开发者熟练掌握JavaScript编程技巧，包括事件处理、异常处理以及页面元素交互。...
javascript实现优先级计算器
10-27
JavaScript实现优先级计算器涉及到的核心知识点包括JavaScript语言基础、数学逻辑、事件处理、DOM操作以及可能的正则表达式。下面将详细阐述这些方面。 1. **JavaScript语言基础**：JavaScript是一种广泛使用的解释...
原生js代码写网页计算器功能
10-31
原生js代码写网页计算器功能 原生js代码写网页计算器功能
javascript网页计算器
10-21
用javascript编写程序，实现简单的网页计算器，包括显示当前时间，清零，加减乘除取模运算等。
js网页在线计算器工具代码
07-24
js网页在线计算器工具代码是一款实用的网页在线计算器工具，支持加减乘除，开根号，平方，正负数等计算器运算功能代码。
JavaScript实现的简单的计算器（web）
04-29
JavaScript实现的简单的计算器，这是参考我同学的代码实现，希望能够帮助到你
基于js的网页计算器实现
学习小使者 的专栏
06-17 2301
一个功能非常齐全的计算器，支持十六进制、十进制、八进制、二进制、双曲函数、角度制、弧度制的运算，支持公式计算，以及一些常用的功能。
js_实现网页中简易计算器
zl202111的博客
12-07 811
网页中实现简易的计算器功能
JavaScript网页计算器
qq_34416191的博客
07-14 3305
该计算器是用DW写的！ HTML篇 计算器 > C ← ± ＋ 7 8 9 － 4 5 6 × 1
js网页计算器
wgod
06-18 926
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网页计算器</title> <style type="text/css"> table input{ width:50px; height:50px; }/*设置按钮格式*/ #scre.
源代码之网页版计算器（js）
qq_44394562的博客
05-31 1486
今天给大家分享一个网页版计算器的源码，需要的可以拿走哦~~ HTML： <!DOCTYPE html> <html> <head> <title>js蓝色网页计算器</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值