Web初学笔记（1）——Web应用（在线计算器）

最新推荐文章于 2024-05-14 09:56:11 发布

置顶若彼扶桑

最新推荐文章于 2024-05-14 09:56:11 发布

阅读量3k

点赞数 15

分类专栏： Web初学笔记——Web应用文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/qq_40735196/article/details/121052233

版权

Web初学笔记——Web应用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Web初学笔记（1）——Web应用（在线计算器）

Web应用（在线计算器）

Web应用（在线计算器）

初学javascript有点枯燥，于是自己想着做一个简单的web计算器，综合练习下之前学习的html和css，同时给自己一点点成就感。初学javascript有点枯燥，于是自己想着做一个简单的web计算器，综合练习下之前学习的html和css，同时给自己一点点成就感。

在线计算器——需求分析

页面参考

参考着windows系统自带的标准计算器进行页面设计（不包括历史记录和记忆）
在这里插入图片描述

功能

通过面板输入数字和计算符号进行计算（暂时不提供直接键盘输入吧）

编程框架

Caculator.html：构建整个页面的元素和结构
Caculator.css：调整按钮格式、颜色与参考页面一致
Caculator.js：完成按键的响应函数，以及计算器的计算逻辑

在线计算器——具体步骤

页面框架搭建

	a. 新建Caculator.html文件
	b. 加入标准html5格式
	c. 加入显示框
	d. 使用表单form加入20个按键，并显示不同的字符
	e. 对按键进行id命名、分组（分为3组，即数字(number)、计算符(signal)、计算(equal)）

页面渲染

	a. 新建Caculator.css文件
	b. 在html文件中引用css文件
	c. 更改按键颜色

页面逻辑

	a. 新建Caculator.js文件
	b. 在html文件中引用js文件
	c. 按键响应函数
	d. 更改显示框的显示内容
	e. 实现计算

在线计算器——实现过程

页面框架搭建

我自己用的VS code来编辑代码（其实记事本也行），先在某个位置新建文件夹，然后用VS code打开该文件夹，便成功建立项目了。
○ 新建Caculator.html文件
点击新建文件，命名为Caculator.html
○ 加入标准html5格式框架
代码如下：

<!DOCTYPE html>
	<html lang="en">
	    <head>
	        <title>在线计算器</title>
	        <meta charset="utf-8"
	        <script src="Caculator.js"></script>
	        <link rel="stylesheet" href="Caculator.css">
	    </head>
	    <body>
	        
	    </body>
	</html>

运行代码结果为空白，只有标题为“在线计算器”
在这里插入图片描述
○ 加入显示框
○ 使用表单form加入20个按键，并显示不同的字符
对按键进行id命名、分组（分为3组，即数字(number)、计算符(signal)、计算(equal)）

代码如下：

<!DOCTYPE html>
		<html lang="en">
		    <head>
		        <title>在线计算器</title>
		        <meta charset="utf-8"
		        <script src="Caculator.js"></script>
		        <link rel="stylesheet" href="Caculator.css">
		    </head>
		    <body>
		        <input type="text" id="text_edit" size="40" placeholder="输入框">
		        <form>
		            <input type="button" id="signal_mod" class="signal" value="%">
		            <input type="button" id="signal_clear_all" class="signal" value="CE">
		            <input type="button" id="signal_clear" class="signal" value="C">
		            <input type="button" id="signal_delete" class="signal" value="del">
		        </form>
		        <form>
		            <input type="button" id="number_7" class="number" value="7">
		            <input type="button" id="number_8" class="number" value="8">
		            <input type="button" id="number_9" class="number" value="9">
		            <input type="button" id="signal_mul" class="signal" value="*">
		        </form>
		        <form>
		            <input type="button" id="number_4" class="number" value="4">
		            <input type="button" id="number_5" class="number" value="5">
		            <input type="button" id="number_6" class="number" value="6">
		            <input type="button" id="signal_dec" class="signal" value="-">
		        </form>
		        <form>
		            <input type="button" id="number_1" class="number" value="1">
		            <input type="button" id="number_2" class="number" value="2">
		            <input type="button" id="number_3" class="number" value="3">
		            <input type="button" id="signal_add" class="signal" value="+">
		        </form>
		        <form>
		            <input type="button" id="number_null" class="number" value="+/-">
		            <input type="button" id="number_0" class="number" value="0">
		            <input type="button" id="number_dot" class="number" value=".">
		            <input type="button" id="equal" class="equal" value="=">
		        </form>
		    </body>
</html>

运行结果：
可看到按键之间排列结构已经完成，但大小不一、颜色也较难看。因此需要加入css对这些细节进行美化。

在这里插入图片描述

页面渲染

使用css对html页面进行渲染。
○ 在html文件中引用css文件
在head中加入如下代码：

<link rel="stylesheet" href="Caculator.css">

○ 更改页面颜色和样式
设置背景为白色，外边距20%：

body {
	    background-color: white;
	    margin: 20%;
	}

设置输入框格式和表单间距：

form {
	    margin-bottom: 2px;
	}
	#text_edit {
	    width: 252px;
	    outline-style: none;
	    border: 1px solid #ccc;
	    padding: 7px 0px;
	    margin-bottom: 5px;
	    font-size: large;
	}

设置按键样式：

.number {
	    width: 60px;
	    height: 40px;
	    background-color: white;
	    color: black;
	}
.signal {
	    width: 60px;
	    height: 40px;
	    background-color: rgb(223, 221, 221);
	    color: black;
	}
.equal {
	    width: 60px;
	    height: 40px;
	    background-color: gray;
	    color: black;
	}