「乱搞」从零搭建一个查询值日生的静态网站
写在前面
成果展示：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>
写在最后
大哥哥已经是大学生了是吗？！想必生活一定能自理了吧！
哈哈。
作者@Luckyblock，转载请声明出处。
