<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>课堂点名系统</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <script src="script.js"></script> <!-- 引入你的函数文件 --> <style> .joinbutton { position: absolute; /* 设置为绝对定位 */ bottom:30%; /* 从顶部移动 */ left: 50%; /* 从左边移动 */ border-radius: 15px; height: 7%; width: 17%; font-size: 20px; /* 文本大小 */ font-weight: bold; transform: translate(-50%, -50%); } body { font-family: 'Arial', sans-serif; background-color: #f4f4f4; margin: 0; padding: 20px; display: flex; flex-direction: column; height: 90vh; /* 使 body 高度占满视口 */ } h1 { color: #333; position: absolute; /* 设置为绝对定位 */ bottom:60%; left: 50%; /* 从左边移动 */ font-size: 80px; font-weight: bold; transform: translate(-50%, -50%); } input[type="text"] { padding: 10px; border: 2px solid #007BFF; border-radius: 20px; width: 200px; height: 40px; /* 增加高度 */ font-size: 16px; /* 可选:增加字体大小 */ transform: translate(-50%, -50%); position: absolute; /* 设置为绝对定位 */ bottom:40%; left: 50%; /* 从左边移动 */ } button { background-color: #020202; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; margin: 5px; transition: background-color 0.3s; } .modal { position: fixed; z-index: 1; /* 在最上层 */ left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */ } .modal-content { background-color: #fff; margin: 15% auto; padding: 40px; border: 1px solid #888; width: 15%; /* 可以根据需要调整宽度 */ } .horizontal-line { transform: translate(-50%, -50%); position: absolute; /* 设置为绝对定位 */ bottom:60%; /* 从顶部移动 */ left: 50%; /* 从左边移动 */ width: 25%; /* 横线宽度 */ height: 2px; /* 横线高度 */ background-color: black; /* 横线颜色 */ border: none; /* 去掉边框 */ margin: 20px 0; /* 上下外边距 */ } </style> </head> <body> <canvas id="Mycanvas"></canvas> <div id="app"> <h1>课堂点名系统</h1> <div class="horizontal-line"></div> <!-- 使用自定义的横线 --> <div><input type="text" id="roomNumber" placeholder="请输入房间号..." required></div> <div> <button class="joinbutton" @click="tanchuang">加入(创建)房间</button> </div> <!-- 模态框 --> <div class="modal" v-if="isModalVisible"> <div class="modal-content"> <span @click="closeModal" style="cursor:pointer; float:right;">×</span> <div>当前房间号没有被创建是否创建房间</div> <button @click="goToAboutPage" >确认创建房间</button> </div> </div> <!-- 结束模态框 --> </div> </div> <script> new Vue({ el: '#app', data: { isModalVisible:false, isModalVisible2:false, caidan:false }, methods: { goToAboutPage() { createroom(); }, handleFileUpload(event) { // 这里可以添加处理文件上传的逻辑 }, tanchuang() { let aa=0; charoom().then(result => { console.log("获取到的结果:", result); // 输出: 获取到的结果: 数据加载成功 aa=result; const roomNumber = document.getElementById('roomNumber').value; if(roomNumber=="K班") { console.log("彩蛋启动"); this.caidan=true; } if(aa==2) { this.isModalVisible = true; } if(aa==1) { console.log("班级已存在"); setTimeout(() => { window.location.href = `index.html?number=${roomNumber}`; }, 1000); // 等待1秒 } if(this.caidan) { setTimeout(() => { window.location.href = `index.html?number=${roomNumber}`; }, 1000); // 等待1秒 } }) }, uploadFile() { // 调用外部的 uploadFile 函数 uploadFile(); }, closeModal() { this.isModalVisible = false; // 关闭模态框 } } }); </script> </body> <script> // 定义画布宽高和生成点的个数 var WIDTH = window.innerWidth, HEIGHT = window.innerHeight, POINT = 35; var canvas = document.getElementById('Mycanvas'); canvas.width = WIDTH, canvas.height = HEIGHT; var context = canvas.getContext('2d'); context.strokeStyle = 'rgba(0,0,0,0.02)', context.strokeWidth = 1, context.fillStyle = 'rgba(0,0,0,0.05)'; var circleArr = []; // 线条:开始xy坐标,结束xy坐标,线条透明度 function Line (x, y, _x, _y, o) { this.beginX = x, this.beginY = y, this.closeX = _x, this.closeY = _y, this.o = o; } // 点:圆心xy坐标,半径,每帧移动xy的距离 function Circle (x, y, r, moveX, moveY) { this.x = x, this.y = y, this.r = r, this.moveX = moveX, this.moveY = moveY; } // 生成max和min之间的随机数 function num (max, _min) { var min = arguments[1] || 0; return Math.floor(Math.random()*(max-min+1)+min); } // 绘制原点 function drawCricle (cxt, x, y, r, moveX, moveY) { var circle = new Circle(x, y, r, moveX, moveY) cxt.beginPath() cxt.arc(circle.x, circle.y, circle.r, 0, 2*Math.PI) cxt.closePath() cxt.fill(); return circle; } // 绘制线条 function drawLine (cxt, x, y, _x, _y, o) { var line = new Line(x, y, _x, _y, o) cxt.beginPath() cxt.strokeStyle = 'rgba(0,0,0,'+ o +')' cxt.moveTo(line.beginX, line.beginY) cxt.lineTo(line.closeX, line.closeY) cxt.closePath() cxt.stroke(); } // 初始化生成原点 function init () { circleArr = []; for (var i = 0; i < POINT; i++) { circleArr.push(drawCricle(context, num(WIDTH), num(HEIGHT), num(15, 2), num(10, -10)/40, num(10, -10)/40)); } draw(); } // 每帧绘制 function draw () { context.clearRect(0,0,canvas.width, canvas.height); for (var i = 0; i < POINT; i++) { drawCricle(context, circleArr[i].x, circleArr[i].y, circleArr[i].r); } for (var i = 0; i < POINT; i++) { for (var j = 0; j < POINT; j++) { if (i + j < POINT) { var A = Math.abs(circleArr[i+j].x - circleArr[i].x), B = Math.abs(circleArr[i+j].y - circleArr[i].y); var lineLength = Math.sqrt(A*A + B*B); var C = 1/lineLength*7-0.009; var lineOpacity = C > 0.03 ? 0.03 : C; if (lineOpacity > 0) { drawLine(context, circleArr[i].x, circleArr[i].y, circleArr[i+j].x, circleArr[i+j].y, lineOpacity); } } } } } // 调用执行 window.onload = function () { init(); setInterval(function () { for (var i = 0; i < POINT; i++) { var cir = circleArr[i]; cir.x += cir.moveX; cir.y += cir.moveY; if (cir.x > WIDTH) cir.x = 0; else if (cir.x < 0) cir.x = WIDTH; if (cir.y > HEIGHT) cir.y = 0; else if (cir.y < 0) cir.y = HEIGHT; } draw(); }, 16); } </script> </html>