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

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

news 2025/11/4 10:36:31

工作性价比＝平均日新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

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/9/14 19:44:52

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2025/11/4 7:18:19

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/10/30 9:24:58

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/10/19 5:48:51

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/10/5 19:58:27

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

编程新知 2025/11/2 9:30:27

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/7/18 2:39:54

Java毕业设计：WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

编程新知 2025/10/27 13:29:11

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

编程新知 2025/10/7 0:47:59

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

编程新知 2025/9/3 5:42:53