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

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

news 2025/9/17 3:54:37

目录

背景：

过程：

代码:

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

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2025/9/15 13:18:27

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/6/17 10:46:36

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/9/9 14:48:35

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2025/9/13 0:08:57

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/9/10 1:53:18

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2025/7/19 3:59:22

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46

sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

编程新知 2025/9/13 17:37:48

【Go语言基础【12】】指针：声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

编程新知 2025/6/21 2:18:57

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

编程新知 2025/9/3 19:19:44