当前位置： 首页 > news >正文

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

news 2025/11/5 6:05:00

目录

背景：

过程：

代码:

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'>标签，将结果文本设置为红色

效果图 ：

总结: 

HTMLJavaScript
定义网页内容的标记语言网页的编程语言
用途定义网页结构和内容增加网页交互性和动态效果
执行由浏览器解析并渲染由浏览器JavaScript引擎执行
关系提供内容结构操作并改变这些内容

相关文章：

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

目录 背景&#xff1a; 过程&#xff1a; 代码: HTML部分解析&#xff1a; body部分解析&#xff1a; JavaScript部分解析&#xff1a; 效果图 &#xff1a; 总结: 背景&#xff1a; 计算器是一个典型的HTML和javaScript结合使用的例子&#xff0c;它展示了如何使用H…...

编程日记 2024/9/25 20:30:21

Docker网络原理

Docker 网络是 Docker 容器之间以及容器与外部世界之间通信的机制。Docker 提供了多种网络驱动&#xff0c;允许容器以不同的方式进行通信&#xff1a; Docker 网络工作原理&#xff1a; 网络命名空间&#xff1a;Docker 使用 Linux 的网络命名空间来隔离容器的网络堆栈。每个…...

编程日记 2024/9/25 20:29:20

PyTorch 目标检测教程

PyTorch 目标检测教程 本教程将介绍如何在 PyTorch 中使用几种常见的目标检测模型&#xff0c;包括 Faster R-CNN、SSD 以及 YOLO (You Only Look Once)。我们将涵盖预训练模型的使用、推理、微调&#xff0c;以及自定义数据集上的训练。 1. 目标检测概述 目标检测任务不仅要…...

编程日记 2024/9/25 20:27:18

校园美食导航：Spring Boot技术的美食发现之旅

第二章 系统分析 2.1 可行性分析 可行性分析的目的是确定一个系统是否有必要开发、确定系统是否能以最小的代价实现。其工作主要有三个方面&#xff0c;分别是技术、经济和社会三方面的可行性。我会从这三个方面对网上校园周边美食探索及分享平台进行详细的分析。 2.1.1技术可行…...

编程日记 2024/9/25 20:26:16

51单片机 - DS18B20实验1-读取温度

上来一张图&#xff0c;明确思路&#xff0c;程序整体裤架如下&#xff0c;通过单总线&#xff0c;单独封装一个.c文件用于单总线的操作&#xff0c;其实&#xff0c;我们可以把点c文件看成一个类操作&#xff0c;其属性就是我们面向对象的函数&#xff0c;也叫方法&#xff0c…...

编程日记 2024/9/25 20:24:14

go语言基础入门(一)

变量声明:批量声明变量:变量赋值: 声明变量同时为变量赋值可以在变量声明时为其赋值go中赋值时的编译器会自动根据等号右侧的数据类型自动推导变量的类型使用 : 进行赋值匿名变量 常量常量计数器iota1. 使用场景2. 基本用法3. 简化语法4. 自定义增量5. 复杂使用go的类似枚举 使…...

编程日记 2024/9/25 20:20:10

linux 基础（一）mkdir、ls、vi、ifconfig

1、linux简介 linux是一个操作系统&#xff08;os: operating system&#xff09; 中国有没有自己的操作系统&#xff08;华为鸿蒙HarmonyOS&#xff0c;阿里龙蜥(Anolis) OS 8、百度DuerOS都有&#xff09; 计算机组的组成&#xff1a;硬件软件 硬件&#xff1a;运算器&am…...

编程日记 2024/9/25 20:18:07

DAMODEL丹摩智算：LLama3.1部署与使用

文章目录 前言 一、LLaMA 3.1 的特点 二、LLaMA3.1的优势 三、LLaMA3.1部署流程 &#xff08;一&#xff09;创建实例 &#xff08;二&#xff09;通过JupyterLab登录实例 &#xff08;3&#xff09;部署LLaMA3.1 &#xff08;4&#xff09;使用教程 总结 前言 LLama3…...

编程日记 2024/9/25 20:17:06

Spring Boot 配置全流程 总结

1. 简介 Springboot可以简化SSM的配置&#xff0c;提高开发效率。 2. 代码 在pom.xml中添加&#xff1a; <parent><!-- 包含SSM常用依赖项 --><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</art…...

编程日记 2024/9/25 20:16:05

爬虫技术初步自学

目的 本篇文章实际上自学爬虫技术的学习一份学习笔记&#xff0c;希望可以对后学的小白起到帮助&#xff0c;也希望得到大佬的指点&#xff0c;若有错漏希望大佬指出。 初步认知 爬虫实际上是一个计算机程序。开发爬虫程序的常用语言是Python。&#xff08;Python我已经在五…...

编程日记 2024/9/25 20:15:04

【力扣 | SQL题 | 每日三题】力扣175， 176， 181

1. 力扣175&#xff1a;组合两个表 1.1 题目&#xff1a; 表: Person ---------------------- | 列名 | 类型 | ---------------------- | PersonId | int | | FirstName | varchar | | LastName | varchar | ---------------------- personId 是该…...

编程日记 2024/9/25 20:14:02

SpringBoot使用hutool操作FTP

项目场景&#xff1a; SpringBoot使用hutool操作FTP&#xff0c;可以实现从FTP服务器下载文件到本地&#xff0c;以及将本地文件上传到FTP服务器的功能。 实现步骤&#xff1a; 1、引入依赖 <dependency><groupId>commons-net</groupId><artifactId>…...

编程日记 2024/9/25 20:13:01

如何防止SQL注入攻击

SQL注入攻击是一种常见的网络安全威胁&#xff0c;攻击者通过在用户输入中插入恶意的SQL代码&#xff0c;从而可以执行未经授权的数据库操作。为了防止SQL注入攻击&#xff0c;我们可以采取一系列有效的措施来保护数据库和应用程序的安全性。以下是一些关键的防范策略&#xff…...

编程日记 2024/9/25 20:12:00

Java List类

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;折纸花满衣 &#x1f3e0;个人专栏&#xff1a;Java 目录 &#x1f449;&#x1f3fb;List1. 接口与实现2. 特性3. 常用方法4. 示例代码5. 遍历6. 线程安全 &#x1f449;&#x1f3fb;List Java的 List …...

编程日记 2024/9/25 20:09:57

使用 Internet 共享 (ICS) 方式分配ip

设备A使用dhcp的情况下&#xff0c;通过设备B分配ip并共享网络的方法。 启用网络共享&#xff08;ICS&#xff09;并配置 NAT Windows 自带的 Internet Connection Sharing (ICS) 功能可以简化 NAT 设置&#xff0c;允许共享一个网络连接给其他设备。 打开网络设置&#xff1…...

编程日记 2024/9/25 20:08:56

SMTP/IMAP服务发在线邮件时要用到

SMTP/IMAP服务 require PHPMailerAutoload.php; // 或 require class.phpmailer.php;// 创建实例 $mail new PHPMailer();// 设定邮件服务器 $mail->isSMTP(); $mail->Host smtp.example.com; // 邮件服务器地址 $mail->SMTPAuth true; $mail->Username your…...

编程日记 2024/9/25 20:07:55

Threejs绘制圆锥体

上一章节实现了胶囊体的绘制&#xff0c;这节来绘制圆锥体&#xff0c;圆锥体就是三角形旋转获得的&#xff0c;如上文一样&#xff0c;先要创建出基础的组件&#xff0c;包括场景&#xff0c;相机&#xff0c;灯光&#xff0c;渲染器。代码如下&#xff1a; initScene() {this…...

编程日记 2024/9/25 20:06:54

速通LLaMA3：《The Llama 3 Herd of Models》全文解读

文章目录 概览论文开篇IntroductionGeneral OverviewPre-TrainingPre-Training DataModel ArchitectureInfrastructure, Scaling, and EfficiencyTraining Recipe Post-TrainingResultsVision ExperimentsSpeech Experiments⭐Related WorkConclusionLlama 3 模型中的数学原理1…...

编程日记 2024/9/25 20:05:52

Python网络爬虫获取Wallhaven壁纸图片(源码)

** 话不多说&#xff0c;直接附源码&#xff0c;可运行&#xff01; ** import requests from lxml import etree from fake_useragent import UserAgent import timeclass wallhaven(object):def __init__(self):# yellow# self.url "https://wallhaven.cc/search?co…...

编程日记 2024/9/25 20:03:51

智能化引领等保测评新时代：AI与大数据的深度融合

随着信息技术的飞速发展&#xff0c;等级保护测评&#xff08;简称“等保测评”&#xff09;作为保障信息系统安全的重要手段&#xff0c;正迎来前所未有的变革。在这一背景下&#xff0c;人工智能&#xff08;AI&#xff09;与大数据技术的深度融合&#xff0c;正引领等保测评…...

编程日记 2024/9/25 20:01:48

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

编程新知 2025/11/3 1:15:14

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/10/13 2:26:14

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2025/10/30 7:54:56

Go 语言并发编程基础：无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

编程新知 2025/9/13 17:45:05

人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

编程新知 2025/10/26 19:25:56

苹果AI眼镜：从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中，苹果AI眼镜（Apple Glasses）正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch，而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠，而在于如何通过形态设计打破社交壁垒，成为用户“全天佩戴…...

编程新知 2025/9/29 5:32:48

在树莓派上添加音频输入设备的几种方法

在树莓派上添加音频输入设备可以通过以下步骤完成&#xff0c;具体方法取决于设备类型&#xff08;如USB麦克风、3.5mm接口麦克风或HDMI音频输入&#xff09;。以下是详细指南&#xff1a; 1. 连接音频输入设备 USB麦克风/声卡&#xff1a;直接插入树莓派的USB接口。3.5mm麦克…...

编程新知 2025/10/24 14:12:54

恶补电源：1.电桥

一、元器件的选择 搜索并选择电桥&#xff0c;再multisim中选择FWB&#xff0c;就有各种型号的电桥: 电桥是用来干嘛的呢&#xff1f; 它是一个由四个二极管搭成的“桥梁”形状的电路&#xff0c;用来把交流电&#xff08;AC&#xff09;变成直流电&#xff08;DC&#xff09;。…...

编程新知 2025/10/29 9:03:05

一些实用的chrome扩展0x01

简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序&#xff0c;无论是测试应用程序、搜寻漏洞还是收集情报&#xff0c;它们都能提升工作流程。 FoxyProxy 代理管理工具&#xff0c;此扩展简化了使用代理&#xff08;如 Burp…...

编程新知 2025/10/26 9:24:28

《Offer来了：Java面试核心知识点精讲》大纲

文章目录 一、《Offer来了：Java面试核心知识点精讲》的典型大纲框架Java基础并发编程JVM原理数据库与缓存分布式架构系统设计二、《Offer来了：Java面试核心知识点精讲（原理篇）》技术文章大纲核心主题：Java基础原理与面试高频考点Java虚拟机（JVM）原理Java并发编程原理Jav…...

编程新知 2025/9/14 13:51:48