「乱搞」从零搭建一个查询值日生的静态网站

写在前面

成果展示：https://luckyblock233.github.io/。
github 仓库：https://github.com/Luckyblock233/Luckyblock233.github.io。

起因：舍友都是懒狗，逼我用这么赛博朋克的方式催值日。

以下你将看到：基于 github 托管的静态网站，学了不到两个小时的前端，写的稀烂的代码，至少能用的网站，略显曲折的心路历程。
如果您准备详细而系统地学习前端：太好了，您可以直接关闭这篇稀烂的文章，并顺手点一个踩。
如果您只是想稍微实现一点类似这样的小功能，那您可以继续看下去…

创建一个 github 的个人博客

推荐看这篇：📡使用Github做一个完全免费的个人网站(步骤很细) - 知乎

按照这篇做完之后，为了省事，我们将直接在 index.html 上完成我们的功能。

学习一点点前端知识

建议阅读：HTML 教程 _ 菜鸟教程 与 JavaScript 教程 _ 菜鸟教程。

为什么不学 CSS？因为懒。

设计思路

和绝大多数宿舍相同，作者的宿舍实行轮替的值日生制度，不过是每个人干两天然后换下一个人，从制度确立的那一天起开始运作。然后就可以想到一个异常简单的算法：

  • 求当前日期与开始日期之间天数之差。
  • 天数之差模 8，按照余数输出值日生即可。

核心算法搞定了，之后只需要解决一些小……小问题就行了……吧……

大致框架

随便写写就行。

复制复制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
  //可自定义内容：
  names = new Array("瘟疫", "战争", "饥荒", "死亡"); //下标从零开始。
  StartDate = '2022-10-09'; //日期格式：YYYY-MM-DD
  function Calc() { //计算值日生的算法，参数为开始日期到当前日期的天数：
    var mod = undefined;//......
    return names[mod];
  }
 
  function GetDate() {
    //......
  }
  
  function getDateBetWeen(startDate, endDate) { 
    var result = 0;
    //......
    return result;
  }
 
</script>
</head>
 
<body>
  <center>
    <h1>今天的值日生是：</h1>
    <script>
      document.write(Calc()));
    </script>
  </center>  
</body>
</html>

如何实现日期计算

JS 提供了 Date() 函数能够获取当前日期，但我们没法它的返回类型进行直接处理，于是我去网上抄了一篇并自己瞎几把改了一下：JS - 获取开始日期和结束日期之间的时间段 - 简书。

原理似乎是先将日期中的年月日取出，转换成标准形式的日期表示后扔进字符串，再将两个字符串表示的时间转换成毫秒的形式，再计算差了几天……

函数好吓人，我跑了。

StartDate = '2022-10-09'; //日期格式：YYYY-MM-DD
  
function GetDate() {
  var date = new Date();
  var str = "";
  var month = date.getMonth() + 1;
  var day = date.getDate();
  str += date.getFullYear().toString() + "-";
  str += month.toString().padStart(2, '0') + "-";
  str += day.toString().padStart(2, '0');
  return str;
}
  
function getDateBetWeen(startDate, endDate) { 
  var startList = startDate.split('-'),
  endList = endDate.split('-'),
  date1 = new Date(),
  date2 = new Date(),
  date1Time,
  date2Time,
  result = 0;
  date1.setUTCFullYear(startList[0], startList[1] - 1, startList[2]);
  date2.setUTCFullYear(endList[0], endList[1] - 1, endList[2]);
  date1Time = date1.getTime();
  date2Time = date2.getTime(); 
  for(var time = date1Time; time < date2Time;){
    result = result + 1;
    time = time + 24 * 60 * 60 * 1000;
  }
  return result;
}

最终代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
  //可自定义内容：
  names = new Array("瘟疫", "战争", "饥荒", "死亡"); //下标从零开始。
  StartDate = '2022-10-09'; //日期格式：YYYY-MM-DD
  function Calc() { //计算值日生的算法，参数为开始日期到当前日期的天数：
    mod = Math.floor((getDateBetWeen(StartDate, GetDate()) % 8) / 2);
    return names[mod];
  }
 
  function GetDate() {
    var date = new Date();
    var str = "";
    var month = date.getMonth() + 1;
    var day = date.getDate();
    str += date.getFullYear().toString() + "-";
    str += month.toString().padStart(2, '0') + "-";
    str += day.toString().padStart(2, '0');
    return str;
  }
  
  function getDateBetWeen(startDate, endDate) { 
    var startList = startDate.split('-'),
    endList = endDate.split('-'),
    date1 = new Date(),
    date2 = new Date(),
    date1Time,
    date2Time,
    result = 0;
    date1.setUTCFullYear(startList[0], startList[1] - 1, startList[2]);
    date2.setUTCFullYear(endList[0], endList[1] - 1, endList[2]);
    date1Time = date1.getTime();
    date2Time = date2.getTime(); 
    for(var time = date1Time; time < date2Time;){
      result = result + 1;
      time = time + 24 * 60 * 60 * 1000;
    }
    return result;
  }
 
</script>
</head>
 
<body>
  <center>
    <h1>今天的值日生是：</h1>
    <script>
      document.write(Calc());
    </script>
  </center>  
</body>
</html>

加点装饰

按照个人喜好加了点小装饰还有一点碎碎念，自定义的部分放在了 <head> 的开头。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
  //可自定义内容：
  names = new Array("瘟疫", "战争", "饥荒", "死亡"); //下标从零开始。
  StartDate = '2022-10-09'; //日期格式：YYYY-MM-DD
  function Calc() { //计算值日生的算法，参数为开始日期到当前日期的天数：
    var days = getDateBetWeen(StartDate, GetDate()), 
        mod = Math.floor(days % 8 / 2);
    return names[mod];
  }
  function GetDetails() { //用来写一些碎碎念的地方，懒得再学了，所以用了非常弱智的方法实现，给出了三行的空间。
    document.getElementById("Details1").innerHTML = "采用的算法大致如下所示：";
    document.getElementById("Details2").innerHTML = "计算当前天数与 2022-10-09 的天数差，天数差对 8 取余，按照取余结果分配值日生。如余数为 0、1 则瘟疫，2、3 则战争，4、5 则饥荒……以此类推。";
    document.getElementById("Details3").innerHTML = "本来想做一个能够按照所需跳过假期回家值日计算的程序的，然而买不起服务器，没法上传假期时间……就先这样用着罢";
  }
 
  function GetDate() {
    var date = new Date();
    var str = "";
    var month = date.getMonth() + 1;
    var day = date.getDate();
    str += date.getFullYear().toString() + "-";
    str += month.toString().padStart(2, '0') + "-";
    str += day.toString().padStart(2, '0');
    return str;
  }
  
  function getDateBetWeen(startDate, endDate) { 
    var startList = startDate.split('-'),
    endList = endDate.split('-'),
    date1 = new Date(),
    date2 = new Date(),
    date1Time,
    date2Time,
    result = 0;
    date1.setUTCFullYear(startList[0], startList[1] - 1, startList[2]);
    date2.setUTCFullYear(endList[0], endList[1] - 1, endList[2]);
    date1Time = date1.getTime();
    date2Time = date2.getTime(); 
    for(var time = date1Time; time < date2Time;){
      result = result + 1;
      time = time + 24 * 60 * 60 * 1000;
    }
    return result;
  }
 
  function GetName() {
    var truename = Calc();
    document.getElementById("MyButtom").innerHTML = truename;
 
    document.getElementById("MyImage").width="250";
    document.getElementById("MyImage").height="270";
    document.getElementById("MyImage").src = "https://pic1.imgdb.cn/item/634252d116f2c2beb12c4d9f.jpg";
  }
</script>
</head>
 
<body>
  <center>
    <h1>今天的值日生</h1>
    <p>会是谁呢？？？</p>
    <p id = "MyButtom"> <button type="button" onclick = "GetName()"> 一键查询！！</button> </p>
    <p><img id = "MyImage"
         src="https://pic1.imgdb.cn/item/634252d116f2c2beb12c4da4.jpg" 
         alt="Happiness...but temporary"></p>
    <p id = "Details1"> <button type = "button" onclick = "GetDetails()"> 展开说明 </button> </p>
    <p id = "Details2"> </p>
    <p id = "Details3"> </p>
  </center>  
</body>
</html>

写在最后

大哥哥已经是大学生了是吗？！想必生活一定能自理了吧！

哈哈。

posted @   Luckyblock  阅读(440)  评论(9)  编辑  收藏  举报
相关博文：
·  「乱搞」委员长也能轻松掌握！使用 Hugo 搭建个人网站并发布到 GitHub Pages 指南！
·  「杂文」应用基础实践一（网络+Java）实验报告
·  使用Github做一个完全免费的个人网站(步骤很细)
·  github/gitee个人博客到底是什么一个运行原理？
·  用 VuePress + GitHub Pages 零成本、零代码搭建个人网站
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】
点击右上角即可分享
微信分享提示
AI IDE Trae