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

就是这个样的粗爆,手搓一个计算器:加倍时间计算器

线上运行,可以直接打开:加倍时间计算器(在线计算器)

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

HTML:

<div class="calculator"><div class="input-group"><label>增长率 (%):</label> <input id="growthRate" step="any" type="number" placeholder="请输入增长率"></div><button onclick="calculateDoublingTime()">计算加倍时间</button><div class="result"><p>计算结果:</p><p>加倍时间: <span id="doublingTimeOutput">0.00 年</span></p></div></div>

JS:

function calculateDoublingTime() {const growthRate = parseFloat(document.getElementById('growthRate').value);if (isNaN(growthRate) || growthRate <= 0) {alert('请输入有效的正增长率');return;}const doublingTime = 72 / growthRate;document.getElementById('doublingTimeOutput').textContent = doublingTime.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;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.mrgr.cn/news/74909.html

相关文章:

  • Python 获取PDF的各种页面信息(页数、页面尺寸、旋转角度、页面方向等)
  • Spring学习笔记_37——@RequestMapping衍生注解
  • openresty入门教程:rewrite_by_lua_block
  • ⚡️如何在 React 和 Next.js 项目里优雅的使用 Zustand
  • 图像处理实验三(Morphological Image Processing)
  • HMSC联合物种分布模型在群落生态学中的贝叶斯统计分析
  • 不吹不黑,客观理性深入讨论国产编程语言
  • cmake 语法
  • Dolby TrueHD和Dolby Digital Plus (E-AC-3)编码介绍
  • RegEnumKeyExW函数遍历注册表的错乱问题
  • 修改电脑ip
  • Java线程的sleep和wait的区别
  • 5 for循环——抽奖概率计算器
  • Puppeteer教程:使用CSS选择器点击和爬取动态数据
  • Apache Paimon、Apache Hudi、Apache Iceberg对比分析
  • 最懂AI算法的软件,MATLAB实战深度学习大模型带给我不少惊喜!
  • JacksonObjectMapper的作用
  • 【深度学习】神经网络优化方法 正则化方法 价格分类案例
  • Android Studio 中三方库依赖无法找到的解决方案
  • 后台管理系统的通用权限解决方案(十五)基于注解和切面实现操作日志记录
  • 【Linux】 shell 学习汇总[转载]
  • Spark读MySQL数据rdd分区数受什么影响,读parquet、hdfs、hive、Doris、Kafka呢?
  • 接口自动化环境搭建
  • 连接数据库导出数据库信息支持excel pdf html markdown
  • 03 P1314 [NOIP2011 提高组] 聪明的质监员
  • 群控系统服务端开发模式-应用开发-前端角色功能开发