H5+CSS+JS工作性价比计算器
工作性价比＝平均日新x综合环境系数/35 x(工作时长＋通勤时长—0.5 x摸鱼时长) x学历系数
如果代码中的公式不对，请指正
效果图
源代码
<!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工作性价比计算器
工作性价比＝平均日新x综合环境系数/35 x(工作时长＋通勤时长—0.5 x摸鱼时长) x学历系数 如果代码中的公式不对，请指正 效果图 源代码 <!DOCTYPE html> <html> <head> <style> .calculator { width: 300px; padd…...
Linux：基础命令学习
目录 一、ls命令 实例：-l以长格式显示文件和目录信息 实例：-F根据文件类型在列出的文件名称后加一符号 实例： -R 递归显示目录中的所有文件和子目录。 实例： 组合使用 Home目录和工作目录 二、目录修改和查看命令 三、mkd…...
遇到Websocket就不会测了？别慌，学会这个Jmeter插件轻松解决....
websocket 是一种双向通信协议，在建立连接后，websocket服务端和客户端都能主动向对方发送或者接收数据，而在http协议中，一个request只能有一个response，而且这个response也是被动的，不能主动发起。 websoc…...
高性能 Java 本地缓存 Caffeine 框架介绍及在 SpringBoot 中的使用
在现代应用程序中，缓存是一种重要的性能优化技术，它可以显著减少数据访问延迟，降低服务器负载，提高系统的响应速度。特别是在高并发的场景下，合理地使用缓存能够有效提升系统的稳定性和效率。 Caffeine 是一个高性能的…...
Http 和 Https 的区别（图文详解）
在现代网络通信中，保护数据的安全性和用户的隐私是至关重要的。HTTP（Hypertext Transfer Protocol）和 HTTPS（Hypertext Transfer Protocol Secure）是两种常见的网络通信协议，但它们在数据保护方面的能力存在…...
DP学习——外观模式
学而时习之，温故而知新。 外观模式 角色 2个角色，外观类，子系统类。 个人理解 感觉就是对外接口封装，这个是封装一个功能的对外接口，越简单越好，提供给第三方用。 应用场景 封装为对外库时ÿ…...
Vue3 + Vite 打包引入图片错误
1. 具体报错 报错信息 报错代码 2. 解决方法 改为import引入，注意src最好引用为符引入，不然docker部署的时候可能也会显示不了 <template><img :src"loginBg" alt""> </template><script langts setup> …...
搭建NFS、web、dns服务器
目录 1、搭建一个nfs服务器，客户端可以从该服务器的/share目录上传并下载文件 服务端配置： 客户端测试： 2、搭建一个Web服务器，客户端通过www.haha.com访问该网站时能够看到内容:this is haha 服务端配置： 客户端…...
C++的UI框架和开源项目介绍
文章目录 1.QT2.wxWidgets3.Dear ImGui 1.QT QT的开源项目：QGIS（地理信息系统） https://github.com/qgis/QGIS?tabreadme-ov-file 2.wxWidgets wxWidgets的开源项目：filezilla https://svn.filezilla-project.org/svn/ wxWidg…...
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…...
vue3里将table表格中的数据导出为excel
想要实现前端对表格中的数据进行导出，这里推荐使用xlsx这个依赖库实现。 1、安装 pnpm install xlsx 2、使用 import * as XLSX from "xlsx"; 直接在组件里导入XLSX库，然后给表格table通过ref创建响应式数据拿到table实例，将实…...
【算法】分布式共识Paxos
一、引言 在分布式系统中，一致性是至关重要的一个问题。Paxos算法是由莱斯利兰伯特（Leslie Lamport）在1990年提出的一种解决分布式系统中一致性问题的算法。 二、算法原理 Paxos算法的目标是让一个分布式系统中的多个节点就某个值达成一致。算…...
软考：软件设计师 — 5.计算机网络
五. 计算机网络 1. OSI 七层模型 层次名称主要功能主要设备及协议7应用层实现具体的应用功能 POP3、FTP、HTTP、Telent、SMTP DHCP、TFTP、SNMP、DNS 6表示层数据的格式与表达、加密、压缩5会话层建立、管理和终止会话4传输层端到端的连接TCP、UDP3网络层分组传输和路由选择 三…...
C++ //练习 15.28 定义一个存放Quote对象的vector，将Bulk_quote对象传入其中。计算vector中所有元素总的net_price。
C Primer（第5版） 练习 15.28 练习 15.28 定义一个存放Quote对象的vector，将Bulk_quote对象传入其中。计算vector中所有元素总的net_price。 环境：Linux Ubuntu（云服务器） 工具：vim 代码块&am…...
Midjourney绘画提示词精选
Midjourney绘画提示词精选 在探索Midjourney这一强大的AI绘画工具时，选择合适的提示词是创作出令人惊艳作品的关键。这些提示词不仅能够帮助Midjourney理解你的创作意图，还能引导它生成出符合你期望的图像。以下是对Midjourney绘画提示词的精选与解析&a…...
Kylin中的RBAC：为大数据安全加把锁
Kylin中的RBAC：为大数据安全加把锁 Apache Kylin是一个开源的分布式分析引擎，旨在为Hadoop平台提供快速的大数据量SQL查询能力。随着企业对数据安全和访问控制需求的增加，基于角色的访问控制（Role-Based Access Controlÿ…...
DDoS 攻击下的教育网站防护策略
随着互联网的普及，教育网站成为学生和教师获取信息、进行在线学习的重要平台。然而，这些网站也成为了网络攻击的目标，尤其是分布式拒绝服务（DDoS）攻击。本文将探讨DDoS攻击对教育网站的影响，并提出一系列有…...
Android13以太网静态IP不保存的问题
最近在做Amlogic T982的样机，关于以太网部分，系统Settings只有一个Ethernet的条目，没有其他任何信息，什么以太网mac地址，开关，IP地址，子网掩码，默认网关，dns, 设置代理&a…...
Redis 7.x 系列【31】LUA 脚本
有道无术，术尚可求，有术无道，止于术。 本系列Redis 版本 7.2.5 源码地址：https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 概述2. 常用命令2.1 EVAL2.2 SCRIPT LOAD2.3 EVALSHA2.4 SCRIPT FLUSH2.5 其他 3. …...
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官网中有这句话，我们不能在一个语句中先在子查询中从某张表查出一些值，再update这张表…...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上，你可以使用apt包管理器来安装NFS服务器。打开终端并运行： sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享，例如/shared： sudo mkdir /shared sud…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
Java 8 Stream API 入门到实践详解
一、告别 for 循环！ 传统痛点： Java 8 之前，集合操作离不开冗长的 for 循环和匿名类。例如，过滤列表中的偶数： List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...
循环冗余码校验CRC码 算法步骤+详细实例计算
通信过程：（白话解释） 我们将原始待发送的消息称为 M M M，依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)（意思就是 G （ x ) G（x) G（x) 是已知的）࿰…...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞！！！ 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用，因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型（VLMs）在字幕生成方面…...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上，所以报错，到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本，cu、torch、cp 的版本一定要对…...
Map相关知识
数据结构 二叉树 二叉树，顾名思义，每个节点最多有两个“叉”，也就是两个子节点，分别是左子 节点和右子节点。不过，二叉树并不要求每个节点都有两个子节点，有的节点只 有左子节点，有的节点只有…...
ip子接口配置及删除
配置永久生效的子接口，2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...
Netty从入门到进阶（二）
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架，用于…...
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要： 近期，在使用较新版本的OpenSSH客户端连接老旧SSH服务器时，会遇到 "no matching key exchange method found", "n…...