HTML与JavaScript结合实现简易计算器
目录
背景：
过程：
代码:
HTML部分解析：
body部分解析：
JavaScript部分解析：
效果图 ：
总结:
背景：
计算器是一个典型的HTML和javaScript结合使用的例子，它展示了如何使用HTML来构建用户界面，使用JavaScript来处理用户输入和逻辑，以及如何使用JavaScript来更新Web页面内容(即显示计算结果)。这些技能是Web开发的基础，也是创建更复杂、更动态的Web应用所必需的。
过程：
代码:
<html>
//HTM文档的开始和结束标签，包含了整个网页的内容
<head><title>简易计算器</title><script language="javascript">function doCal() {var value1 = parseInt(document.getElementById("value1").value);var flag = document.getElementById("flag").value;var value2 = parseInt(document.getElementById("value2").value);var s = 0; // 初始化结果变量 switch (flag) {case "+":s = value1 + value2;break;case "-":s = value1 - value2;break;case "*":s = value1 * value2;break;case "/":s = value1 / value2;}document.getElementById("span_result").innerHTML ="<font color='red'>"+s+"</font>";}</script>
</head><body><h1>简易计算器</h1><hr><input type="text" id="value1" name="value1"><select name="flag" id="flag"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><input type="text" id="value2" name="value2"><input type="button" value="=" onclick="doCal()"><span id="span_result"> </span>
</body></html>HTML部分解析：
<html>标签
-HTML文档的开始和结束，包含整个网页的内容。
<head>部分
·<head>
-标签包含了文档的元(meta)数据，如文档的标题、字符集声明、对样式表的引用等
·<title>更简易计算器</title>
-设置了网页的标题，这个标题会显示在浏览器的标签页上
·<script language="javascript">
-包含了JavaScript代码，用于实现计算器的功能
body部分解析：
·<body>
-标签包含了可见的页面内容，如文本、图片、链接、表格、列表等。
·<h1>简易计算器<h1>
-定义了一个一级标题，用于显示计算器的名称
·<hr>
-插入一条水平线，用于分割内容，这里用来分割标题和计算器界面
·<input type="text" id="value1" name="value1"
-定义一个文本输入框，用户可以在其中输入第一数值。id属性用于JavaScirpt中通过
getElementById方法访问该元素，name属性用于表单数据的提交
·<select name="flag" id="flag">...</select>
-定义一个下拉选择框，用户可以选择+、-、*、/四种运算。id和name属性同样用于访问和提交数据
·<input type=”text“ id="value2" name="value2">
-第二个文本输入框，用于输入第二个数值
·<input type="button" value"="οnclick="doCal()">
-定义一个按钮，点击时执行doCal函数，即执行计算操作
·<span id="span_result"></span>
-定义一个span元素，用于显示计算结果。通过修改其innerHTML属性，JavaScript可以在这里插入计算结果
JavaScript部分解析：
·funcation doCal()
-定义一个名为doCal的函数，当点击"="按钮时，这个函数会被调用
·变量定义和获取输入值
-使用doucment.getElementByld方法获取用户输入的数值和 选择的运算符
-使用parseInt函数将字符串(用户输入的文本)转换为整数，以便进行数学运算
·switch语句
-根据用户选择的运算符，使用switch语句来执行相应的数学运算
-显示结果
-将计算结果s转换为字符串，并插入到span_result元素的innerHTML中。同时，使用<font color='red'>标签，将结果文本设置为红色
效果图 ：
总结:
| HTML | JavaScript | |
|---|---|---|
| 定义 | 网页内容的标记语言 | 网页的编程语言 |
| 用途 | 定义网页结构和内容 | 增加网页交互性和动态效果 |
| 执行 | 由浏览器解析并渲染 | 由浏览器JavaScript引擎执行 |
| 关系 | 提供内容结构 | 操作并改变这些内容 |