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

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

news 文章来源：https://blog.csdn.net/w11111xxxl/article/details/140721438 2025/5/6 15:04:22

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

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

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

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

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

</select>

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

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

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

</select>

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

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

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

</select>

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

</select>

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

</div>

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…...

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

Linux：基础命令学习

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

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

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

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

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

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

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

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

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

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

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

DP学习——外观模式

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

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

Vue3 + Vite 打包引入图片错误

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

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

搭建NFS、web、dns服务器

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

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

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…...

编程日记 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

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

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

【算法】分布式共识Paxos

一、引言在分布式系统中，一致性是至关重要的一个问题。Paxos算法是由莱斯利兰伯特（Leslie Lamport）在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（第5版） 练习 15.28 练习 15.28 定义一个存放Quote对象的vector，将Bulk_quote对象传入其中。计算vector中所有元素总的net_price。环境：Linux Ubuntu（云服务器） 工具：vim 代码块&am…...

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

Midjourney绘画提示词精选

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

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

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

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

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

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

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

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

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

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

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

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. …...

编程日记 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官网中有这句话，我们不能在一个语句中先在子查询中从某张表查出一些值，再update这张表…...

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

Linux Vim最全面的教程

Vim 是一个非常强大的文本编辑器，它在 Linux 环境中尤其受欢迎。Vim 支持高度定制，并且拥有丰富的功能，包括多级撤销、宏、脚本语言支持等。下面是关于 Vim 的一个较为全面的教程。 Vim 的启动要启动 Vim，你可以在终端中输入 v…...

编程日记 2024/7/26 20:50:37

setsockopt选项对tcp速度

GPT-4 (OpenAI) 每个setsockopt调用都涉及到一个套接字描述符，一个指定网络层的常数（如IPPROTO_IP, IPPROTO_TCP, IPPROTO_IPV6, SOL_SOCKET等），一个指定需配置的选项的常数，一个指向配置值的指针，以及那个…...

编程日记 2024/7/26 20:48:35

HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号3

基础认证题库请移步：HarmonyOS应用开发者基础认证题库注：有读者反馈，题库的代码块比较多，打开文章时会卡死。所以笔者将题库拆分，单选题20个为一组，多选题10个为一组，题库目录如下，…...

编程日记 2024/7/26 20:47:34

bool数组的理解和应用[C++]

文章目录 bool数组的用法bool数组的定义声明bool数组的初始化访问和修改数组元素遍历数组运用bool数组简单代码在今天做题中发现了bool类不仅能用于函数类型还能用于数组类型，好奇查了查发现bool还有很多用处：基本变量，在枚举类型中会用到&…...

编程日记 2024/7/26 20:44:31

JavaScript模拟滑动手势

双击回到顶部左滑动右滑动代码展示 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Gesture…...

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