parent
3a3ce3a8db
commit
c4f7881667
@ -0,0 +1,23 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
@ -0,0 +1,70 @@
|
||||
# Getting Started with Create React App
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
||||
|
||||
## Available Scripts
|
||||
|
||||
In the project directory, you can run:
|
||||
|
||||
### `npm start`
|
||||
|
||||
Runs the app in the development mode.\
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
||||
|
||||
The page will reload when you make changes.\
|
||||
You may also see any lint errors in the console.
|
||||
|
||||
### `npm test`
|
||||
|
||||
Launches the test runner in the interactive watch mode.\
|
||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
||||
|
||||
### `npm run build`
|
||||
|
||||
Builds the app for production to the `build` folder.\
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.\
|
||||
Your app is ready to be deployed!
|
||||
|
||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
||||
|
||||
### `npm run eject`
|
||||
|
||||
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
||||
|
||||
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
||||
|
||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
||||
|
||||
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
||||
|
||||
## Learn More
|
||||
|
||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
||||
|
||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
||||
|
||||
### Code Splitting
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
||||
|
||||
### Analyzing the Bundle Size
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
||||
|
||||
### Making a Progressive Web App
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
||||
|
||||
### Advanced Configuration
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
||||
|
||||
### Deployment
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
||||
|
||||
### `npm run build` fails to minify
|
||||
|
||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
||||
@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
background-image: linear-gradient(200deg, #fa2ec7, #d1ef7e);
|
||||
}
|
||||
|
||||
.box {
|
||||
margin: auto;
|
||||
width: 1000px;
|
||||
height: 700px;
|
||||
border: #fff 4px solid;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 80px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box">
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,38 @@
|
||||
{
|
||||
"name": "your-project",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^5.17.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
@ -0,0 +1,25 @@
|
||||
{
|
||||
"short_name": "React App",
|
||||
"name": "Create React App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
@ -0,0 +1,38 @@
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
test('renders learn react link', () => {
|
||||
render(<App />);
|
||||
const linkElement = screen.getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
@ -0,0 +1,27 @@
|
||||
// components/RandomSelector.js
|
||||
import React from 'react';
|
||||
|
||||
const RandomSelector = ({ students, onSelect = () => { } }) => {
|
||||
const selectRandomStudent = () => {
|
||||
if (students.length === 0) return;
|
||||
|
||||
const randomIndex = Math.floor(Math.random() * students.length);
|
||||
const selectedStudent = students[randomIndex];
|
||||
|
||||
// 确保 onSelect 是一个函数
|
||||
if (typeof onSelect === 'function') {
|
||||
onSelect(selectedStudent);
|
||||
} else {
|
||||
console.error('onSelect is not a function');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button onClick={selectRandomStudent}>选择随机学生</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RandomSelector;
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
|
||||
const StudentList = ({ students }) => {
|
||||
return (
|
||||
<ul>
|
||||
{students.map((student) => (
|
||||
<li key={student.studentId}>
|
||||
{student.name} (ID: {student.studentId}, Points: {student.points})
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
};
|
||||
|
||||
export default StudentList;
|
||||
@ -0,0 +1,102 @@
|
||||
[
|
||||
{
|
||||
"name": "张三",
|
||||
"studentId": "001",
|
||||
"points": 0
|
||||
},
|
||||
{
|
||||
"name": "李四",
|
||||
"studentId": "002",
|
||||
"points": 0
|
||||
},
|
||||
{
|
||||
"name": "王五",
|
||||
"studentId": "003",
|
||||
"points": 0
|
||||
},
|
||||
{
|
||||
"name": "赵六",
|
||||
"studentId": "004",
|
||||
"points": 0
|
||||
},
|
||||
{
|
||||
"name": "钱七",
|
||||
"studentId": "005",
|
||||
"points": 0
|
||||
},
|
||||
{
|
||||
"name": "孙八",
|
||||
"studentId": "006",
|
||||
"points": 0
|
||||
},
|
||||
{
|
||||
"name": "周九",
|
||||
"studentId": "007",
|
||||
"points": 0
|
||||
},
|
||||
{
|
||||
"name": "吴十",
|
||||
"studentId": "008",
|
||||
"points": 0
|
||||
},
|
||||
{
|
||||
"name": "郑十一",
|
||||
"studentId": "009",
|
||||
"points": 0
|
||||
},
|
||||
{
|
||||
"name": "冯十二",
|
||||
"studentId": "010",
|
||||
"points": 0
|
||||
},
|
||||
{
|
||||
"name": "陈十三",
|
||||
"studentId": "011",
|
||||
"points": 0
|
||||
},
|
||||
{
|
||||
"name": "褚十四",
|
||||
"studentId": "012",
|
||||
"points": 0
|
||||
},
|
||||
{
|
||||
"name": "卫十五",
|
||||
"studentId": "013",
|
||||
"points": 0
|
||||
},
|
||||
{
|
||||
"name": "蒋十六",
|
||||
"studentId": "014",
|
||||
"points": 0
|
||||
},
|
||||
{
|
||||
"name": "沈十七",
|
||||
"studentId": "015",
|
||||
"points": 0
|
||||
},
|
||||
{
|
||||
"name": "韩十八",
|
||||
"studentId": "016",
|
||||
"points": 0
|
||||
},
|
||||
{
|
||||
"name": "杨十九",
|
||||
"studentId": "017",
|
||||
"points": 0
|
||||
},
|
||||
{
|
||||
"name": "朱二十",
|
||||
"studentId": "018",
|
||||
"points": 0
|
||||
},
|
||||
{
|
||||
"name": "秦二十一",
|
||||
"studentId": "019",
|
||||
"points": 0
|
||||
},
|
||||
{
|
||||
"name": "尤二十二",
|
||||
"studentId": "020",
|
||||
"points": 0
|
||||
}
|
||||
]
|
||||
Binary file not shown.
@ -0,0 +1,49 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
background-image: linear-gradient(200deg, #fa2ec7, #d1ef7e);
|
||||
}
|
||||
|
||||
.box {
|
||||
margin: auto;
|
||||
width: 1000px;
|
||||
height: 700px;
|
||||
border: #fff 4px solid;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 80px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.box span,
|
||||
.uname {
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.box .uname {
|
||||
color: #fff;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.box button {
|
||||
box-shadow: inset 13px 13px 26px #b6e1f1,
|
||||
inset -13px -13px 26px #43b1da;
|
||||
;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
border: #fff 4px solid;
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
border-radius: 20px;
|
||||
margin: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@ -0,0 +1,29 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
background-image: linear-gradient(200deg, #fa2ec7, #d1ef7e);
|
||||
flex-direction: column;
|
||||
/* 垂直排列 */
|
||||
justify-content: center;
|
||||
/* 垂直居中 */
|
||||
align-items: center;
|
||||
/* 水平居中 */
|
||||
}
|
||||
|
||||
|
||||
.box {
|
||||
margin: auto;
|
||||
width: 1000px;
|
||||
height: 700px;
|
||||
border: #fff 4px solid;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 80px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
@ -0,0 +1,50 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.box {
|
||||
margin: auto;
|
||||
width: 1000px;
|
||||
height: 700px;
|
||||
border: #fff 4px solid;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 80px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
/* 添加Flexbox布局 */
|
||||
flex-direction: column;
|
||||
/* 垂直排列子元素 */
|
||||
justify-content: center;
|
||||
/* 垂直居中 */
|
||||
align-items: center;
|
||||
/* 水平居中 */
|
||||
}
|
||||
|
||||
.button1 {
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
box-shadow: inset 13px 13px 26px #e7efd7,
|
||||
inset -13px -13px 26px #43b1da;
|
||||
font-size: 20px;
|
||||
margin-top: 20px;
|
||||
/* 增加按钮与文本之间的间距 */
|
||||
}
|
||||
|
||||
.button1:hover {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
.hello {
|
||||
font-size: 100px;
|
||||
color: #ffffff;
|
||||
font-family: Cursive;
|
||||
}
|
||||
@ -0,0 +1,112 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
background-image: linear-gradient(200deg, #fa2ec7, #d1ef7e);
|
||||
justify-content: center;
|
||||
/* 使内容水平居中 */
|
||||
align-items: center;
|
||||
/* 使内容垂直居中 */
|
||||
}
|
||||
|
||||
.box {
|
||||
margin: auto;
|
||||
width: 1000px;
|
||||
height: 700px;
|
||||
border: #fff 4px solid;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 80px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
/* 调整文字颜色 */
|
||||
}
|
||||
|
||||
table {
|
||||
width: 90%;
|
||||
border-collapse: collapse;
|
||||
/* 合并边框 */
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
/* 左对齐文本 */
|
||||
font-size: 18px;
|
||||
/* 字体大小 */
|
||||
}
|
||||
|
||||
th {
|
||||
width: 30%;
|
||||
/* 调整表头宽度 */
|
||||
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
width: 100%;
|
||||
/* 输入框占满整个单元格 */
|
||||
padding: 8px;
|
||||
/* 内边距 */
|
||||
font-size: 16px;
|
||||
/* 输入框字体大小 */
|
||||
border: 1px solid #ccc;
|
||||
/* 边框样式 */
|
||||
border-radius: 4px;
|
||||
/* 圆角边框 */
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="password"]:focus {
|
||||
border-color: #007bff;
|
||||
/* 聚焦时边框颜色 */
|
||||
outline: none;
|
||||
/* 去掉轮廓 */
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
margin-top: 20px;
|
||||
/* 上方间距 */
|
||||
padding: 10px 20px;
|
||||
/* 内边距 */
|
||||
font-size: 18px;
|
||||
/* 字体大小 */
|
||||
color: white;
|
||||
/* 字体颜色 */
|
||||
background-color: #007bff;
|
||||
/* 背景颜色 */
|
||||
border: none;
|
||||
/* 无边框 */
|
||||
border-radius: 5px;
|
||||
/* 圆角 */
|
||||
cursor: pointer;
|
||||
/* 鼠标指针变为手型 */
|
||||
transition: background-color 0.3s, transform 0.2s;
|
||||
/* 动画效果 */
|
||||
}
|
||||
|
||||
input[type="submit"]:hover {
|
||||
background-color: #0056b3;
|
||||
/* 悬停时背景颜色 */
|
||||
transform: scale(1.05);
|
||||
/* 悬停时放大 */
|
||||
}
|
||||
|
||||
input[type="submit"]:active {
|
||||
transform: scale(0.95);
|
||||
/* 点击时缩小 */
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 30px;
|
||||
margin-left: 30px;
|
||||
font-size: 28px;
|
||||
font-family:Fantasy;
|
||||
text-align: left;
|
||||
}
|
||||
@ -0,0 +1,63 @@
|
||||
.button1 {
|
||||
display: none;
|
||||
/* 初始隐藏按钮 */
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
box-shadow: inset 13px 13px 26px #e7efd7,
|
||||
inset -13px -13px 26px #43b1da;
|
||||
font-size: 20px;
|
||||
margin-top: 200px;
|
||||
/* 增加按钮与文本之间的间距 */
|
||||
transition: background-color 0.3s;
|
||||
/* 动画效果 */
|
||||
margin-left: 430px
|
||||
}
|
||||
|
||||
.button1:hover {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
|
||||
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
/* 隐藏默认文件输入 */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
/* 内边距 */
|
||||
background-color: #007bff;
|
||||
/* 按钮颜色 */
|
||||
color: white;
|
||||
/* 字体颜色 */
|
||||
border-radius: 5px;
|
||||
/* 圆角 */
|
||||
cursor: pointer;
|
||||
/* 鼠标指针变为手型 */
|
||||
transition: background-color 0.3s;
|
||||
/* 动画效果 */
|
||||
margin-bottom: 20px;
|
||||
margin-top: 150px;
|
||||
}
|
||||
|
||||
label:hover {
|
||||
background-color: #0056b3;
|
||||
/* 悬停时更深的颜色 */
|
||||
}
|
||||
|
||||
#output {
|
||||
margin-top: 15px;
|
||||
/* 文件选择后输出的位置 */
|
||||
font-size: 16px;
|
||||
/* 输出字体大小 */
|
||||
color: #333;
|
||||
/* 输出文字颜色 */
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
.button1 {
|
||||
padding: 40px 100px;
|
||||
font-size: 60px;
|
||||
color: rgb(0, 0, 0);
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
box-shadow: inset 13px 13px 26px #e7efd7,
|
||||
inset -13px -13px 26px #43b1da;
|
||||
font-size: 20px;
|
||||
margin-top: 150px;
|
||||
/* 增加按钮与文本之间的间距 */
|
||||
transition: background-color 0.3s;
|
||||
/* 动画效果 */
|
||||
|
||||
}
|
||||
|
||||
.button1:hover {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,21 @@
|
||||
.button1 {
|
||||
padding: 40px 80px;
|
||||
font-size: 60px;
|
||||
color: rgb(104, 3, 79);
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
box-shadow: inset 13px 13px 26px #f87e68,
|
||||
inset -13px -13px 26px #d4f986;
|
||||
font-size: 20px;
|
||||
margin-top: 70px;
|
||||
/* 增加按钮与文本之间的间距 */
|
||||
transition: background-color 0.3s;
|
||||
/* 动画效果 */
|
||||
font-weight:600
|
||||
|
||||
}
|
||||
|
||||
.button1:hover {
|
||||
background-color: rgb(241, 126, 12);
|
||||
}
|
||||
@ -0,0 +1,108 @@
|
||||
.box1 {
|
||||
margin: auto;
|
||||
width: 850px;
|
||||
height: 70px;
|
||||
border: #fff 4px solid;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 80px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
margin: auto;
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
border: #fff 4px solid;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 40px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: rgb(192, 76, 58);
|
||||
font-size: 22px;
|
||||
margin-top: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.box span,
|
||||
.uname {
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.box .uname {
|
||||
color: #fff;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.box button {
|
||||
box-shadow: inset 13px 13px 26px #b6e1f1,
|
||||
inset -13px -13px 26px #43b1da;
|
||||
;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
border: #fff 4px solid;
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
border-radius: 20px;
|
||||
margin: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#return {
|
||||
width: 150px;
|
||||
|
||||
}
|
||||
|
||||
a {
|
||||
color:#fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
/* 隐藏元素 */
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
/* 隐藏默认文件输入 */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
/* 内边距 */
|
||||
background-color: #007bff;
|
||||
/* 按钮颜色 */
|
||||
color: white;
|
||||
/* 字体颜色 */
|
||||
border-radius: 5px;
|
||||
/* 圆角 */
|
||||
cursor: pointer;
|
||||
/* 鼠标指针变为手型 */
|
||||
transition: background-color 0.3s;
|
||||
/* 动画效果 */
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
label:hover {
|
||||
background-color: #0056b3;
|
||||
/* 悬停时更深的颜色 */
|
||||
}
|
||||
|
||||
#output {
|
||||
margin-top: 15px;
|
||||
/* 文件选择后输出的位置 */
|
||||
font-size: 16px;
|
||||
/* 输出字体大小 */
|
||||
color: #333;
|
||||
/* 输出文字颜色 */
|
||||
}
|
||||
@ -0,0 +1,75 @@
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #6a6969;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 12px;
|
||||
background-color: #7eb9f5;
|
||||
color: white;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pagination button {
|
||||
background-color: #7eb9f5;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
margin: 0 5px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.pagination button:hover {
|
||||
background-color: #7eb9f5;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.search-container input {
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin-right: 10px;
|
||||
width: 200px;
|
||||
/* 搜索框宽度 */
|
||||
}
|
||||
|
||||
.search-container button {
|
||||
padding: 10px 15px;
|
||||
background-color: #7eb9f5;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-container button:hover {
|
||||
background-color: #7eb9f5;
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
// to log results (for example: reportWebVitals(console.log))
|
||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
||||
reportWebVitals();
|
||||
@ -0,0 +1,54 @@
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
fileInput.addEventListener('change', (event) => {
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
// 读取文件并处理内容
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const data = new Uint8Array(e.target.result);
|
||||
const workbook = XLSX.read(data, { type: 'array' });
|
||||
const firstSheetName = workbook.SheetNames[0];
|
||||
const worksheet = workbook.Sheets[firstSheetName];
|
||||
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
|
||||
names.length = 0; // 清空当前 names 数组
|
||||
jsonData.forEach(row => {
|
||||
if (row[0]) {
|
||||
names.push(row[0]);
|
||||
}
|
||||
});
|
||||
console.log(names); // 查看导入的名字
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
|
||||
// 显示文件名和按钮
|
||||
handleFileSelect(event);
|
||||
});
|
||||
|
||||
function handleFileSelect(event) {
|
||||
const fileName = event.target.files[0].name; // 获取文件名
|
||||
document.getElementById('output').textContent = `选择的文件: ${fileName}`; // 更新输出文本
|
||||
|
||||
// 显示进入点名按钮
|
||||
document.getElementById('enterButton').style.display = 'block';
|
||||
|
||||
// 上传文件到后台
|
||||
uploadFile(event.target.files[0]);
|
||||
}
|
||||
|
||||
function uploadFile(file) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file); // 将文件添加到 FormData 对象
|
||||
|
||||
fetch('/upload', { // 假设后台路由是 /upload
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log('Success:', data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
function submitForm(event) {
|
||||
event.preventDefault(); // 阻止默认提交
|
||||
|
||||
const formData = new FormData(event.target);
|
||||
|
||||
// 发送数据到后台
|
||||
fetch('server-endpoint.php', { // 后台处理 URL,替换成我们的
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
return response.text(); // 或用 response.json()，视返回格式而定
|
||||
}
|
||||
throw new Error('Network response was not ok.');
|
||||
})
|
||||
.then(data => {
|
||||
console.log('Success:', data);
|
||||
window.location.href = "../view/main.html"; // 跳转到下一个页面
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,57 @@
|
||||
const names = []
|
||||
|
||||
//获取元素
|
||||
const start = document.querySelector('.start')
|
||||
const stopEnd = document.querySelector('.stop')
|
||||
const uname = document.querySelector('.uname')
|
||||
//定时器的全局变量
|
||||
let timeId = 0
|
||||
//随机数全局变量
|
||||
let random = 0
|
||||
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
fileInput.addEventListener('change', (event) => {
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const data = new Uint8Array(e.target.result);
|
||||
const workbook = XLSX.read(data, { type: 'array' });
|
||||
const firstSheetName = workbook.SheetNames[0];
|
||||
const worksheet = workbook.Sheets[firstSheetName];
|
||||
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
|
||||
names.length = 0; // 清空当前 names 数组
|
||||
jsonData.forEach(row => {
|
||||
if (row[0]) {
|
||||
names.push(row[0]);
|
||||
}
|
||||
});
|
||||
console.log(names); // 查看导入的名字
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
});
|
||||
|
||||
//开始
|
||||
start.addEventListener('click', function () {
|
||||
|
||||
timeId = setInterval(function () {
|
||||
//随机变量
|
||||
random = parseInt(Math.random() * names.length)
|
||||
//添加名字
|
||||
uname.innerHTML = names[random]
|
||||
//抽完名字禁止按钮
|
||||
if (names.length === 1) {
|
||||
start.disabled = stopEnd.disabled = true
|
||||
}
|
||||
}, 100)
|
||||
})
|
||||
//结束
|
||||
stopEnd.addEventListener('click', function () {
|
||||
//结束定时器
|
||||
clearInterval(timeId)
|
||||
//删除已经抽取的
|
||||
names.splice(random, 1)
|
||||
console.log(names);
|
||||
|
||||
})
|
||||
@ -0,0 +1,71 @@
|
||||
let students = []; // 用于存储学生名单
|
||||
let currentIndex = 0; // 当前选择的学生索引
|
||||
let interval; // 定义定时器
|
||||
|
||||
// 点击开始按钮
|
||||
document.querySelector('.start').addEventListener('click', async () => {
|
||||
// 从后端获取学生列表
|
||||
const response = await fetch('url');
|
||||
if (!response.ok) {
|
||||
alert('无法获取学生名单！');
|
||||
return;
|
||||
}
|
||||
students = await response.json();
|
||||
|
||||
if (students.length === 0) {
|
||||
alert('学生名单为空！');
|
||||
return;
|
||||
}
|
||||
|
||||
currentIndex = 0; // 重置索引
|
||||
document.querySelector('.uname').innerText = ''; // 清空显示姓名
|
||||
|
||||
// 开始循环点名
|
||||
interval = setInterval(() => {
|
||||
if (currentIndex >= students.length) {
|
||||
clearInterval(interval);
|
||||
alert('点名结束！');
|
||||
return;
|
||||
}
|
||||
|
||||
document.querySelector('.uname').innerText = students[currentIndex]; // 显示当前学生姓名
|
||||
currentIndex++; // 移动到下一个学生
|
||||
}, 1000); // 每秒更新一次
|
||||
});
|
||||
|
||||
// 点击停止按钮
|
||||
document.querySelector('.stop').addEventListener('click', () => {
|
||||
clearInterval(interval); // 停止点名
|
||||
|
||||
// 随机选择一名学生
|
||||
const selectedStudent = students[Math.floor(Math.random() * students.length)];
|
||||
document.querySelector('.uname').innerText = `选中的学生: ${selectedStudent}`;
|
||||
|
||||
// 显示到课和未到课按钮
|
||||
document.querySelector('.in').classList.remove('hidden');
|
||||
document.querySelector('.notin').classList.remove('hidden');
|
||||
});
|
||||
|
||||
// 点击到课按钮
|
||||
document.querySelector('.in').addEventListener('click', () => {
|
||||
document.querySelector('.in').classList.add('hidden'); // 隐藏到课按钮
|
||||
document.querySelector('.notin').classList.add('hidden'); // 隐藏未到课按钮
|
||||
document.querySelector('.t').classList.remove('hidden'); // 显示答对按钮
|
||||
document.querySelector('.f').classList.remove('hidden'); // 显示未答对按钮
|
||||
});
|
||||
|
||||
document.querySelector('.t').addEventListener('click', () => {
|
||||
resetButtons(); // 重置按钮显示状态
|
||||
});
|
||||
|
||||
document.querySelector('.f').addEventListener('click', () => {
|
||||
resetButtons(); // 重置按钮显示状态
|
||||
});
|
||||
|
||||
function resetButtons() {
|
||||
document.querySelector('.in').classList.add('hidden'); // 隐藏到课按钮
|
||||
document.querySelector('.notin').classList.add('hidden'); // 隐藏未到课按钮
|
||||
document.querySelector('.t').classList.add('hidden'); // 隐藏答对按钮
|
||||
document.querySelector('.f').classList.add('hidden'); // 隐藏未答对按钮
|
||||
document.querySelector('.uname').innerText = ''; // 清空学生姓名显示
|
||||
}
|
||||
@ -0,0 +1,71 @@
|
||||
let students = []; // 用于存储学生名单
|
||||
let currentIndex = 0; // 当前选择的学生索引
|
||||
let interval; // 定义定时器
|
||||
|
||||
// 点击开始按钮
|
||||
document.querySelector('.start').addEventListener('click', async () => {
|
||||
// 从后端获取学生列表
|
||||
const response = await fetch('url');
|
||||
if (!response.ok) {
|
||||
alert('无法获取学生名单！');
|
||||
return;
|
||||
}
|
||||
students = await response.json();
|
||||
|
||||
if (students.length === 0) {
|
||||
alert('学生名单为空！');
|
||||
return;
|
||||
}
|
||||
|
||||
currentIndex = 0; // 重置索引
|
||||
document.querySelector('.uname').innerText = ''; // 清空显示姓名
|
||||
|
||||
// 开始循环点名
|
||||
interval = setInterval(() => {
|
||||
if (currentIndex >= students.length) {
|
||||
clearInterval(interval);
|
||||
alert('点名结束！');
|
||||
return;
|
||||
}
|
||||
|
||||
document.querySelector('.uname').innerText = students[currentIndex]; // 显示当前学生姓名
|
||||
currentIndex++; // 移动到下一个学生
|
||||
}, 1000); // 每秒更新一次
|
||||
});
|
||||
|
||||
// 点击停止按钮
|
||||
document.querySelector('.stop').addEventListener('click', () => {
|
||||
clearInterval(interval); // 停止点名
|
||||
|
||||
// 随机选择一名学生
|
||||
const selectedStudent = students[Math.floor(Math.random() * students.length)];
|
||||
document.querySelector('.uname').innerText = `选中的学生: ${selectedStudent}`;
|
||||
|
||||
// 显示到课和未到课按钮
|
||||
document.querySelector('.in').classList.remove('hidden');
|
||||
document.querySelector('.notin').classList.remove('hidden');
|
||||
});
|
||||
|
||||
// 点击到课按钮
|
||||
document.querySelector('.in').addEventListener('click', () => {
|
||||
document.querySelector('.in').classList.add('hidden'); // 隐藏到课按钮
|
||||
document.querySelector('.notin').classList.add('hidden'); // 隐藏未到课按钮
|
||||
document.querySelector('.t').classList.remove('hidden'); // 显示答对按钮
|
||||
document.querySelector('.f').classList.remove('hidden'); // 显示未答对按钮
|
||||
});
|
||||
|
||||
document.querySelector('.t').addEventListener('click', () => {
|
||||
resetButtons(); // 重置按钮显示状态
|
||||
});
|
||||
|
||||
document.querySelector('.f').addEventListener('click', () => {
|
||||
resetButtons(); // 重置按钮显示状态
|
||||
});
|
||||
|
||||
function resetButtons() {
|
||||
document.querySelector('.in').classList.add('hidden'); // 隐藏到课按钮
|
||||
document.querySelector('.notin').classList.add('hidden'); // 隐藏未到课按钮
|
||||
document.querySelector('.t').classList.add('hidden'); // 隐藏答对按钮
|
||||
document.querySelector('.f').classList.add('hidden'); // 隐藏未答对按钮
|
||||
document.querySelector('.uname').innerText = ''; // 清空学生姓名显示
|
||||
}
|
||||
@ -0,0 +1,71 @@
|
||||
let students = [""]; // 用于存储学生名单
|
||||
let currentIndex = 0; // 当前选择的学生索引
|
||||
let interval; // 定义定时器
|
||||
|
||||
// 点击开始按钮
|
||||
document.querySelector('.start').addEventListener('click', async () => {
|
||||
// 从后端获取学生列表
|
||||
const response = await fetch('url');
|
||||
if (!response.ok) {
|
||||
alert('无法获取学生名单！');
|
||||
return;
|
||||
}
|
||||
students = await response.json();
|
||||
|
||||
if (students.length === 0) {
|
||||
alert('学生名单为空！');
|
||||
return;
|
||||
}
|
||||
|
||||
currentIndex = 0; // 重置索引
|
||||
document.querySelector('.uname').innerText = ''; // 清空显示姓名
|
||||
|
||||
// 开始循环点名
|
||||
interval = setInterval(() => {
|
||||
if (currentIndex >= students.length) {
|
||||
clearInterval(interval);
|
||||
alert('点名结束！');
|
||||
return;
|
||||
}
|
||||
|
||||
document.querySelector('.uname').innerText = students[currentIndex]; // 显示当前学生姓名
|
||||
currentIndex++; // 移动到下一个学生
|
||||
}, 1000); // 每秒更新一次
|
||||
});
|
||||
|
||||
// 点击停止按钮
|
||||
document.querySelector('.stop').addEventListener('click', () => {
|
||||
clearInterval(interval); // 停止点名
|
||||
|
||||
// 随机选择一名学生
|
||||
const selectedStudent = students[Math.floor(Math.random() * students.length)];
|
||||
document.querySelector('.uname').innerText = `选中的学生: ${selectedStudent}`;
|
||||
|
||||
// 显示到课和未到课按钮
|
||||
document.querySelector('.in').classList.remove('hidden');
|
||||
document.querySelector('.notin').classList.remove('hidden');
|
||||
});
|
||||
|
||||
// 点击到课按钮
|
||||
document.querySelector('.in').addEventListener('click', () => {
|
||||
document.querySelector('.in').classList.add('hidden'); // 隐藏到课按钮
|
||||
document.querySelector('.notin').classList.add('hidden'); // 隐藏未到课按钮
|
||||
document.querySelector('.t').classList.remove('hidden'); // 显示答对按钮
|
||||
document.querySelector('.f').classList.remove('hidden'); // 显示未答对按钮
|
||||
});
|
||||
|
||||
document.querySelector('.t').addEventListener('click', () => {
|
||||
resetButtons(); // 重置按钮显示状态
|
||||
});
|
||||
|
||||
document.querySelector('.f').addEventListener('click', () => {
|
||||
resetButtons(); // 重置按钮显示状态
|
||||
});
|
||||
|
||||
function resetButtons() {
|
||||
document.querySelector('.in').classList.add('hidden'); // 隐藏到课按钮
|
||||
document.querySelector('.notin').classList.add('hidden'); // 隐藏未到课按钮
|
||||
document.querySelector('.t').classList.add('hidden'); // 隐藏答对按钮
|
||||
document.querySelector('.f').classList.add('hidden'); // 隐藏未答对按钮
|
||||
document.querySelector('.uname').innerText = ''; // 清空学生姓名显示
|
||||
}
|
||||
@ -0,0 +1,75 @@
|
||||
const itemsPerPage = 10; // 每页显示的项目数
|
||||
let currentPage = 1;
|
||||
let data = []; // 存储从后端获取的数据
|
||||
|
||||
function fetchScoreTable() {
|
||||
fetch('your-backend-url') // 替换为实际的后端接口地址
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('网络响应不正常');
|
||||
}
|
||||
return response.json(); // 解析 JSON 格式的响应
|
||||
})
|
||||
.then(fetchedData => {
|
||||
data = fetchedData; // 存储数据
|
||||
renderTable(); // 渲染表格
|
||||
setupPagination(); // 设置分页
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('获取数据时出错:', error);
|
||||
});
|
||||
}
|
||||
|
||||
// 渲染当前页面的数据
|
||||
function renderTable() {
|
||||
const tbody = document.querySelector('#scoreTable tbody');
|
||||
tbody.innerHTML = ''; // 清空现有内容
|
||||
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
const endIndex = Math.min(startIndex + itemsPerPage, data.length);
|
||||
|
||||
for (let i = startIndex; i < endIndex; i++) {
|
||||
const student = data[i];
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td>${student.id}</td>
|
||||
<td>${student.name}</td>
|
||||
<td>${student.score}</td>
|
||||
`;
|
||||
tbody.appendChild(row); // 将新行添加到表格中
|
||||
}
|
||||
}
|
||||
|
||||
// 设置分页按钮
|
||||
function setupPagination() {
|
||||
const paginationContainer = document.getElementById('pagination');
|
||||
paginationContainer.innerHTML = ''; // 清空现有内容
|
||||
|
||||
const totalPages = Math.ceil(data.length / itemsPerPage);
|
||||
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
const button = document.createElement('button');
|
||||
button.innerText = i;
|
||||
button.onclick = () => {
|
||||
currentPage = i; // 更新当前页面
|
||||
renderTable(); // 重新渲染表格
|
||||
};
|
||||
paginationContainer.appendChild(button); // 添加按钮
|
||||
}
|
||||
}
|
||||
|
||||
function search() {
|
||||
const query = document.getElementById('searchInput').value.toLowerCase();
|
||||
const filteredData = data.filter(student =>
|
||||
student.id.toString().includes(query) ||
|
||||
student.name.toLowerCase().includes(query)
|
||||
);
|
||||
|
||||
currentPage = 1; // 重置为第一页
|
||||
renderTable(filteredData); // 渲染过滤后的表格
|
||||
setupPagination(filteredData); // 设置新的分页
|
||||
}
|
||||
|
||||
|
||||
// 页面加载时获取积分表数据
|
||||
document.addEventListener('DOMContentLoaded', fetchScoreTable);
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@ -0,0 +1,13 @@
|
||||
const reportWebVitals = onPerfEntry => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
@ -0,0 +1,5 @@
|
||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom';
|
||||
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../css/css1.css">
|
||||
<link rel="stylesheet" href="../css/css2.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<p class="hello">老师，你好</p>
|
||||
<p class="hello">欢迎进入点名系统</p>
|
||||
<button class="button1" onclick="location.href='2login.html';">登录/注册</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../css/css1.css">
|
||||
<link rel="stylesheet" href="../css/css3.css">
|
||||
<script src="../js/js2.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<form onsubmit="submitForm(event);">
|
||||
<p>老师，请输入您的信息：</p>
|
||||
<table>
|
||||
<tr>
|
||||
<th>姓名</th>
|
||||
<td>
|
||||
<input type="text" name="name">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>电话号</th>
|
||||
<td>
|
||||
<input type="text" name="telephonenum">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>所带班级</th>
|
||||
<td>
|
||||
<input type="text" name="class">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>用户名</th>
|
||||
<td>
|
||||
<input type="text" name="username">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>密码</th>
|
||||
<td>
|
||||
<input type="password" name="password">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<input type="submit" value="提交">
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../css/css1.css">
|
||||
<link rel="stylesheet" href="../css/css4.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<label for="fileInput">选择点名表</label>
|
||||
<input type="file" id="fileInput" accept=".xlsx, .xls" onchange="handleFileSelect(event)" />
|
||||
<div id="output"></div>
|
||||
<br>
|
||||
<br>
|
||||
<button class="button1" id="enterButton" onclick="location.href='4choice.html';">进入点名</button>
|
||||
</div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.full.min.js"></script>
|
||||
<script src="../js/js.1.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../css/css1.css">
|
||||
<link rel="stylesheet" href="../css/css5.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div><button class="button1" onclick="location.href='5.1method.html';">选择点名方式</button></div>
|
||||
<div><button class="button1" onclick="location.href='5.2check.html';">查看学生积分</button></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../css/css1.css">
|
||||
<link rel="stylesheet" href="../css/css6.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div><button class="button1" onclick="location.href='6.1three.html';">三折叠</button></div>
|
||||
<div><button class="button1" onclick="location.href='6.2lianming.html';">联名活动</button></div>
|
||||
<div><button class="button1" onclick="location.href='6.3common.html';">普通点名</button></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../css/css1.css">
|
||||
<link rel="stylesheet" href="../css/css8.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<h2>积分表</h2>
|
||||
<div class="search-container">
|
||||
<input type="text" id="searchInput" placeholder="按学号或姓名搜索">
|
||||
<button onclick="search()">搜索</button>
|
||||
</div>
|
||||
<table id="scoreTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>学号</th>
|
||||
<th>姓名</th>
|
||||
<th>积分</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="pagination" id="pagination"></div>
|
||||
</div>
|
||||
<script src="../js/js7.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../css/css1.css">
|
||||
<link rel="stylesheet" href="../css/css7.css">
|
||||
<script src="../js/js4.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="box2">
|
||||
<p>三折叠</p>
|
||||
</div>
|
||||
<div class="box1">
|
||||
<p>可获得三倍积分，答对，答错和未到课都是三倍，学号后三位是三的倍数，被点中几率增高</p>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<br><br>
|
||||
<span>噔噔，就是你啦</span>
|
||||
<div class="uname"></div>
|
||||
<button class="start">开始</button>
|
||||
<button class="stop">停止</button>
|
||||
<br>
|
||||
<form action="url">
|
||||
<button class="in hidden" value="+3">到课</button>
|
||||
<button class="notin hidden" value="-9">未到课</button>
|
||||
<br>
|
||||
<button class="t hidden" value="+6">答对</button>
|
||||
<button class="f hidden" value="-6">未答对</button>
|
||||
</form>
|
||||
<br>
|
||||
<input type="hidden" value="three">
|
||||
<button id="return"><a href="5.1method.html" >返回上一页</a></button>
|
||||
<button id="return"><a href="5.2check.html">查看积分</a></button>
|
||||
|
||||
</div>
|
||||
<script src="../js/js4.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../css/css1.css">
|
||||
<link rel="stylesheet" href="../css/css7.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="box2">
|
||||
<p>基础活动</p>
|
||||
</div>
|
||||
<div class="box1">
|
||||
<p>基础规则，没有特殊变化</p>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<br><br>
|
||||
<span>噔噔，就是你啦</span>
|
||||
<div class="uname"></div>
|
||||
<button class="start">开始</button>
|
||||
<button class="stop">停止</button>
|
||||
<br>
|
||||
<form action="url">
|
||||
<button class="in hidden" value="+1">到课</button>
|
||||
<button class="notin hidden" value="-3">未到课</button>
|
||||
<br>
|
||||
<button class="t hidden" value="+2">答对</button>
|
||||
<button class="f hidden" value="-2">未答对</button>
|
||||
</form>
|
||||
<br>
|
||||
<input type="hidden" value="lianming">
|
||||
<button id="return"><a href="5.1method.html">返回上一页</a></button>
|
||||
<button id="return"><a href="5.2check.html">查看积分</a></button>
|
||||
|
||||
</div>
|
||||
<script src="../js/js6.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in new issue