HTML与JavaScript结合实现简易计算器

news2024/9/23 17:36:20

背景：

过程：

代码:

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引擎执行
关系	提供内容结构	操作并改变这些内容