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这张表…...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性，不同版本的Docker对内核版本有不同要求。例如，Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本，Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下，虚拟教学实训宛如一颗璀璨的新星，正发挥着不可或缺且日益凸显的关键作用，源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例，汽车生产线上各类…...
C++ 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX（不访问内存）XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
Redis数据倾斜问题解决
Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中，部分节点存储的数据量或访问量远高于其他节点，导致这些节点负载过高，影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...
深度学习习题2
1.如果增加神经网络的宽度，精确度会增加到一个特定阈值后，便开始降低。造成这一现象的可能原因是什么？ A、即使增加卷积核的数量，只有少部分的核会被用作预测 B、当卷积核数量增加时，神经网络的预测能力会降低 C、当卷…...
省略号和可变参数模板
本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...
解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist
现象： android studio报错： [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决： 不要动CMakeLists.…...
uni-app学习笔记三十五--扩展组件的安装和使用
由于内置组件不能满足日常开发需要，uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件，需要安装才能使用。 一、安装扩展插件 安装方法： 1.访问uniapp官方文档组件部分：组件使用的入门教程 | uni-app官网 点击左侧…...
基于江科大stm32屏幕驱动，实现OLED多级菜单（动画效果），结构体链表实现(独创源码)
引言 在嵌入式系统中，用户界面的设计往往直接影响到用户体验。本文将以STM32微控制器和OLED显示屏为例，介绍如何实现一个多级菜单系统。该系统支持用户通过按键导航菜单，执行相应操作，并提供平滑的滚动动画效果。 本文设计了一个…...