首页 > 其他分享 >就是这个样的粗爆,手搓一个计算器:黄金重量计算器

就是这个样的粗爆,手搓一个计算器:黄金重量计算器

时间:2024-11-05 09:47:38浏览次数:6  
标签:size color 重量 important background 计算器 font border 黄金

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

HTML:

<div class="calculator"><label for="volume">体积 (单位: 立方厘米):</label> <input id="volume" required="" step="0.01" type="number" placeholder="请输入体积"> <label for="density">密度 (单位: 克/立方厘米):</label> <input id="density" required="" step="0.01" type="number" value="19.32" placeholder="请输入密度"><button onclick="calculateGoldWeight()">计算黄金重量</button><div id="result" class="result">结果将在此显示</div></div>

JS:

function calculateGoldWeight() {
            const volume = parseFloat(document.getElementById('volume').value);
            const density = parseFloat(document.getElementById('density').value);

            if (!volume || !density) {
                document.getElementById('result').innerText = "请提供有效的体积和密度。";
                return;
            }

            // 计算黄金重量
            const weight = volume * density;

            document.getElementById('result').innerText = `黄金重量: ${weight.toFixed(2)} 克`;
        }

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;
}

button:hover {
    background-color: orange;
}

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

option {
        background-color: #ffffff;
}


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

 线上运行,可以直接打开:黄金重量计算器

标签:size,color,重量,important,background,计算器,font,border,黄金
From: https://blog.csdn.net/yuchangchenTT/article/details/143481430

相关文章

  • 黄金或迎重大反弹?分析师看好未来走势
    投资者们开始意识到,未来几个月通胀可能会再次加速,这让黄金可能处于一次重大反弹的早期阶段。最近的市场动向显示,黄金的表现正在打破与美国股市、美元和美债收益率之间的传统反向关系。黄金的反常走势凯投宏观的首席气候与商品经济学家戴维·奥克斯利(DavidOxley)在上周的一份......
  • 打造优雅API接口的黄金法则,让后端开发更高效
    在当今技术日益复杂、业务需求快速增长的背景下,应用系统不仅要满足功能需求,还要确保与其他系统、第三方平台及服务的无缝对接。在这样的复杂环境中,API接口就像是系统的“桥梁”,负责高效、可靠地传递信息,帮助实现跨系统的协同工作。然而,一个不优雅的API接口设计可能会带来......
  • 微信小程序案例:计算器(含代码)
    ✅作者简介:2022年博客新星第八。热爱国学的Java后端开发者,修心和技术同步精进。......
  • 深入理解偏向锁、轻量级锁、重量级锁
    一、对象结构和锁状态synchronized关键字是java中的内置锁实现,内置锁实际上就是个任意对象,其内存结构如下图所示其中,MarkWord字段在64位虚拟机下占64bit长度,其结构如下所示可以看到MarkWord字段有个很重要的作用就是记录当前对象锁状态,最后3bit字段用来标记当前锁状态是无......
  • <Project-11 Calculator> 计算器 0.5 液体、长度、温度单位 转换器 liquid_measures HTM
    前言这是一个综合性的单位换算工具,提供了多种常用计量单位之间的转换功能。不断完善style各页面风格统一,格式一致。容量单位换算支持在公制单位(升、毫升、立方厘米)美制容量单位(加仑、夸脱、品脱、杯、液体盎司)厨房计量单位(汤匙、茶匙、米杯)之间相互转换长度单位换算公......
  • [SDOI]2011计算器
    \(非常简单的一道板子训练题\)\(对于问题一:直接使用快速幂解决\)\(对于问题二:使用exgcd解决\)\(对于问题三:使用bsgs解决\)\(code:\)点击查看代码#include<bits/stdc++.h>#defineintlonglong#defineall(x)x.begin(),x.end()#definerall(x)x.rbegin(),x.rend()#d......
  • 就是这个样的粗爆,手搓一个计算器:排卵计算器
        作为程序员,没有合适的工具,就得手搓一个,PC端,移动端均可适用。废话不多说,直接上代码。HTML:<divclass="container"><divclass="calculator"><labelfor="last-period">上次月经开始日期:</label><inputid="last-period"type="d......
  • 程序设计实践 计算器
    这段代码实现了一个综合计算器应用程序,它使用Python的Tkinter库创建了一个图形用户界面(GUI)。该计算器包含两个主要功能:普通计算器和贷款计算器。下面是对代码的详细解释:1.导入模块importtkinterastkfromtkinterimportmessageboxfrommathimportsqrttkinter:用于创......