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

HTML程序大全(1):简易计算器

HTML代码,主要创建了几个按钮。

<div class="container"><div class="output" id="output">0</div><button class="button" onclick="clearOutput()" id="clear">C</button><button class="button" onclick="appendToOutput('%')">%</button><button class="button" onclick="appendToOutput('/')">/</button><button class="button" onclick="appendToOutput('*')">*</button><button class="button" onclick="appendToOutput('7')">7</button><button class="button" onclick="appendToOutput('8')">8</button><button class="button" onclick="appendToOutput('9')">9</button><button class="button" onclick="appendToOutput('-')">-</button><button class="button" onclick="appendToOutput('4')">4</button><button class="button" onclick="appendToOutput('5')">5</button><button class="button" onclick="appendToOutput('6')">6</button><button class="button" onclick="appendToOutput('+')">+</button><button class="button" onclick="appendToOutput('1')">1</button><button class="button" onclick="appendToOutput('2')">2</button><button class="button" onclick="appendToOutput('3')">3</button><button class="button equals" onclick="calculate()">=</button><button class="button" onclick="appendToOutput('0')">0</button><button class="button" onclick="appendToOutput('.')">.</button>
</div>

CSS代码,主要设置了背景、计算机板和按钮等等的颜色。

body { /*背景*/background-color: #f2f2f2;font-family: Arial, sans-serif;
}.container { /*计算机板*/margin: auto;margin-top: 100px;width: 300px;padding: 10px;border: 1px solid #ccc;background-color: #fff;box-shadow: 0px 0px 10px #ccc;
}.output { /*输入或者按下的内容字体*/font-size: 2em;text-align: right;padding: 10px;background-color: #eee;border: 1px solid #ccc;
}.button { /*正常按钮*/font-size: 1.5em;margin: 5px;width: 50px;height: 50px;border: none;background-color: #ccc;color: #fff;cursor: pointer;
}.button:hover { /*鼠标碰到按钮时按钮变色*/background-color: #999;
}.clear { /*清屏*/background-color: #ff6666;
}.equals { /*等于号颜色*/background-color: #666666;
}

javascript代码,主要设置了对应按钮按下的显示、计算、清零的工作。

let output = document.getElementById("output"); // 输入内容function appendToOutput(value) {if (output.innerHTML === "0") {output.innerHTML = value; // 直接显示} else {output.innerHTML += value; // 列出一个算式}
}function clearOutput() { // 清零output.innerHTML = "0";
}function calculate() { // 计算output.innerHTML = eval(output.innerHTML);
}

总结:
这是一个简单的计算器,使用HTML、CSS和JavaScript实现。HTML代码创建了一个计算器的界面,CSS代码设置了计算器的样式,JavaScript代码实现了计算器的功能。具体来说,JavaScript代码实现了框架的三个核心功能:

  1. appendToOutput()函数:该函数将按钮的值添加到输出框。
  2. clearOutput()函数:该函数清空输出框。
  3. calculate()函数:该函数使用eval()函数计算输出框中的表达式。

这个计算器可以执行加、减、乘、除和取模运算。同时,它还支持小数点和多位数运算。需要注意的是,eval()函数可能会导致安全问题,因此在实际应用中需要采取安全措施。

相关文章:

HTML程序大全(1):简易计算器

HTML代码&#xff0c;主要创建了几个按钮。 <div class"container"><div class"output" id"output">0</div><button class"button" onclick"clearOutput()" id"clear">C</button>…...

esp32服务器与android客户端的tcp通讯

esp32 //esp32作为服务端 #include <WiFi.h>#define LED_BUILTIN 2 // 创建热点 const char *ssid "ESP32"; const char *password "12345678"; const int port 1122; //端口 WiFiServer server(port); void setup() {delay(5000);pinMode(LED_…...

自定义Mybatis LanguageDriver性能优化

场景&#xff1a;高并发情况下mybatis 动态sql 解析 锁问题优化 优化前 并发测试 XMLLanguageDriver 类 的 createSqlSource 方法有锁 而且 每次执行时都会走该方法 优化前 &#xff1a; 线程有Block 优化后的 LanguageDriver public class CustomXMLLanguageDriver im…...

DevEco Studio 鸿蒙(HarmonyOS)项目结构

DevEco Studio 鸿蒙&#xff08;HarmonyOS&#xff09;项目结构 一、操作环境 操作系统: Windows 10 专业版 IDE:DevEco Studio 3.1 SDK:HarmonyOS 3.1 二、项目结构 创建简单的Hello World移动应用项目结构如下图 由上到下说明各个文件夹的作用 .hvigor&#xff1a;存…...

Springboot整合篇Druid

一、概述 1.1简介 Druid 是阿里巴巴开源平台上一个数据库连接池实现&#xff0c;结合了 C3P0、DBCP 等 DB 池的优点&#xff0c;同时加入了日志监控。 它本身还自带一个监控平台&#xff0c;可以查看时时产生的sql、uri等监控数据&#xff0c;可以排查慢sql、慢请求&#xff0…...

uniapp 微信小程序 封装axios 包含请求拦截、响应拦截、无感刷新令牌功能

前言&#xff1a; 1、为什么不适用uniapp自带的请求功能&#xff1f; 答&#xff1a;uniapp自带的请求功能&#xff0c;再刷新了令牌后&#xff0c;重新请求返回的数据无法返回给发起请求的方法。也就是说&#xff0c;刷新令牌后重新发起的请求和第一次发起请求的方法是割裂的。…...

C语言精选——选择题Day41

第一题 1. 有以下程序段&#xff1a; char *p, *q; p (char *)malloc(sizeof(char) * 20); q p; scanf("%s %s", p, q); printf("%s %s\n", p, q); 若从键盘输入&#xff1a;abc def↙&#xff0c;则输出结果是&#xff08; &#xff09; A&#xff1a;d…...

Tomcat头上有个叉叉

问题原因&#xff1a; 这是因为它就是个空的tomcat,并没有导入项目运行 解决方案&#xff1a; war模式&#xff1a;发布模式&#xff0c;正式发布时用&#xff0c;将WEB工程以war包的形式上传到服务器 war exploded模式&#xff1a;开发时用&#xff0c;将WEB工程的文件夹直接…...

Linux shell编程学习笔记35:seq

0 前言 在使用 for 循环语句时&#xff0c;我们经常使用到序列。比如&#xff1a; for i in 1 2 3 4 5 6 7 8 9 10; do echo "$i * 2 $(expr $i \* 2)"; done 其中的 1 2 3 4 5 6 7 8 9 10;就是一个整数序列 。 为了方便我们使用数字序列&#xff0c;Linux提供了…...

Nougat:结合光学神经网络,引领学术PDF文档的智能解析、挖掘学术论文PDF的价值

Nougat&#xff1a;结合光学神经网络&#xff0c;引领学术PDF文档的智能解析、挖掘学术论文PDF的价值 这是Nougat的官方存储库&#xff0c;Nougat是一种学术文档PDF解析器&#xff0c;可以理解LaTeX数学和表格。 Project page: https://facebookresearch.github.io/nougat/ …...

涉密网络的IP查询防护策略

涉密网络的安全性对于维护国家、企业及个人的核心利益至关重要。在当今数字化时代&#xff0c;网络攻击日益猖獗&#xff0c;其中IP查询是攻击者获取目标信息的一种常见手段。本文将探讨涉密网络中防护IP查询的关键策略&#xff0c;以确保网络的机密性和安全性。 1. 专用VPN和…...

基础算法(1):排序(1):选择排序

今天对算法产生了兴趣&#xff0c;开始学习基础算法&#xff0c;比如排序&#xff0c;模拟&#xff0c;贪心&#xff0c;递推等内容&#xff0c;算法是很重要的&#xff0c;它是解决某个问题的特定方法&#xff0c;程序数据结构算法&#xff0c;所以对算法的学习是至关重要的&a…...

GeoTrust OV证书

当谈到网站安全性和可信度时&#xff0c;GeoTrust OV证书是一个备受推崇的选择。作为一家备受尊敬的数字证书颁发机构&#xff0c;GeoTrust以其卓越的品牌声誉和高质量的产品而闻名于世。GeoTrust OV证书提供了一系列的安全功能&#xff0c;同时还具有出色的性价比&#xff0c;…...

第一个“hello Android”程序

1、首先安装Android studio&#xff08;跳过&#xff09; Android Studio是由Google推出的官方集成开发环境&#xff08;IDE&#xff09;&#xff0c;专门用于Android应用程序的开发。它是基于JetBrains的IntelliJ IDEA IDE构建的&#xff0c;提供了丰富的功能和工具&#xff0…...

docker-compose安装nacos和msql

docker-compose安装nacos和msql 前言前提已经安装docker-compose&#xff0c;如果没有安装&#xff0c;则可以查看上面系列文章中的安装教程。并且文章中使用的是mobaxterm连接虚拟机。 1、下载2、创建并运行 前言 前提已经安装docker-compose&#xff0c;如果没有安装&#x…...

AnythingLLM:基于RAG方案构专属私有知识库(开源|高效|可定制)

一、前言 继OpenAI和Google的产品发布会之后&#xff0c;大模型的能力进化速度之快令人惊叹&#xff0c;然而&#xff0c;对于很多个人和企业而言&#xff0c;为了数据安全不得不考虑私有化部署方案&#xff0c;从GPT-4发布以来&#xff0c;国内外的大模型就拉开了很明显的差距…...

常见的工作流编排引擎

常见工作流框架&#xff1a;微服务编排引擎 工作流框架还是比较多的&#xff0c;按照语言分类的话&#xff0c;有 Java: jBPM、Activiti、SWF PHP: Tpflow、PHPworkflow Go: Cadence&#xff08;Cadence由Uber开发并开源&#xff0c;Maxim Fateev是Cadence的主架构师&#…...

期末总复习(重点!!!)

一、第6章异常处理 1、什么是异常、什么是异常处理异常是指程序在运行过程中发生的错误事件&#xff0c;影响程序的正常执行。异常并不是一定会发生&#xff0c;默认情况下&#xff0c;程序运行中遇到异常时将会终止&#xff0c;并在控制台打印出异常出现的堆栈信息。异常处理…...

input 获取焦点后样式的修改

一、实现目标 1.没有获取焦点时样子 2.获取焦点时 代码&#xff1a; <input class"input"placeholder"请输入关键字" input"loadNode" />css .input {border-radius: 14px;border:1px solid #e4e4e4;margin: 5px;margin-top: 10px;wi…...

持续集成交付CICD:Jenkins使用GitLab共享库实现自动上传前后端项目Nexus制品

目录 一、实验 1.GitLab本地导入前后端项目 2.Jenkins新建前后端项目流水线 3.Sonarqube录入质量阈与质量配置 4.修改GitLab共享库代码 5.Jenkins手动构建前后端项目流水线 6.Nexus查看制品上传情况 7.优化代码获取RELEASE分支 8.优化Jenkins流水线项目名称 一、实验 …...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

Python|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

Leetcode33( 搜索旋转排序数组)

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...

uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...