|
|
<!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>
|
|
|
.filee
|
|
|
{
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
top: 22%;
|
|
|
left: 6%;
|
|
|
|
|
|
height: 30px; /* 设置高度 */
|
|
|
|
|
|
|
|
|
}
|
|
|
.container {
|
|
|
display: grid; /* 使用 Grid 布局 */
|
|
|
grid-template-columns: repeat(3, 1fr); /* 创建三列 */
|
|
|
gap: 50px; /* 列间距 */
|
|
|
justify-content: center; /* 水平居中 */
|
|
|
align-items: center; /* 垂直居中 */
|
|
|
justify-items: center; /* 水平均匀分布 */
|
|
|
position: absolute; /* 设置为绝对定位 */
|
|
|
top: 3%; /* 从顶部移动 */
|
|
|
left: 50%; /* 从左边移动 */
|
|
|
transform: translateX(-50%); /* 水平居中容器 */
|
|
|
|
|
|
|
|
|
}
|
|
|
.rcontainer {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
top: 30%;
|
|
|
right: 20%;
|
|
|
|
|
|
}
|
|
|
.lcontainer {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
top: 30%;
|
|
|
left: 20%;
|
|
|
|
|
|
}
|
|
|
.notinclass
|
|
|
{
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
border-radius: 15px;
|
|
|
height: 50px;
|
|
|
width: 110px;
|
|
|
font-size: 17px;
|
|
|
bottom: 25%; /* 距离顶部50% */
|
|
|
left: 50%; /* 距离左侧50% */
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
|
}
|
|
|
.topstu {
|
|
|
display: flex; /* 使用 Flexbox */
|
|
|
justify-content: center; /* 水平居中 */
|
|
|
align-items: center; /* 垂直居中 */
|
|
|
width: 150px; /* 圆的宽度 */
|
|
|
height: 150px; /* 圆的高度 */
|
|
|
background-color: #ffffff; /* 圆的背景颜色 */
|
|
|
border-radius: 50%; /* 使其变为圆形 */
|
|
|
color: rgb(0, 0, 0); /* 文本颜色 */
|
|
|
font-size: 20px; /* 文本大小 */
|
|
|
text-align: center; /* 文本居中 */
|
|
|
border: 4px solid #000000;
|
|
|
}
|
|
|
|
|
|
.pickbutton {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
bottom: 12%; /* 距离顶部50% */
|
|
|
left: 50%; /* 距离左侧50% */
|
|
|
transform: translate(-50%, -50%); /* 使按钮中心对齐 */
|
|
|
padding: 25px 40px; /* 增加内边距 */
|
|
|
font-size: 25px; /* 增加字体大小 */
|
|
|
border-radius: 15px;
|
|
|
width: 280px;
|
|
|
height: 80px;
|
|
|
justify-content: center; /* 水平居中 */
|
|
|
|
|
|
}
|
|
|
.rpointbutton
|
|
|
{
|
|
|
|
|
|
width: 120px; /* 设置宽度 */
|
|
|
height: 120px; /* 设置高度，确保与宽度相等 */
|
|
|
border-radius: 50%; /* 圆形 */
|
|
|
font-size: 25px; /* 字体大小 */
|
|
|
|
|
|
|
|
|
}
|
|
|
.lpointbutton
|
|
|
{
|
|
|
width: 120px; /* 设置宽度 */
|
|
|
height: 120px; /* 设置高度，确保与宽度相等 */
|
|
|
border-radius: 50%; /* 圆形 */
|
|
|
font-size: 25px; /* 字体大小 */
|
|
|
|
|
|
}
|
|
|
.small-button {
|
|
|
position: absolute;
|
|
|
width: 50px;
|
|
|
height: 50px;
|
|
|
background-color: #000000;
|
|
|
color: white;
|
|
|
border: none;
|
|
|
border-radius: 50%;
|
|
|
display: flex; /* 使用 flex 布局 */
|
|
|
justify-content: center; /* 水平居中 */
|
|
|
align-items: center; /* 垂直居中 */
|
|
|
opacity: 0; /* 初始隐藏 */
|
|
|
transition: transform 0.5s ease, opacity 0.5s ease;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
|
|
|
|
}
|
|
|
.lsmall-button {
|
|
|
position: absolute;
|
|
|
width: 50px;
|
|
|
height: 50px;
|
|
|
background-color: #000000;
|
|
|
color: white;
|
|
|
border: none;
|
|
|
border-radius: 50%;
|
|
|
display: flex; /* 使用 flex 布局 */
|
|
|
justify-content: center; /* 水平居中 */
|
|
|
align-items: center; /* 垂直居中 */
|
|
|
opacity: 0; /* 初始隐藏 */
|
|
|
transition: transform 0.5s ease, opacity 0.5s ease;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
|
|
|
|
}
|
|
|
.uploadbutton
|
|
|
{
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
top: 10%; /* 距离顶部50% */
|
|
|
left: 10%; /* 距离左侧20px */
|
|
|
width: 100px; /* 设置宽度 */
|
|
|
height: 100px; /* 设置高度，确保与宽度相等 */
|
|
|
border-radius: 50%; /* 圆形 */
|
|
|
font-size: 25px; /* 字体大小 */
|
|
|
}
|
|
|
.pickedstu {
|
|
|
position: absolute; /* 绝对定位 */
|
|
|
top: 40%; /* 距离顶部50% */
|
|
|
left: 50%; /* 距离左侧20px */
|
|
|
width: 350px; /* 圆的宽度 */
|
|
|
height: 350px; /* 圆的高度 */
|
|
|
transform: translate(-50%, -50%);
|
|
|
background-color: #ffffff; /* 圆的背景颜色 */
|
|
|
border-radius: 50%; /* 使其变为圆形 */
|
|
|
display: flex; /* 使用 Flexbox 对齐文本 */
|
|
|
align-items: center; /* 垂直居中 */
|
|
|
justify-content: center; /* 水平居中 */
|
|
|
color: rgb(0, 0, 0); /* 文本颜色 */
|
|
|
font-size: 30px; /* 文本大小 */
|
|
|
text-align: center; /* 文本居中 */
|
|
|
border: 4px solid #000000;
|
|
|
}
|
|
|
body {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
height: 100vh;
|
|
|
overflow: hidden;
|
|
|
background-color: #f0f0f0;
|
|
|
}
|
|
|
input[type="file"] {
|
|
|
margin-bottom: 10px;
|
|
|
padding: 10px;
|
|
|
border: 2px solid #007BFF;
|
|
|
border-radius: 5px;
|
|
|
width: 250px;
|
|
|
}
|
|
|
button {
|
|
|
background-color: #020202;
|
|
|
color: white;
|
|
|
border: none;
|
|
|
padding: 10px 20px;
|
|
|
border-radius: 5px;
|
|
|
cursor: pointer;
|
|
|
margin: 5px;
|
|
|
transition: background-color 0.3s;
|
|
|
}
|
|
|
button:hover {
|
|
|
background-color: #0056b3;
|
|
|
}
|
|
|
#result {
|
|
|
margin-top: 100px;
|
|
|
padding: 10px;
|
|
|
background: white;
|
|
|
border: 1px solid #ddd;
|
|
|
border-radius: 5px;
|
|
|
width: 500px;
|
|
|
text-align: center;
|
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
/* 调整每个小按钮的旋转角度以保持垂直 */
|
|
|
.small-button:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg); }
|
|
|
.small-button:nth-child(2) { transform: translate(-50%, -50%) rotate(60deg); }
|
|
|
.small-button:nth-child(3) { transform: translate(-50%, -50%) rotate(120deg); }
|
|
|
.small-button:nth-child(4) { transform: translate(-50%, -50%) rotate(180deg); }
|
|
|
.small-button:nth-child(5) { transform: translate(-50%, -50%) rotate(240deg); }
|
|
|
.small-button:nth-child(6) { transform: translate(-50%, -50%) rotate(300deg); }
|
|
|
|
|
|
|
|
|
|
|
|
.show .small-button {
|
|
|
opacity: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
.show .lsmall-button {
|
|
|
opacity: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
/* 添加展开效果并使文本保持竖直 */
|
|
|
.show .small-button:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg) translateX(100px); }
|
|
|
.show .small-button:nth-child(2) { transform: translate(-50%, -50%) rotate(60deg) translateX(100px) rotate(-60deg); }
|
|
|
.show .small-button:nth-child(3) { transform: translate(-50%, -50%) rotate(120deg) translateX(100px) rotate(-120deg); }
|
|
|
.show .small-button:nth-child(4) { transform: translate(-50%, -50%) rotate(180deg) translateX(100px) rotate(-180deg); }
|
|
|
.show .small-button:nth-child(5) { transform: translate(-50%, -50%) rotate(240deg) translateX(100px) rotate(-240deg); }
|
|
|
.show .small-button:nth-child(6) { transform: translate(-50%, -50%) rotate(300deg) translateX(100px) rotate(-300deg); }
|
|
|
|
|
|
.image-container {
|
|
|
position: absolute;
|
|
|
top:30%;
|
|
|
right: -400px; /* 从右边开始隐藏 */
|
|
|
transition: transform 2s ease, right 2s ease;
|
|
|
}
|
|
|
|
|
|
img {
|
|
|
width: 330px; /* 设置图片宽度 */
|
|
|
height: auto;
|
|
|
border-radius: 10px; /* 可选：添加圆角 */
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<canvas id="Mycanvas"></canvas>
|
|
|
<div id="app">
|
|
|
|
|
|
<div><button class="uploadbutton" @click="uploadFile">上传名单</button></div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="pickedstu" id="picked"> 被抽中的同学</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div><button class = "notinclass" id="weidaobutton" @click="changepoints(-2);">未到课堂</button></div>
|
|
|
<div><button class="pickbutton" id="dianrenbutton" @click="getRandomStudent">随机点名</button></div>
|
|
|
|
|
|
<div><input type="file" class="filee" id="fileInput" /></div>
|
|
|
|
|
|
|
|
|
<div class="rcontainer">
|
|
|
<button class="rpointbutton" @click="rtoggleButtons">加分</button>
|
|
|
<div class="small-buttons">
|
|
|
<button class="small-button" @click="changepoints(1.5)">1.5</button>
|
|
|
<button class="small-button" @click="changepoints(2.0)">2.0</button>
|
|
|
<button class="small-button" @click="changepoints(2.5)">2.5</button>
|
|
|
<button class="small-button" @click="changepoints(3.0)">3.0</button>
|
|
|
<button class="small-button" @click="changepoints(0.5)">0.5</button>
|
|
|
<button class="small-button" @click="changepoints(1.0)">1.0</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="lcontainer">
|
|
|
<button class="lpointbutton" @click="ltoggleButtons">减分</button>
|
|
|
<div class="lsmall-buttons">
|
|
|
<button class="small-button" @click="changepoints(-1.5)">1.5</button>
|
|
|
<button class="small-button" @click="changepoints(-2.0)">2.0</button>
|
|
|
<button class="small-button" @click="changepoints(-2.5)">2.5</button>
|
|
|
<button class="small-button" @click="changepoints(-3.0)">3.0</button>
|
|
|
<button class="small-button" @click="changepoints(-0.5)">0.5</button>
|
|
|
<button class="small-button" @click="changepoints(-1.0)">1.0</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="image-container">
|
|
|
<img id="image" src="1728391111466.jpg" alt="图片" />
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
caidan=false;
|
|
|
new Vue({
|
|
|
el: '#app',
|
|
|
data: {
|
|
|
top3 :["haha","sdd","eeee"],
|
|
|
caidan:false
|
|
|
},
|
|
|
methods: {
|
|
|
uploadFile() {
|
|
|
|
|
|
|
|
|
uploadFile();
|
|
|
|
|
|
},
|
|
|
getRandomStudent() {
|
|
|
// 调用外部的 getRandomStudent 函数
|
|
|
if(caidan)
|
|
|
{
|
|
|
console.log("显示");
|
|
|
animateImage();
|
|
|
}
|
|
|
getRandomStudent();
|
|
|
|
|
|
},
|
|
|
handleFileUpload(event) {
|
|
|
const file = event.target.files[0];
|
|
|
// 处理文件上传
|
|
|
if (file) {
|
|
|
this.uploadFile();
|
|
|
}
|
|
|
},
|
|
|
|
|
|
rtoggleButtons()
|
|
|
{
|
|
|
smallButtons = document.querySelector('.small-buttons');
|
|
|
smallButtons.classList.toggle('show');
|
|
|
},
|
|
|
ltoggleButtons()
|
|
|
{
|
|
|
smallButtons = document.querySelector('.lsmall-buttons');
|
|
|
smallButtons.classList.toggle('show');
|
|
|
},
|
|
|
|
|
|
changepoints(chan)
|
|
|
{
|
|
|
console.log(chan);
|
|
|
changepoints(chan);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
<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);
|
|
|
}
|
|
|
// 创建一个 URL 对象
|
|
|
const url = window.location.href;
|
|
|
const urlObj = new URL(url);
|
|
|
|
|
|
// 使用 URLSearchParams 获取查询参数
|
|
|
const params = new URLSearchParams(urlObj.search);
|
|
|
|
|
|
// 获取 'number' 参数的值
|
|
|
const kk = params.get('number');
|
|
|
|
|
|
if(kk=="K班")
|
|
|
{
|
|
|
caidan=true;
|
|
|
console.log("彩蛋启动");
|
|
|
document.getElementById('weidaobutton').innerText = `不喝咖啡`;
|
|
|
document.getElementById('dianrenbutton').innerText = `请你喝咖啡`;
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html>
|
