下载

这个下载链接为新教育启耀班及百草园点名系统链接(七天内有效)

启耀班点名系统源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>启耀班点名系统</title>
    <style>
        body {
            background: linear-gradient(135deg, #000000, #ffffff);
            height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: 'Microsoft YaHei', sans-serif;
            overflow: hidden;
        }

        /* 星星效果样式 */
        .stars-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 50vh;
            pointer-events: none;
            z-index: 0;
        }

        .star {
            position: absolute;
            background: white;
            border-radius: 50%;
            animation: twinkle 1.5s infinite ease-in-out;
        }

        @keyframes twinkle {
            0%, 100% { opacity: 0.3; transform: scale(0.8); }
            50% { opacity: 1; transform: scale(1.2); }
        }

        .header {
            color: white;
            font-size: 36px;
            margin: 20px 0;
            text-shadow: 0 0 10px rgba(255,255,255,0.5);
            animation: glow 2s ease-in-out infinite;
            position: relative;
            z-index: 1;
        }

        @keyframes glow {
            0%, 100% { text-shadow: 0 0 10px rgba(255,255,255,0.5); }
            50% { text-shadow: 0 0 20px rgba(255,255,255,0.8); }
        }

        .class-logo {
            width: 200px;
            height: 200px;
            margin: 20px 0;
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(255,255,255,0.3);
            transition: transform 0.5s ease;
            animation: float 3s ease-in-out infinite;
            position: relative;
            z-index: 1;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        #nameDisplay {
            font-size: 48px;
            color: white;
            margin: 40px 0;
            min-height: 60px;
            transition: all 0.3s ease;
            text-shadow: 0 0 15px rgba(255,255,255,0.6);
            position: relative;
            z-index: 1;
        }

        .button {
            padding: 15px 40px;
            font-size: 24px;
            background: linear-gradient(45deg, #2d8b2d, #3cb371);
            color: white;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .button::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, 
                transparent, 
                rgba(255,255,255,0.2),
                transparent);
            transform: rotate(45deg);
            transition: all 0.5s;
        }

        .button:hover::before {
            animation: shine 1.5s;
        }

        @keyframes shine {
            0% { left: -50%; }
            100% { left: 150%; }
        }

        .button:active {
            transform: scale(0.95);
        }
    </style>
</head>
<body>
    <div class="stars-container" id="starsContainer"></div>
    
    <h1 class="header">启耀班点名系统</h1>
    <img src="file:///C:\Users\60919\Desktop\启耀班点名系统\class-logo（1班）.jpg" alt="班徽" class="class-logo">
    <div id="nameDisplay">点击开始点名</div>
    <button class="button" onclick="toggleRollCall()">开始点名</button>

    <script>
        // 创建星星
        function createStars() {
            const container = document.getElementById('starsContainer');
            const starCount = 50;

            for (let i = 0; i < starCount; i++) {
                const star = document.createElement('div');
                star.className = 'star';
                
                // 随机属性
                const size = Math.random() * 3;
                const left = Math.random() * 100;
                const top = Math.random() * 50;
                const delay = Math.random() * 1.5;

                star.style.cssText = `
                    width: ${size}px;
                    height: ${size}px;
                    left: ${left}%;
                    top: ${top}vh;
                    animation-delay: ${delay}s;
                    box-shadow: 0 0 ${size*2}px rgba(255,255,255,0.5);
                `;

                container.appendChild(star);
            }
        }

        // 初始化星星
        window.onload = createStars;

        // 点名系统逻辑
        const students = [
            '马茹梦','吕旭浩','杨依琳','吕宗烨','吕伊珊','吕勇宸','吕宇庭',
            '吕鑫权','黄美琪','白诗雅','杨思琪','林永灿','李昀洲','李铭豪',
            '许梓豪','郑椃','郑皓杰','张昊宇','张昊辰','尤依琳','郑诗琪',
            '陈敏敏','褚安澜','刘水灵','李甄航','钟超炜','钟馨','李嘉琦',
            '曹懿轩','江晨希','陈锦媛','曾睿森','江新帝','郭淏鑫','谢晓问',
            '赖浩晨','郭子敬','肖洁','余建辉','周子茜','刘洋铄','刘锦辉',
            '丘晨雨','林锐东','蒋佳邑','蒋澄浩','周谨','谢诗语','冯慧琳',
            '危昌杰','习传宗','何蓉钦','谢雨蝶'
        ];

        let isRolling = false;
        let intervalId = null;

        function toggleRollCall() {
            const button = document.querySelector('.button');
            const display = document.getElementById('nameDisplay');
            
            if (!isRolling) {
                isRolling = true;
                button.textContent = '停止点名';
                button.style.background = 'linear-gradient(45deg, #e74c3c, #c0392b)';
                
                intervalId = setInterval(() => {
                    const randomIndex = Math.floor(Math.random() * students.length);
                    display.textContent = students[randomIndex];
                    display.style.transform = `scale(${1 + Math.random()*0.2})`;
                }, 50);
                
            } else {
                isRolling = false;
                clearInterval(intervalId);
                button.textContent = '开始点名';
                button.style.background = 'linear-gradient(45deg, #2d8b2d, #3cb371)';
                
                display.style.transform = 'scale(1.2)';
                display.style.color = '#f1c40f';
                setTimeout(() => {
                    display.style.transform = 'scale(1)';
                    display.style.color = 'white';
                }, 500);
            }
        }
    </script>
</body>
</html>

百草园点名系统源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>百草园点名系统</title>
    <style>
        body {
            background: linear-gradient(135deg, #2d8b2d, #ffffff);
            height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: 'Microsoft YaHei', sans-serif;
            overflow: hidden;
        }

        .header {
            color: white;
            font-size: 36px;
            margin: 20px 0;
            text-shadow: 0 0 10px rgba(46,139,46,0.8);
            animation: glow 2s ease-in-out infinite;
        }

        .class-logo {
            width: 200px;
            height: 200px;
            margin: 20px 0;
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(255,255,255,0.3);
            transition: transform 0.5s ease;
            animation: float 3s ease-in-out infinite;
        }

        @keyframes glow {
            0%, 100% { text-shadow: 0 0 10px rgba(46,139,46,0.5); }
            50% { text-shadow: 0 0 20px rgba(182,255,192,0.8); }
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        #nameDisplay {
            font-size: 48px;
            color: white;
            margin: 40px 0;
            min-height: 60px;
            transition: all 0.3s ease;
            text-shadow: 0 0 15px rgba(46,139,46,0.6);
        }

        .button {
            padding: 15px 40px;
            font-size: 24px;
            background: linear-gradient(45deg, #2d8b2d, #3cb371);
            color: white;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .button::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, 
                transparent, 
                rgba(255,255,255,0.2),
                transparent);
            transform: rotate(45deg);
            transition: all 0.5s;
        }

        .button:hover::before {
            animation: shine 1.5s;
        }

        @keyframes shine {
            0% { left: -50%; }
            100% { left: 150%; }
        }

        .button:active {
            transform: scale(0.95);
        }
    </style>
</head>
<body>
    <h1 class="header">百草园点名系统</h1>
    <img src="file:///C:\Users\60919\Desktop\百草园点名系统\class-logo（2班）.jpg" alt="班徽" class="class-logo">
    <div id="nameDisplay">点击开始点名</div>
    <button class="button" onclick="toggleRollCall()">开始点名</button>

    <script>
        const students = [
            '李晶', '陈子一', '谢梓涵', '向睿泽', '张涵菡',
            '王淑蕾', '汤雨露', '陈艺佳', '廖文浩', '罗宇程',
            '周皓丞', '陈嘉涛', '陈欣瑜', '张文兴', '梁悦',
            '崔雅彬', '龙烁杰', '王东俊', '林泽灏', '焦俊杰',
            '曹刚鹏', '林晨暄', '林诗蕊', '郑家诚', '何宇轩',
            '张子研', '余慧雯', '田艺玲', '吕思贤', '杨佳琪',
            '黄子宸', '黄斌亮', '陈楚钶', '周永欣', '吕冰欣',
            '石文助', '邹子睿', '张嘉豪', '钟璐', '许亚如',
            '程子丹', '魏艺研', '孙宇帆', '丘斯扬', '钟星霖',
            '苏玉婷', '苏玉凤', '陈逸宸', '周怡然', '潘伟生',
            '陈孝彬'
        ];

        let isRolling = false;
        let intervalId = null;

        function toggleRollCall() {
            const button = document.querySelector('.button');
            const display = document.getElementById('nameDisplay');
            
            if (!isRolling) {
                isRolling = true;
                button.textContent = '停止点名';
                button.style.background = 'linear-gradient(45deg, #e74c3c, #c0392b)';
                
                intervalId = setInterval(() => {
                    const randomIndex = Math.floor(Math.random() * students.length);
                    display.textContent = students[randomIndex];
                    display.style.transform = `scale(${1 + Math.random()*0.2})`;
                }, 50);
                
            } else {
                isRolling = false;
                clearInterval(intervalId);
                button.textContent = '开始点名';
                button.style.background = 'linear-gradient(45deg, #2d8b2d, #3cb371)';
                
                display.style.transform = 'scale(1.2)';
                display.style.color = '#f1c40f';
                setTimeout(() => {
                    display.style.transform = 'scale(1)';
                    display.style.color = 'white';
                }, 500);
            }
        }
    </script>
</body>
</html>

使用教程

1.右键新建文本文档
2.复制源码，将txt后缀改为html
3.将班徽放置于同一个目录
4.点击启动

启耀班及百草园班徽下载

链接