我在教室自习的时候有一个烦恼，就是不知道待会会不会有班级来上课，这就要导致我每次出教室上厕所或接水之前都要看一下下节课距离现在还有多长时间，以保证我出教室的这段时间不会有人来上课，让我的东西占了别的同学的位置。但这种重复性、没意义的操作，很浪费时间，所以我就用程序来实现了。这是我第 1 个用程序来解决自己生活中的问题的案例，所以记录一下。或许几十年后，我成为了头发掉光光的资深程序员，再看到这段代码会感慨万分。另外感谢 GPT老师， 80% 的代码实现都是由 GPT 老师指导
//我的实现思路是把时间赋值给界面中的图像，因为一天有1440分钟，所以整个时间轴长 1440px，剩下的就是把上课的时间段和目前的时间点标出来，然后用 js 函数判断出图像的距离，以得到时间值。这段代码写的其实并不好，首先没有做不同设备和窗口大小的适配，其次有很多重复性的冗长代码。等我有时间再改吧，期末考试将至，我现在还要把作业补完，目前能用就行。有一点说出来不怕大家笑话，这段代码我写了近三天，因为写的时候经常会遇到一些不会的知识点，然后我就去查那个知识点，从那个知识点引申到另外很多知识点，最后查的知识点和我要写的代码没有任何关系，但是我会忍不住想知道那些函数方法是怎么用的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
display: flex;
justify-content: center;
}
.timezho {
position: relative;
display: inline-block;
height: 100px;
width: 1440px;
background-color: rgb(184, 229, 189);
box-sizing: border-box;
}
.timeduan1 {
display: inline-block;
width: 80px;
height: 100px;
background-color: rgb(226, 181, 26);
position: absolute;
left: 510px;
border-left: 1px solid #34a429;
}
.timeduan2 {
display: inline-block;
width: 80px;
height: 100px;
background-color: rgb(226, 181, 26);
position: absolute;
left: 605px;
border-left: 1px solid #34a429;
}
.timeduan3 {
display: inline-block;
width: 80px;
height: 100px;
background-color: rgb(226, 181, 26);
position: absolute;
left: 780px;
border-left: 1px solid #34a429;
}
.timeduan4 {
display: inline-block;
width: 80px;
height: 100px;
background-color: rgb(226, 181, 26);
position: absolute;
left: 875px;
border-left: 1px solid #34a429;
}
.timeduan5 {
display: inline-block;
width: 80px;
height: 100px;
background-color: rgb(226, 181, 26);
position: absolute;
left: 1020px;
border-left: 1px solid #34a429;
}
.timeduan6 {
display: inline-block;
width: 80px;
height: 100px;
background-color: rgb(226, 181, 26);
position: absolute;
left: 1110px;
border-left: 1px solid #34a429;
}
</style>
</head>
<body>
<div class="timezho">
<div class="timeduan1"></div>
<div class="timeduan2"></div>
<div class="timeduan3"></div>
<div class="timeduan4"></div>
<div class="timeduan5"></div>
<div class="timeduan6"></div>
<div class="timeduan7"></div>
</div>
<script>
var timezho = document.querySelector('.timezho');
// 获取timezho宽高
const pageWidth = timezho.offsetWidth;
const pageHeight = timezho.offsetHeight;
// 每隔100像素放一条1px*20px的竖线
for (let i = 0; i < pageWidth; i += 180) {
const line = document.createElement('div');
line.className = line;
line.style.position = 'absolute';
line.style.width = '1px';
line.style.height = '100px';
line.style.backgroundColor = '#000';
line.style.left = i + 179 + 'px';
timezho.appendChild(line);
// 时间线下面的盒子
const box = document.createElement('div');
box.style.position = 'absolute';
box.style.width = '50px';
box.style.height = '30px';
box.style.backgroundColor = 'rgb(184, 229, 189)';
box.style.left = i + 154 + 'px';
box.style.top = '110px';
box.style.borderRadius = '8px';
box.style.display = 'flex';
box.style.justifyContent = 'center';
box.style.alignItems = 'center';
box.innerText = (i / 180 + 1) * 3 + '点'; // 根据索引计算盒子的内容
timezho.appendChild(box);
}
// 现在的时间点(200px竖线)
var minutes = new Date().getHours() * 60 + new Date().getMinutes();
console.log(minutes);
const nowtime = document.createElement('div');
nowtime.style.position = 'absolute';
nowtime.style.width = '1px';
nowtime.style.height = '200px';
nowtime.style.backgroundColor = 'rgb(226, 181, 26)';
nowtime.style.left = minutes + 'px';
timezho.appendChild(nowtime);
//矩形对话框
const rectangle = document.createElement('div');
rectangle.style.position = 'absolute';
rectangle.style.width = '100px';
rectangle.style.height = '60px';
rectangle.style.backgroundColor = 'rgb(226, 181, 26)';
rectangle.style.left = minutes - 50 + 'px';
rectangle.style.top = '220px';
rectangle.style.borderRadius = '10px';
rectangle.style.display = "flex";
rectangle.style.justifyContent = "center";
rectangle.style.alignItems = "center";
timezho.appendChild(rectangle);
//矩形对话框内文字
const text = document.createElement('p');
text.innerHTML = '现在';
text.style.textAlign = 'center';
text.style.fontSize = '20px';
rectangle.appendChild(text);
//获取时间段左边框的位置信息
var box1 = document.querySelector('.timeduan1');
var style = window.getComputedStyle(box1);
var leftValue = parseInt(style.borderLeftWidth);
var rect = box1.getBoundingClientRect();
var leftPos = rect.left + leftValue;
console.log("边框线位置：左：" + leftPos + "px");
var box2 = document.querySelector('.timeduan2');
var style = window.getComputedStyle(box2);
var leftValue = parseInt(style.borderLeftWidth);
var rect = box2.getBoundingClientRect();
var leftPos = rect.left + leftValue;
console.log("边框线位置：左：" + leftPos + "px");
var box3 = document.querySelector('.timeduan3');
var style = window.getComputedStyle(box3);
var leftValue = parseInt(style.borderLeftWidth);
var rect = box3.getBoundingClientRect();
var leftPos = rect.left + leftValue;
console.log("边框线位置：左：" + leftPos + "px");
var box4 = document.querySelector('.timeduan4');
var style = window.getComputedStyle(box4);
var leftValue = parseInt(style.borderLeftWidth);
var rect = box4.getBoundingClientRect();
var leftPos = rect.left + leftValue;
console.log("边框线位置：左：" + leftPos + "px");
var box5 = document.querySelector('.timeduan5');
var style = window.getComputedStyle(box5);
var leftValue = parseInt(style.borderLeftWidth);
var rect = box5.getBoundingClientRect();
var leftPos = rect.left + leftValue;
console.log("边框线位置：左：" + leftPos + "px");
var box6 = document.querySelector('.timeduan6');
var style = window.getComputedStyle(box6);
var leftValue = parseInt(style.borderLeftWidth);
var rect = box6.getBoundingClientRect();
var leftPos = rect.left + leftValue;
console.log("边框线位置：左：" + leftPos + "px");
//获取现在的时间点距离左侧长度
var box7 = document.querySelector('.timeduan6');
var style = window.getComputedStyle(box7);
var leftValue = parseInt(style.borderLeftWidth);
var rect = box7.getBoundingClientRect();
var leftPos = rect.left + leftValue;
console.log("边框线位置：左：" + leftPos + "px");
// 判断哪个线在中间线右侧
var rightLines = [box1, box2, box3, box4, box5, box6, box7].filter(function (line) {
return line.offsetLeft > nowtime.offsetLeft;
});
// 找到最近的线
var distance = null;
rightLines.forEach(function (line) {
var newDistance = line.offsetLeft - nowtime.offsetLeft;
if (distance === null || newDistance < distance) {
distance = newDistance;
}
});
// 输出距离
console.log(distance + "px");
function formatMinutes(minutes) {
if (minutes < 60) {
return minutes + "分钟";
} else {
var hours = Math.floor(minutes / 60);
var remainingMinutes = minutes % 60;
return hours + "小时" + remainingMinutes + "分钟";
}
}
//时间提示框
// 创建一个 div 元素
var tishi = document.createElement("div");
// 设置盒子的样式
tishi.style.position = 'absolute';
tishi.style.width = "600px";
tishi.style.height = "100px";
tishi.style.backgroundColor = "rgb(250, 219, 118)";
tishi.style.top = '500px';
tishi.style.left = '500px';
tishi.style.borderRadius = '40px';
tishi.style.display = "flex";
tishi.style.justifyContent = "center";
tishi.style.alignItems = "center";
tishi.style.fontSize = "20px";
if (formatMinutes(distance) == 'null分钟') {
texttishi = document.createTextNode('后面没课啦，放心走吧');
} else {
texttishi = document.createTextNode('距离下次上课时间还有' + formatMinutes(distance));
}
// 在盒子中放入文本
tishi.appendChild(texttishi);
// 将盒子添加到文档中
document.body.appendChild(tishi);
</script>
</body>
</html>
1917
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
