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

H5+CSS+JS工作性价比计算器

news 2026/2/9 16:14:17

工作性价比＝平均日新x综合环境系数/35 x(工作时长＋通勤时长—0.5 x摸鱼时长) x学历系数

如果代码中的公式不对，请指正 

效果图

a3509e58320e472ca12a3ba2787080da.jpg

源代码

<!DOCTYPE html>

<html>

 

<head>

  <style>

    .calculator {

      width: 300px;

      padding: 20px;

      background-color: #fff;

      border-radius: 10px;

      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

      margin: 20px auto;

    }

 

    .calculator h2 {

      margin-top: 0;

      color: #008000;

    }

 

    .calculator label {

      display: block;

      margin-bottom: 10px;

      color: #008000;

    }

 

    .calculator select {

      width: 100%;

      padding: 5px;

      border: 1px solid #008000;

      border-radius: 5px;

      background-color: #e6e6e6;

      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

    }

 

    .calculator input[type="number"] {

      width: 100%;

      padding: 5px;

      border: 1px solid #008000;

      border-radius: 5px;

      background-color: #e6e6e6;

      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

    }

 

    .calculator button {

      width: 100%;

      padding: 10px;

      border: none;

      border-radius: 5px;

      background-color: #008000;

      color: #fff;

      font-size: 16px;

      cursor: pointer;

      margin-top: 10px;

    }

  </style>

</head>

 

<body>

  <div class="calculator">

    <h2>工作性价比计算器</h2>

    <label for="salary">月薪：</label>

    <input type="number" id="salary" placeholder="请输入月薪" />

    <label for="workingHours">工作时长（小时）：</label>

    <input type="number" id="workingHours" placeholder="请输入工作时长" />

    <label for="commuteHours">通勤时长（小时）：</label>

    <input type="number" id="commuteHours" placeholder="请输入通勤时长" />

    <label for="slackHours">摸鱼时长（小时）：</label>

    <input type="number" id="slackHours" placeholder="请输入摸鱼时长" />

    <label for="workEnvironment">工作环境：</label>

    <select id="workEnvironment">

      <option value="1.0">普通环境</option>

      <option value="0.9">偏僻地区或郊区的工厂</option>

      <option value="0.8">艰苦户外等工作环境</option>

      <option value="1.1">CBD、体制内等工作环境</option>

    </select>

    <label for="oppositeSexEnvironment">异性环境：</label>

    <select id="oppositeSexEnvironment">

      <option value="1.0">周围好看的异性不多不少</option>

      <option value="0.9">周围没有好看异性</option>

      <option value="1.1">周围很多好看异性</option>

    </select>

    <label for="colleagueEnvironment">同事环境：</label>

    <select id="colleagueEnvironment">

      <option value="1.0">周围基本上都是普通同事</option>

      <option value="0.95">周围脑残同事较多</option>

      <option value="1.05">周围优秀同事较多</option>

    </select>

    <label for="education">学历：</label>

    <select id="education">

      <option value="0.8">专科及以下</option>

      <option value="1.0">普通本科</option>

      <option value="1.2">211/985 本科</option>

      <option value="1.4">普通硕士</option>

      <option value="1.6">211/985 硕士</option>

      <option value="1.8">普通博士</option>

      <option value="2.0">211/985 博士</option>

    </select>

    <button οnclick="calculate()">计算性价比</button>

    <p id="result"></p>

    <p id="advice"></p>

  </div>

 

  <script>

    function calculate() {

      var salary = parseInt(document.getElementById("salary").value);

      var workingHours = parseInt(document.getElementById("workingHours").value);

      var commuteHours = parseInt(document.getElementById("commuteHours").value);

      var slackHours = parseInt(document.getElementById("slackHours").value);

      var workEnvironment = parseFloat(document.getElementById("workEnvironment").value);

      var oppositeSexEnvironment = parseFloat(document.getElementById("oppositeSexEnvironment").value);

      var colleagueEnvironment = parseFloat(document.getElementById("colleagueEnvironment").value);

      var education = parseFloat(document.getElementById("education").value);

 

      if (isNaN(salary) || isNaN(workingHours) || isNaN(commuteHours) || isNaN(slackHours)) {

        document.getElementById("result").innerHTML = "请输入有效的数值。";

        document.getElementById("advice").innerHTML = "";

        return;

      }

 

      var averageDailySalary = salary / 21.75; // 假设每月工作21.75天

      var comprehensiveEnvironmentFactor = workEnvironment * oppositeSexEnvironment * colleagueEnvironment;

      var workDuration = workingHours + commuteHours - 0.5 * slackHours; // 考虑到摸鱼时间的影响

 

      // 假设工作性价比的计算公式为：

      // (平均日薪 * 综合环境系数) / (标准工作时长 * 工作时长系数 * 学历系数)

      var standardWorkingHours = 8; // 标准工作时长为8小时

      var workPerformanceRatio = (averageDailySalary * comprehensiveEnvironmentFactor) / (standardWorkingHours * workDuration * education);

 

      document.getElementById("result").innerHTML = "工作性价比：" + workPerformanceRatio.toFixed(2);

 

      var advice = "";

      // 根据工作性价比分数给出建议

      if (workPerformanceRatio < 0.5) {

        advice = "工作性价比较低，建议考虑换工作或改善工作条件。";

      } else if (workPerformanceRatio >= 0.5 && workPerformanceRatio < 1.0) {

        advice = "工作性价比一般，可以考虑提升工作效率或寻找更好的工作机会。";

      } else if (workPerformanceRatio >= 1.0 && workPerformanceRatio < 1.5) {

        advice = "工作性价比良好，继续保持并寻找进一步提升的机会。";

      } else if (workPerformanceRatio >= 1.5) {

        advice = "工作性价比很高，继续保持并享受工作带来的回报。";

      }

 

      document.getElementById("advice").innerHTML = advice;

    }

  </script>

</body>

 

</html>

 

 

相关文章：

H5+CSS+JS工作性价比计算器

工作性价比&#xff1d;平均日新x综合环境系数/35 x(工作时长&#xff0b;通勤时长—0.5 x摸鱼时长) x学历系数 如果代码中的公式不对&#xff0c;请指正 效果图 源代码 <!DOCTYPE html> <html> <head> <style> .calculator { width: 300px; padd…...

编程日记 2024/7/26 21:35:26

Linux：基础命令学习

目录 一、ls命令 实例&#xff1a;-l以长格式显示文件和目录信息 实例&#xff1a;-F根据文件类型在列出的文件名称后加一符号 实例&#xff1a; -R 递归显示目录中的所有文件和子目录。 实例&#xff1a; 组合使用 Home目录和工作目录 二、目录修改和查看命令 三、mkd…...

编程日记 2024/7/26 21:34:24

遇到Websocket就不会测了？别慌，学会这个Jmeter插件轻松解决....

websocket 是一种双向通信协议&#xff0c;在建立连接后&#xff0c;websocket服务端和客户端都能主动向对方发送或者接收数据&#xff0c;而在http协议中&#xff0c;一个request只能有一个response&#xff0c;而且这个response也是被动的&#xff0c;不能主动发起。 websoc…...

编程日记 2024/7/26 21:32:23

高性能 Java 本地缓存 Caffeine 框架介绍及在 SpringBoot 中的使用

在现代应用程序中&#xff0c;缓存是一种重要的性能优化技术&#xff0c;它可以显著减少数据访问延迟&#xff0c;降低服务器负载&#xff0c;提高系统的响应速度。特别是在高并发的场景下&#xff0c;合理地使用缓存能够有效提升系统的稳定性和效率。 Caffeine 是一个高性能的…...

编程日记 2024/7/26 21:29:20

Http 和 Https 的区别（图文详解）

在现代网络通信中&#xff0c;保护数据的安全性和用户的隐私是至关重要的。HTTP&#xff08;Hypertext Transfer Protocol&#xff09;和 HTTPS&#xff08;Hypertext Transfer Protocol Secure&#xff09;是两种常见的网络通信协议&#xff0c;但它们在数据保护方面的能力存在…...

编程日记 2024/7/26 21:27:15

DP学习——外观模式

学而时习之&#xff0c;温故而知新。 外观模式 角色 2个角色&#xff0c;外观类&#xff0c;子系统类。 个人理解 感觉就是对外接口封装&#xff0c;这个是封装一个功能的对外接口&#xff0c;越简单越好&#xff0c;提供给第三方用。 应用场景 封装为对外库时&#xff…...

编程日记 2024/7/26 21:26:14

Vue3 + Vite 打包引入图片错误

1. 具体报错 报错信息 报错代码 2. 解决方法 改为import引入&#xff0c;注意src最好引用为符引入&#xff0c;不然docker部署的时候可能也会显示不了 <template><img :src"loginBg" alt""> </template><script langts setup> …...

编程日记 2024/7/26 21:21:09

搭建NFS、web、dns服务器

目录 1、搭建一个nfs服务器&#xff0c;客户端可以从该服务器的/share目录上传并下载文件 服务端配置&#xff1a; 客户端测试&#xff1a; 2、搭建一个Web服务器&#xff0c;客户端通过www.haha.com访问该网站时能够看到内容:this is haha 服务端配置&#xff1a; 客户端…...

编程日记 2024/7/26 21:17:05

C++的UI框架和开源项目介绍

文章目录 1.QT2.wxWidgets3.Dear ImGui 1.QT QT的开源项目&#xff1a;QGIS&#xff08;地理信息系统&#xff09; https://github.com/qgis/QGIS?tabreadme-ov-file 2.wxWidgets wxWidgets的开源项目&#xff1a;filezilla https://svn.filezilla-project.org/svn/ wxWidg…...

编程日记 2024/7/26 21:16:04

SpringBoot连接PostgreSQL+MybatisPlus入门案例

项目结构 一、Java代码 pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://mave…...

编程日记 2024/7/26 21:15:03

vue3里将table表格中的数据导出为excel

想要实现前端对表格中的数据进行导出&#xff0c;这里推荐使用xlsx这个依赖库实现。 1、安装 pnpm install xlsx 2、使用 import * as XLSX from "xlsx"; 直接在组件里导入XLSX库&#xff0c;然后给表格table通过ref创建响应式数据拿到table实例&#xff0c;将实…...

编程日记 2024/7/26 21:14:02

【算法】分布式共识Paxos

一、引言 在分布式系统中&#xff0c;一致性是至关重要的一个问题。Paxos算法是由莱斯利兰伯特&#xff08;Leslie Lamport&#xff09;在1990年提出的一种解决分布式系统中一致性问题的算法。 二、算法原理 Paxos算法的目标是让一个分布式系统中的多个节点就某个值达成一致。算…...

编程日记 2024/7/26 21:12:00

软考：软件设计师 — 5.计算机网络

五. 计算机网络 1. OSI 七层模型 层次名称主要功能主要设备及协议7应用层实现具体的应用功能 POP3、FTP、HTTP、Telent、SMTP DHCP、TFTP、SNMP、DNS 6表示层数据的格式与表达、加密、压缩5会话层建立、管理和终止会话4传输层端到端的连接TCP、UDP3网络层分组传输和路由选择 三…...

编程日记 2024/7/26 21:09:57

C++ //练习 15.28 定义一个存放Quote对象的vector，将Bulk_quote对象传入其中。计算vector中所有元素总的net_price。

C Primer&#xff08;第5版&#xff09; 练习 15.28 练习 15.28 定义一个存放Quote对象的vector&#xff0c;将Bulk_quote对象传入其中。计算vector中所有元素总的net_price。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 代码块&am…...

编程日记 2024/7/26 21:07:55

Midjourney绘画提示词精选

Midjourney绘画提示词精选 在探索Midjourney这一强大的AI绘画工具时&#xff0c;选择合适的提示词是创作出令人惊艳作品的关键。这些提示词不仅能够帮助Midjourney理解你的创作意图&#xff0c;还能引导它生成出符合你期望的图像。以下是对Midjourney绘画提示词的精选与解析&a…...

编程日记 2024/7/26 21:06:54

Kylin中的RBAC：为大数据安全加把锁

Kylin中的RBAC&#xff1a;为大数据安全加把锁 Apache Kylin是一个开源的分布式分析引擎&#xff0c;旨在为Hadoop平台提供快速的大数据量SQL查询能力。随着企业对数据安全和访问控制需求的增加&#xff0c;基于角色的访问控制&#xff08;Role-Based Access Control&#xff…...

编程日记 2024/7/26 21:05:53

DDoS 攻击下的教育网站防护策略

随着互联网的普及&#xff0c;教育网站成为学生和教师获取信息、进行在线学习的重要平台。然而&#xff0c;这些网站也成为了网络攻击的目标&#xff0c;尤其是分布式拒绝服务&#xff08;DDoS&#xff09;攻击。本文将探讨DDoS攻击对教育网站的影响&#xff0c;并提出一系列有…...

编程日记 2024/7/26 21:03:51

Android13以太网静态IP不保存的问题

最近在做Amlogic T982的样机&#xff0c;关于以太网部分&#xff0c;系统Settings只有一个Ethernet的条目&#xff0c;没有其他任何信息&#xff0c;什么以太网mac地址&#xff0c;开关&#xff0c;IP地址&#xff0c;子网掩码&#xff0c;默认网关&#xff0c;dns, 设置代理&a…...

编程日记 2024/7/26 20:58:46

Redis 7.x 系列【31】LUA 脚本

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Redis 版本 7.2.5 源码地址&#xff1a;https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 概述2. 常用命令2.1 EVAL2.2 SCRIPT LOAD2.3 EVALSHA2.4 SCRIPT FLUSH2.5 其他 3. …...

编程日记 2024/7/26 20:55:42

mysql中You can’t specify target table for update in FROM clause错误

mysql中You can’t specify target table for update in FROM clause错误 You cannot update a table and select directly from the same table in a subquery. mysql官网中有这句话&#xff0c;我们不能在一个语句中先在子查询中从某张表查出一些值&#xff0c;再update这张表…...

编程日记 2024/7/26 20:52:39

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

编程新知 2025/11/29 6:54:19

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/12/9 21:15:58

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2026/1/15 4:39:38

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/11/30 16:55:32

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/12/14 11:45:02

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

编程新知 2026/1/10 1:08:51

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2026/1/25 3:31:07

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

编程新知 2026/2/6 22:55:12

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

编程新知 2025/10/6 2:06:51

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分，它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构： use strict;/…...

编程新知 2025/10/31 21:11:39