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.mzph.cn/news/875900.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【个人记录】pkg可以将Node.js应用打包为可执行文件

背景 之前按客户需求做了一个简易定时任务应用&#xff0c;完成后为方便客户使用需要打包为可执行文件。 pkg工具 pkg 是一个非常流行的工具&#xff0c;它能够将 Node.js 应用打包成独立的可执行文件。它支持多个平台&#xff0c;包括 Windows、macOS 和 Linux。 测试环境…

懒人精灵安卓版纯本地离线文字识别插件

目的 懒人精灵是一款可以模拟鼠标和键盘操作的自动化工具。它可以帮助用户自动完成一些重复的、繁琐的任务&#xff0c;节省大量人工操作的时间。懒人精灵也包含图色功能&#xff0c;识别屏幕上的图像&#xff0c;根据图像的变化自动执行相应的操作。本篇文章主要讲解下更优秀的…

测试工作中常听到的名词解释 : )

背景 很多名称其实看字面意思都挺抽象的&#xff0c;有时看群里的测试大佬在不停蹦这类术语&#xff0c;感觉很高大上&#xff0c;但其实很多你应该是知道的&#xff0c;只不过没想到别人是这样叫它的。又或者你的主编程语言不是 Java&#xff0c;所以看不懂他们在讲啥&#x…

平均场理论下的维度约简公式与应用解析

平均场理论下的维度约简公式与应用解析 平均场理论的核心作用 平均场理论是一种处理复杂网络系统的方法&#xff0c;特别是在网络系统规模庞大时。它通过将耦合的多元微分方程组降至多个一元微分方程组&#xff0c;从而实现维度约简&#xff0c;极大地提高了计算效率。其基本…

C#高级:枚举(Enum)从索引、值到注释的完整使用技巧

目录 一、推荐的枚举写法 二、获取注释的封装代码 三、已知【枚举】&#xff0c;获取注释、索引 四、已知【索引】&#xff0c;获取枚举值、注释 五、已知【注释】&#xff0c;获取枚举值、索引 六、创建一个【枚举字典】&#xff0c;key索引&#xff0c;value(枚举值&am…

河道高效治理新策略:视频AI智能监控如何助力河污防治

一、背景与现状 随着城市化进程的加快&#xff0c;河道污染问题日益严重&#xff0c;对生态环境和居民生活造成了严重影响。为了有效治理河道污染&#xff0c;提高河道管理的智能化水平&#xff0c;TSINGSEE青犀提出了一套河污治理视频智能分析及管理方案。方案依托先进的视频…

gitee设置ssh公钥密码避免频繁密码验证

gitee中可以创建私有项目&#xff0c;但是在clone或者push都需要输入密码&#xff0c; 比较繁琐。 公钥则可以解决该问题&#xff0c;将私钥放在本地&#xff0c;公钥放在gitee上&#xff0c;当对项目进行操作时带有的私钥会在gitee和公钥进行验证&#xff0c;避免了手动输入密…

WEB攻防-通用漏洞-SQL 读写注入-MYSQLMSSQLPostgreSQL

什么是高权限注入 高权限注入指的是攻击者通过SQL注入漏洞&#xff0c;利用具有高级权限的数据库账户&#xff08;如MYSQL的root用户、MSSQL的sa用户、PostgreSQL的dba用户&#xff09;执行恶意SQL语句。这些高级权限账户能够访问和修改数据库中的所有数据&#xff0c;甚至执行…

Spring项目中发生log依赖冲突如何解决

异常信息 Caused by: org.apache.logging.log4j.LoggingException: log4j-slf4j-impl cannot be present with log4j-to-slf4分析 根据异常信息分析&#xff0c;可以看出是slf4j的实现有两个依赖&#xff0c;只需要移除log4j-slf4j-impl或log4j-to-slf4j其中一个库的依赖&…

如何合并电脑硬盘分区?轻松合并电脑硬盘分区

在日常使用电脑的过程中&#xff0c;我们有时需要对硬盘进行分区管理。然而&#xff0c;随着时间的推移&#xff0c;我们可能会发现原有的分区设置不再满足需求&#xff0c;这时就需要对分区进行调整&#xff0c;甚至合并分区。那么&#xff0c;我们该如何合并电脑硬盘分区呢&a…

攻坚克难岁月长,自主腾飞世界强——回顾近代中国数据库的发展与飞跃

前言 最近看了《中国数据库前世今生》纪录片&#xff0c;感触颇深&#xff0c;也是一直在思考到底该用何种方式起笔来回顾这段筚路蓝缕却又充满民族自豪感的历程。大概构思了一周左右吧&#xff0c;我想&#xff0c;或许还是应该从那个计算机技术在国内刚刚萌芽的年代开始讲起…

Arthas在线诊断案例实战整理

会一直持续更新。。。 Arthas 是一款线上监控诊断产品&#xff0c;通过全局视角实时查看应用 load、内存、gc、线程的状态信息&#xff0c;并能在不修改应用代码的情况下&#xff0c;对业务问题进行诊断&#xff0c;包括查看方法调用的出入参、异常&#xff0c;监测方法执行耗时…

SAPUI5基础知识19 - 视图嵌套(Nested Views)

1. 背景 SAPUI5 是一个用于构建企业级 Web 应用程序的 JavaScript 框架。它提供了丰富的 UI 控件和工具&#xff0c;帮助开发者创建复杂的用户界面。Nested Views 是 SAPUI5 中的一种设计模式&#xff0c;允许在一个视图中嵌套另一个视图。这种模式有助于模块化和重用代码&…

低代码如何加速数字化转型

数字化转型&#xff0c;正日益决定企业成功的关键。这里的一个关键因素是它可以以更快的速度和质量来实施技术计划。在当今瞬息万变的商业环境中&#xff0c;战略性地采用低代码平台对于旨在加快上市时间、增强业务敏捷性和促进跨团队无缝协作的首席技术官来说至关重要。日益增…

react中组件间的通信

一、父传子 1.代码展示 import React, { useState } from react;function SonPage(props){ // 子组件const {msg} propsreturn (<div>我是子组件 {msg}</div>) }function App() { // 父组件const [msgText,setMsgText] useState(父传子)return (<div classN…

快速入门Jupyter notebook

快速入门 Jupyter notebook 一、前言&#xff08;一&#xff09;优点&#xff08;二&#xff09;特点&#xff08;三&#xff09;调用运行&#xff08;四&#xff09;新建 二、认识界面快捷键&#xff08;一&#xff09;三种模式&#xff08;1&#xff09;蓝色模式&#xff1a;…

【echarts】中如何设置曲线展示最新值、最大值、最小值

需要用到的属性&#xff1a;图表标注 series-line. markPoint 默认可以通过 type直接标注&#xff1a;‘min’ 最小值、‘max’ 最大值、‘average’ 平均值。 markPoint: {data: [{type: max},{type: min}]}如何展示最新值 如果要展示最新值得话&#xff0c;需要设置 标注…

ICMPv6与NDP

ICMP ICMPv6是 IPv6 的基础协议之一。 在 IPv6 报文头部中, Next Header 字段值为 58 则对应为 ICMPv6 报文。 ICMPv6报文用于通告相关信息或错误。 ICMP报文 Type字段:0-127表示差错消息,128-255表示信息消息。 ICMP消息类型 差错消息 差错消息用于报告在转发IPv6数据包过…

如何应对SQL注入攻击?

引言 在现今的网络世界中&#xff0c;安全性已成为至关重要的话题。SQL注入&#xff08;SQL Injection&#xff09;是一种常见且危险的网络攻击方式&#xff0c;攻击者通过向SQL查询中插入恶意代码来操控数据库&#xff0c;从而获取敏感信息或破坏数据。了解SQL注入的各种类型…

案例分析:人工智能在航空航天领域的应用

作者主页: 知孤云出岫 目录 作者主页:案例分析&#xff1a;人工智能在航空航天领域的应用引言人工智能在航空航天中的主要应用案例分析案例一&#xff1a;AI优化航天器设计案例二&#xff1a;AI辅助飞行安全——预测维护案例三&#xff1a;AI自动驾驶系统案例四&#xff1a;A…