就是这个样的粗爆,手搓一个计算器:弧长计算器

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

HTML:

<div class="calculator"><label for="radius">圆的半径 (r):</label> <input id="radius" type="number" placeholder="输入圆的半径"> <label for="angle">圆心角 (θ,以弧度为单位):</label> <input id="angle" type="number" placeholder="输入圆心角(单位:弧度)"><button onclick="calculateArcLength()">计算弧长</button><div id="result" class="result">弧长结果将显示在这里</div></div>

JS:

function calculateArcLength() {
        const radius = parseFloat(document.getElementById('radius').value);
        const angle = parseFloat(document.getElementById('angle').value);
        
        if (isNaN(radius) || isNaN(angle) || radius <= 0 || angle <= 0) {
            document.getElementById('result').textContent = "请输入有效的半径和圆心角。";
            return;
        }
        
        const arcLength = radius * angle;
        document.getElementById('result').textContent = `弧长为:${arcLength.toFixed(2)} 单位长度`;
    }

CSS:

.calculator {
    width: 300px;
    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;
}

button:hover {
    background-color: orange;
}

.result {
    margin-top: 20px;
    text-align: center;
        font-size: 18px;
}

option {
        background-color: #ffffff;
}


p {
    font-size: 18px;
        margin-top: 5px!important;
}

线上运行,可以直接打开:弧长计算器

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/912682.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ServletContext介绍

文章目录 1、ServletContext对象介绍1_方法介绍2_用例分析 2、ServletContainerInitializer1_整体结构2_工作原理3_使用案例 3、Spring案例源码分析1_注册DispatcherServlet2_注册配置类3_SpringServletContainerInitializer 4_总结 ServletContext 表示上下文对象&#xff0c;…

【论文复现】MSA+抑郁症模型总结(三)

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀MSA抑郁症模型 热门研究领域&#xff1a;情感计算的横向发展1. 概述2. 论文地址3. 研究背景4. 主要贡献5. 模型结构和代码6. 数据集介绍7. 性…

使用 Umami 部署博客分析工具

Umami 简介 Umami 是一款开源且注重隐私的网站分析工具&#xff0c;可替代 Google Analytics。它提供网站流量和用户行为等见解&#xff0c;但不使用 Cookie 或收集个人数据&#xff0c;符合隐私法规。Umami 轻巧易用&#xff0c;可自行托管。 如果你有自己的博客&#xff0c;…

JAVA笔记 | ResponseBodyEmitter等异步流式接口快速学习

先简单记录下简单使用跟测试&#xff0c;后续再补充具体&#xff0c;最近有用到&#xff0c;简单来说就是后端(服务端)编写个发射器&#xff0c;实现一次请求&#xff0c;一直向前端客户端发射数据&#xff0c;直到发射器执行完毕&#xff0c;模拟ai一句一句回复的效果 Respon…

在IntelliJ IDEA中创建带子模块的SpringBoot工程

前言 在项目开发中&#xff0c;一个工程往往有若干子工程或模块&#xff0c;所以主工程一般是一个容器&#xff0c;本文介绍在IntelliJ IDEA中创建带多模块的SpringBoot工程的详细步骤。 1、首先打开IntellJ IDEA&#xff08;以下简称IDEA&#xff09;,创建一个新项目。假定新…

【LeetCode】每日一题 2024_11_9 设计相邻元素求和服务(构造,哈希)

前言 每天和你一起刷 LeetCode 每日一题~ LeetCode 启动&#xff01; 题目&#xff1a;设计相邻元素求和服务 近几天不知道力扣发什么疯&#xff0c;每日一题出的太抽象了&#xff0c;我题解是写不了一点了 . . . 今天稍微正常了些&#xff0c;就又来更新了~ 代码与解题思路…

如何搭建企业内部知识库?:打造专属智能体,为企业提供高效智能的知识管理

在当今数据爆炸的时代&#xff0c;虽然AI强大&#xff0c;但常规的AI工具或搜索引擎在面对复杂、专业领域的问题时&#xff0c;可能给出模棱两可的回应&#xff0c;无法满足企业精细化的需求。这就是为什么&#xff0c;企业需要一个专属的AI知识库 —— 它不仅能存储你的数据&a…

胶囊网络、MobileNet、坐标注意力机制的应用

文章目录 摘要Abstract1.胶囊网络1.1 动态路由 2.坐标注意力机制3.MobileNet3.1 深度卷积3.2 逐点卷积3.3 深度可分离卷积3.3.1 深度可分离卷积与标准卷积的对比3.3.2 卷积操作的代码实现3.3.2.1 函数原型3.3.2.2 标准卷积3.3.2.3 分组卷积3.3.2.4 深度可分离卷积 3.4 MobileNe…

一个开源、免费(MIT License)、功能强大、可扩展的电动汽车充电控制器和家庭能源管理系统(带私活源码)

项目介绍 evcc是一个开源、免费&#xff08;MIT License&#xff09;、功能强大、可扩展的电动汽车充电控制器和家庭能源管理系统&#xff0c;支持广泛的设备和品牌&#xff0c;提供简单的用户界面和强大的功能。 功能特点 用户界面&#xff1a;简单且清晰的用户界面。 充电器…

Pr 视频过渡:沉浸式视频

效果面板/视频过渡/沉浸式视频 Video Transitions/Immersive Video Adobe Premiere Pro 的视频过渡效果中&#xff0c;沉浸式视频 Immersive Video效果组主要用于 VR 视频剪辑之间的过渡。 自动 VR 属性 Auto VR Properties是所有 VR 视频过渡效果的通用选项。 默认勾选&#x…

[OpenGL]使用OpenGL实现硬阴影效果

一、简介 本文介绍了如何使用OpenGL实现硬阴影效果&#xff0c;并在最后给出了全部的代码。本文基于[OpenGL]渲染Shadow Map&#xff0c;实现硬阴影的流程如下&#xff1a; 首先&#xff0c;以光源为视角&#xff0c;渲染场景的深度图&#xff0c;将light space中的深度图存储…

成都睿明智科技有限公司抖音电商服务效果如何?

在这个短视频风起云涌的时代&#xff0c;抖音电商以其独特的魅力&#xff0c;成为了众多商家竞相追逐的新蓝海。而在这片波澜壮阔的商海中&#xff0c;成都睿明智科技有限公司犹如一艘稳健的航船&#xff0c;引领着无数企业驶向成功的彼岸。今天&#xff0c;就让我们一起揭开成…

uniapp 实现瀑布流

效果演示 组件下载 瀑布流布局-waterfall - DCloud 插件市场

集合进阶(JAVA笔记第二十九期)

p.s.这是萌新自己自学总结的笔记&#xff0c;如果想学习得更透彻的话还是请去看大佬的讲解 集合基础看这里 目录 集合体系结构单列集合Collection各个方法的注意事项add()remove()contains() Collection三种遍历方式迭代器遍历增强for遍历lambda表达式遍历匿名内部类遍历 Lis…

使用LlamaIndex框架构建RAG应用的基础实践指南

前言 上一篇文章[检索增强生成 Retrieval-Augmented Generation]介绍了什么是 RAG &#xff0c;并详细对比了和大模型微调方式的区别。 目前实现 RAG 的主流框架就是 [LangChain] 和 [LlamaIndex]&#xff0c;LangChain 更适合需要复杂对话流程、上下文管理、以及多步骤任务的…

小程序开发进阶之路-AI编程助手

之前&#xff0c;我独自一人开发了一个名为“心情追忆”的小程序&#xff0c;旨在帮助用户记录日常的心情变化及重要时刻。从项目的构思、设计、前端&#xff08;小程序&#xff09;开发、后端搭建到最终部署&#xff0c;所有环节都由我一人包办。经过一个月的努力&#xff0c;…

Typora导出pdf手动分页和设置字体样式

手动分页 <div style"page-break-after: always;"></div>鼠标点击代码才会显示&#xff0c;不点击会隐藏。导出pdf时&#xff0c;该位置会分页 设置字体大小、加粗、居中、空格 <p style"font-size:30px; font-weight: bold; text-align: cen…

【GCN】 代码详解 (1) 如何运行【pytorch】可运行版本

Graph Convolutional Networks 代码详解 前言0.引言1.环境配置2. 代码的运行2.1 报错处理2.2 运行结果 3.总结 前言 在前文中&#xff0c;已经对图卷积神经网络&#xff08;Graph Convolutional Neural Networks, GCN&#xff09;的理论基础进行了深入探讨。接下来的章节将会进…

基于 PyTorch 从零手搓一个GPT Transformer 对话大模型

一、从零手实现 GPT Transformer 模型架构 近年来&#xff0c;大模型的发展势头迅猛&#xff0c;成为了人工智能领域的研究热点。大模型以其强大的语言理解和生成能力&#xff0c;在自然语言处理、机器翻译、文本生成等多个领域取得了显著的成果。但这些都离不开其背后的核心架…

做口播博主:真人出镜还是用数字人

做口播博主&#xff1a;真人出镜还是用数字人&#xff1f; 背景&#xff1a;数字人“风口”与流量的冷现实 数字人生成的视频逐渐流行&#xff0c;但真正拥有爆款流量的案例却寥寥无几&#xff1b;另一方面&#xff0c;真人出镜的创作又面临镜头感不足和成本高的难题。创作者究…