首页 > 其他分享 >就是这个样的粗爆,手搓一个计算器:扣篮计算器

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

时间:2024-11-29 12:29:54浏览次数:11  
标签:扣篮 color background 计算器 font border 就是 size

 线上运行,可以直接打开:扣篮计算器(在线计算器)

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

HTML:

<div class="calculator"><div class="input-group"><label for="jump-height">垂直弹跳高度(cm):</label> <input id="jump-height" type="number" placeholder="请输入垂直弹跳高度"></div><div class="input-group"><label for="reach-height">站立摸高(cm):</label> <input id="reach-height" type="number" placeholder="请输入站立摸高"></div><button onclick="calculate()">计算是否可以扣篮</button><div id="result" class="result"></div></div>

JS:

function calculate() {
            const jumpHeight = parseFloat(document.getElementById("jump-height").value);
            const reachHeight = parseFloat(document.getElementById("reach-height").value);
            const resultDiv = document.getElementById("result");

            if (isNaN(jumpHeight) || isNaN(reachHeight)) {
                resultDiv.textContent = "请输入有效的数值!";
       
                return;
            }

            const dunkHeight = reachHeight + jumpHeight;
            if (dunkHeight >= 305) {
                resultDiv.textContent = `恭喜!您可以扣篮!跳起后摸高为 ${dunkHeight} cm。`;

            } else {
                resultDiv.textContent = `遗憾!您无法扣篮,跳起后摸高为 ${dunkHeight} cm。`;

            }
        }

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

标签:扣篮,color,background,计算器,font,border,就是,size
From: https://blog.csdn.net/yuchangchenTT/article/details/144132650

相关文章

  • eGFR计算器,专业可靠的肾功能评估工具
    在当今数字化医疗时代,准确评估肾功能对于疾病预防和治疗至关重要。eGFR计算器作为一款专业的在线工具,为医疗工作者和患者提供了便捷可靠的肾小球滤过率(eGFR)计算服务。什么是eGFR?eGFR(估算的肾小球滤过率)是评估肾功能的重要医学指标。它通过测量每分钟肾小球过滤的血液量来反......
  • 打卡信奥刷题(309)用C++信奥P2614[普及组/提高] 计算器弹琴
    计算器弹琴题目描述总所周知,计算器可以拿来干很多它本不应该干的事情,比如写作文。(参看洛谷P2549)小A发现了一个计算器的另一个隐藏功能——弹琴。http://www.bilibili.com/video/av2205500/如果按上一个键,比如说1,就会发出中音“Do”。这边给出按键音高表+低音Fa<低......
  • LeetCode【0227】基本计算器 II
    本文目录1中文题目2Python求解2.1求解思路2.2涉及方法2.3求解示例2.4Python代码2.5复杂度分析3题目总结1中文题目给定一个字符串表达式s,请实现一个基本计算器来计算并返回它的值。整数除法仅保留整数部分。可以假设给定的表达式总是有效的。所有中间结......
  • 鸿蒙NEXT开发案例:亲戚关系计算器
     【引言】在快节奏的现代生活中,人们往往因为忙碌而忽略了与亲戚间的互动,特别是在春节期间,面对众多的长辈和晚辈时,很多人会感到困惑,不知道该如何正确地称呼每一位亲戚。针对这一问题,我们开发了一款基于鸿蒙NEXT平台的“亲戚关系计算器”应用,旨在帮助用户快速、准确地识别和称呼......
  • 用宏实现简单的计算器
    大家好,那么经过我们前面几期的学习,我们对宏有了一定的了解,那么我们今天就来试试实现一个简单的加减乘除运算。我们的思路是使用三目操作符来分别进行加减和乘除的运算,然后用if判断来”进入相关的判断体进而来进行计算。当然,如果我们进行除的话记得除数不能为0既然我们已经有......
  • 作为前端工程师,不了解MQTT,只知道HTTP,那就是不合格啦。
    作为前端开发工程师,了解MQTT(MessageQueuingTelemetryTransport)协议是很有必要的。MQTT是一种轻量级的消息传输协议,主要用于物联网(IoT)设备之间的通信。一、MQTT协议特点轻量级MQTT协议设计简洁,占用带宽小,对硬件资源要求低,非常适合在资源受限的设备上使用,如传感器、嵌......
  • 双亲委派机制以及类加载过程就是这样啊
    类加载过程:简洁来说就是将我们的已经完成编译的class字节码文件通过类加载器到我们JVM的内存运行时数据区成为我们可以在程序中可以使用的class对象,而类加载器就是通过双亲委派机制来实现的,这个也是反射的底层实现的原因具体流程: 加载链接 初始化加载:就是通过类加......
  • 表达式计算,递归的思路,表达式本身的定义就是递归
    #include<iostream>usingnamespacestd;intfactor_value();intterm_value();intexpression_value();intfactor_value()//因子{   intresult=0;   charop=cin.peek();//用op存储缓冲区第一个字符,但并不从键盘缓冲区取走   if(op=='(')//看是......
  • 【网络安全】学过编程就是黑客?
      前言黑客,相信经常接触电脑的朋友们对这个词都不陌生,各类影视视频中黑客总是身处暗处,运筹帷幄,正是这种神秘感让我走向学习编程的道路,也正是如此让我明白黑客远没有我想象中那么“帅气”。黑客......
  • 网络安全入门教程(非常详细)从零基础入门到精通,看完这一篇你就是网络安全高手了。
      关于我我算是“入行”不久的一个新人安全工作者,为什么是引号呢,因为我是个“半个野路子”出身。早在13年的时候,我在初中时期就已经在90sec、wooyun等社区一直学习、报告漏洞。后来由于升学的压力,我逐渐淡出了安全圈子,也没有继续学习技术。也因为这个原因,高考选择专业时,对......