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

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

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/870393.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

前端JS特效第56集:基于canvas的粒子文字动画特效

基于canvas的粒子文字动画特效&#xff0c;先来看看效果&#xff1a; 部分核心的代码如下(全部代码在文章末尾)&#xff1a; <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compat…

【C语言】 约瑟夫环,循环链表实现

更新一下&#xff0c;昨天的代码有点问题&#xff0c;没有考虑到头结点的影响&#xff0c;我的方法是&#xff1a; 在进行步数位移的时候判断标记点&#xff0c;如果走到了头结点&#xff0c;就在循环里面立即往后再位移一次&#xff0c;把头结点跳过&#xff1b;同时在后面删除…

20分钟上手新版Skywalking 9.x APM监控系统

Skywalking https://skywalking.apache.org/ Skywalking是专为微服务、云原生和基于容器的&#xff08;Kubernetes&#xff09;架构设计的分布式系统性能监控工具。 Skywalking关键特性 ● 分布式跟踪 ○ 端到端分布式跟踪。服务拓扑分析、以服务为中心的可观察性和API仪表板。…

2024国际燃气轮机运维周线上分享第一期开启!共探燃机新生态

为促进国内重型燃气轮机运维技术发展&#xff0c;加快建立独立自主的燃气轮机运维技术体系&#xff0c;2024国际燃气轮机运维大会将于2024年10月17-18日在中国广州盛大召开&#xff01; 2024国际燃气轮机运维大会将通过线上直播会议、线下技术分享及颁奖典礼等形式展开&#xf…

spine to unity-2.利用边缘框实现实时碰撞检测

主要讲spine的边缘框&#xff0c;在unity中&#xff0c;实现实时碰撞检测。其中使用的素材&#xff0c;是我为独立游戏ink制作的动画。独立游戏ink的开发日志&#xff0c;在小红薯持续更新中。spine工具包的安装&#xff0c;下载请参考spine to unity-1spine BoundingBoxFollow…

Vue 实现电子签名并生成签名图片

目录 前言项目结构代码实现 安装依赖创建签名画布组件生成签名图片 总结相关阅读 1. 前言 电子签名在现代Web应用中越来越普遍&#xff0c;例如合同签署、确认表单等。本文将介绍如何使用Vue.js实现一个简单的电子签名功能&#xff0c;并将签名生成图片。 2. 项目结构 项…

科研绘图系列:R语言组合堆积图(stacked barplot with multiple groups)

介绍 通常堆积图的X轴表示样本,样本可能会存在较多的分组信息,通过组合堆积图和样本标签分组信息,我们可以得到一张能展示更多信息的可发表图形。 加载R包 knitr::opts_chunk$set(warning = F, message = F) library(tidyverse) library(cowplot) library(patchwork)导入…

hadoop完全分布模式搭建

本次搭建是基于伪分布式进行的&#xff0c;所以配置之前需要搭建好伪分布式 我使用的ubuntu版本见下 虚拟机之前安装过在此不在记录 伪分布式的搭建过程在之前的第一次实验报告上有详细的记录 修改主机名 设置 hosts 文件 ssh 无密码登录 过程不再演示 免密登录成功图 …

2024中国大学生算法设计超级联赛(2)

&#x1f680;欢迎来到本文&#x1f680; &#x1f349;个人简介&#xff1a;陈童学哦&#xff0c;彩笔ACMer一枚。 &#x1f3c0;所属专栏&#xff1a;杭电多校集训 本文用于记录回顾总结解题思路便于加深理解。 &#x1f4e2;&#x1f4e2;&#x1f4e2;传送门 A - 鸡爪解题思…

【反转链表 II】python刷题记录

印象中&#xff0c;这是遍历r2了&#xff0c;还好没放弃。 # Definition for singly-linked list. # class ListNode: # def __init__(self, val0, nextNone): # self.val val # self.next next class Solution:def reverseBetween(self, head: Optional…

NLP基础知识2【各种大模型的注意力】

注意力 传统Attention存在的问题优化方向变体有哪些现在的主要变体集中在KVMulti-Query AttentionGrouped-query AttentionFlashAttention 传统Attention存在的问题 上下文约束速度慢&#xff0c;显存占用大&#xff08;因为注意力考虑整体信息&#xff0c;所以每一个位置都要…

如何使用EXCEL访问WinCC中的实时数据实现报表

如果项目已经做好了&#xff0c;不想改动现有项目。那么可以使用 EXCEL 通过 OPC 方式访问 WinCC 项目的数据。预先定义好 EXCEL 表格样式&#xff0c;通过以下方式实现。通过以下步骤打开 EXCEL 中的 VB 编辑器 引用 WinCC 提供的 OPC 客户端 Control 控件: Siemens OPC DAAut…

LeetCode 415.字符串相加 C++写法

LeetCode 415.字符串相加 C写法 思路&#x1f914;&#xff1a; 首先不能用stoi和tostring来做&#xff0c;如果给一个很大的数那一定存不下。我们可以从后往前一位一位的取&#xff0c;创建一个变量存储进位用于计算下一位数&#xff0c;之后取模得到当前数字&#xff0c;每一…

Python 机器学习求解 PDE 学习项目——PINN 求解一维 Poisson 方程

本文使用 TensorFlow 1.15 环境搭建深度神经网络&#xff08;PINN&#xff09;求解一维 Poisson 方程: − Δ u f in Ω , u 0 on Γ : ∂ Ω . \begin{align} -\Delta u & f \quad & \text{in } \Omega,\\ u & 0 \quad & \text{on } \Gamma:\partial \Om…

Spring Cloud微服务项目公共类抽取

在微服务架构中&#xff0c;代码的重用性和维护性是非常重要的。Spring Cloud 提供了丰富的工具和框架来帮助我们构建和管理微服务应用&#xff0c;但随着项目规模的扩大&#xff0c;我们会遇到大量的重复代码和相似的逻辑。在这种情况下&#xff0c;抽取公共类成为提高代码质量…

txt格式单词导入有道词典生词本 (java代码方式)

txt格式单词导入有道词典生词本 (java代码方式) 首先要求txt文档里单词的格式&#xff0c;大概需要像这种&#xff1a; 每行是一个单词&#xff0c;格式为&#xff1a;英文单词空格词性单词意思。 注意 导出单词本的名字就是你 txt 文件的名字 我这里是 公共英语三级 单词本 …

vite5-macos仿macOS网页osx管理系统|vue3+arcoDesign桌面os

基于vite5.xvue3arco-design原创自研网页版os管理框架ViteWebOS。 使用最新前端技术vite5vue3pinia2arcoDesignsortablejsecharts搭建网页pc版桌面os式后台管理系统解决方案。支持自定义桌面栅格布局引擎、可拖拽桌面图标、多屏分页管理、自定义桌面壁纸主题、毛玻璃虚化背景等…

react中路由跳转以及路由传参

一、路由跳转 1.安装插件 npm install react-router-dom 2.路由配置 路由配置&#xff1a;react中简单的配置路由-CSDN博客 3.实现代码 // src/page/index/index.js// 引入 import { Link, useNavigate } from "react-router-dom";function IndexPage() {const …

论文快过(图像配准|Coarse_LoFTR_TRT)|适用于移动端的LoFTR算法的改进分析 1060显卡上45fps

项目地址&#xff1a;https://github.com/Kolkir/Coarse_LoFTR_TRT 创建时间&#xff1a;2022年 相关训练数据&#xff1a;BlendedMVS LoFTR [19]是一种有效的深度学习方法&#xff0c;可以在图像对上寻找合适的局部特征匹配。本文报道了该方法在低计算性能和有限内存条件下的…

MongoDB教程(十五):MongoDB原子操作

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; 文章目录 引言一、MongoD…