就是这个样的粗爆,手搓一个计算器:完美平方三项式计算器

server/2024/11/13 10:02:17/

       作为程序员,没有合适的工具,就得手搓一个,PC端,移动端均可适用。废话不多说,直接上代码。

HTML:

<div class="calculator"><div class="input-group"><label for="termA">输入a:</label> <input id="termA" type="text" placeholder="输入 a 的值"></div><div class="input-group"><label for="termB">输入b:</label> <input id="termB" type="text" placeholder="输入 b 的值"></div><div class="input-group"><label for="operation">选择操作:</label><select id="operation"><option value="plus">(a + b)²</option><option value="minus">(a - b)²</option></select></div><div class="operations"><button onclick="calculatePerfectSquare()">计算</button></div><div class="result"><p>计算结果:</p><p id="calculation-output">结果: -</p></div></div>

JS:

javascript">function calculatePerfectSquare() {const a = parseFloat(document.getElementById('termA').value);const b = parseFloat(document.getElementById('termB').value);const operation = document.getElementById('operation').value;const resultElement = document.getElementById('calculation-output');if (isNaN(a) || isNaN(b)) {resultElement.textContent = '无效输入,请输入有效的数字。';return;}let result;if (operation === 'plus') {result = `(${a} + ${b})² = ${a}² + 2(${a})(${b}) + ${b}² = ${Math.pow(a, 2)} + ${2 * a * b} + ${Math.pow(b, 2)}`;} else {result = `(${a} - ${b})² = ${a}² - 2(${a})(${b}) + ${b}² = ${Math.pow(a, 2)} - ${2 * a * b} + ${Math.pow(b, 2)}`;}resultElement.textContent = `结果: ${result}`;
}

CSS:

.calculator {
width: 100%;background-color: #333;color: white;padding: 20px;border-radius: 10px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}label {display: block;margin-bottom: 10px;font-size: 16px;
}input, select {width: 100%!important;padding: 10px!important;margin-bottom: 20px;color: #000000; border-radius: 5px;border: 1px solid #555;font-size: 16px!important;background-color: #ffffff!important;
}button {width: 100%;padding: 10px;background-color: #007bff;color: white;border: none;border-radius: 5px;cursor: pointer;font-size: 16px;display: block;margin: 0px;margin-bottom: 20px;margin-left: 0px!important;
}button:hover {background-color: orange;
}.result {margin-top: 20px;text-align: center;
}option {background-color: #ffffff;
}p {font-size: 18px;margin-top: 5px!important;
}

线上运行,可以直接打开:完美平方三项式计算器


http://www.ppmy.cn/server/140810.html

相关文章

electron 中 contextBridge 作用

1. 安全地实现渲染进程和主进程之间的通信 在 Electron 应用中&#xff0c;主进程和渲染进程是相互隔离的&#xff0c;这是为了安全和稳定性考虑。 然而&#xff0c;在很多情况下&#xff0c;渲染进程需要访问主进程中的某些功能&#xff0c;例如系统级别的操作或者一些应用级…

Oracle RAC的thread

参考文档&#xff1a; Real Application Clusters Administration and Deployment Guide 3 Administering Database Instances and Cluster Databases Initialization Parameter Use in Oracle RAC Table 3-3 Initialization Parameters Specific to Oracle RAC THREAD Sp…

陪诊问诊APP开发实战:基于互联网医院系统源码的搭建详解

时下&#xff0c;开发一款功能全面、用户体验良好的陪诊问诊APP成为了医疗行业的一大热点。本文将结合互联网医院系统源码&#xff0c;详细解析陪诊问诊APP的开发过程&#xff0c;为开发者提供实用的开发方案与技术指导。 一、陪诊问诊APP的背景与功能需求 陪诊问诊APP核心目…

i2c-tools 4.3 for Android 9.0

i2c-tools 4.3 Android 9.0下编译i2c-tools 4.3 下载源码 cd external wget https://mirrors.edge.kernel.org/pub/software/utils/i2c-tools/i2c-tools-4.3.tar.gz tar -zxvf i2c-tools-4.3.tar.gz 增加Android.mk Android.mk LOCAL_PATH : $(call my-dir)include $(C…

C#封装EPPlus库为Excel导出工具

1&#xff0c;添加NUGet包 2&#xff0c;封装工具类 using OfficeOpenXml; using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Reflection;namespace GMWPF.utils {public class ExcelUtil<T>{/// <summary>///…

huggingface 下载方法 测试ok

目录 设置环境变量 python 下载无token&#xff1a; python 下载加token 常见报错 设置环境变量 Linux export HF_ENDPOINThttps://hf-mirror.comWindows Powershell $env:HF_ENDPOINT "https://hf-mirror.com" pip install -U huggingface_hub huggingfac…

Rust闭包(能够捕获周围作用域变量的匿名函数,广泛应用于迭代、过滤和映射)闭包变量三种捕获方式:通过引用(不可变引用)、通过可变引用和通过值(取得所有权)

文章目录 Rust 闭包详解闭包的定义与语法基本语法 闭包的特性- 环境捕获&#xff08;三种捕获方式&#xff1a;通过引用、通过可变引用和通过值&#xff08;取得所有权&#xff09;&#xff09;示例代码 - 内存安全与生命周期示例代码1 示例代码2&#xff1a;闭包所有权转移示例…

从xss到任意文件读取

xss一直是一种非常常见且具有威胁性的攻击方式。然而&#xff0c;除了可能导致用户受到恶意脚本的攻击外&#xff0c;xss在特定条件下还会造成ssrf和文件读取&#xff0c;本文主要讲述在一次漏洞挖掘过程中从xss到文件读取的过程&#xff0c;以及其造成的成因。 0x01 前言 xss一…