123

app-dm/src/TeacherPages/list_pods/List_pods.css

@@ -1,9 +1,12 @@
-.pods table{
-    width: 500px;
-    text-align: center;
-    border: 1px solid black;
-}
-.pods p{
-    line-height: 0px;
-    margin: 0px;
-}
+.list-pods-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+    
+  h1 {
+    font-size: 2rem;
+    color: #333;
+  }

app-dm/src/TeacherPages/list_pods/List_pods.jsx

@@ -1,36 +1,28 @@
 import './list_pods.css'
+import React, { useEffect, useState } from 'react';
 function List_pods(){
+    const [seconds, setSeconds] = useState(60);
 
+  const handleStart = () => {
+    const intervalId = setInterval(() => {
+      if (seconds > 0) {
+        setSeconds(seconds - 1);
+      } else {
+        clearInterval(intervalId);
+        alert('考试时间到!');
+      }
+    }, 1000);
 
-    return(
-        <div className="pods">
-            <table>
-                <tr>
-                    <td>Name</td>
-                    <td>TestID</td>
-                    <td>Train</td>
-                    <td>Start</td>
-                    <td>End</td>
-                </tr>
-                <tr>
-                    <td colSpan="5"><hr /></td>
-                </tr>
-                <tr>
-                    <td>zhoutao</td>
-                    <td>33</td>
-                    <td>0</td>
-                    <td>2024-7-1</td>
-                    <td>2024-7-2</td>
-                </tr>
-                <tr>
-                    <td>zhoutao</td>
-                    <td>33</td>
-                    <td>0</td>
-                    <td>2024-7-1</td>
-                    <td>2024-7-2</td>
-                </tr>
-            </table>
-        </div>
-    )
+    return () => {
+      clearInterval(intervalId);
+    };
+  };
+
+  return (
+    <div className="App">
+      <h1>剩余时间：{seconds}</h1>
+      <button onClick={handleStart}>开始倒计时</button>
+    </div>
+  );
 }
 export default List_pods

app-dm/src/pages/ListPages/Training/Operation1.jsx

@@ -10,8 +10,9 @@ import top from '../img/top.jpg'
 import axios from 'axios';
 
 function Operation1() {
+    const[isTrue,setisTrue]=useState(true)
     const click=()=>{
-        console.log(TrainData);
+        console.log(60 * parseInt(TrainData['operateID'][4]));
     }
     const clear=()=>{
         localStorage.removeItem('choice_answers');
@@ -40,32 +41,33 @@ function Operation1() {
             })
             const returnData=TrainDataSrc.data
             setTrainData(returnData)
-            //60*parseInt(returnData['operateID'][4]
         }catch{
             alert('TrainDataFunc出错')
         }
     }
-    useEffect(()=>{
+    useEffect(()=>{ 
         TrainDataFunc()
-        const RemainingTime=localStorage.getItem('RemainingTime')
-            if(!isNaN(RemainingTime) && RemainingTime !== '') {
-                setCountdown(RemainingTime);
-            } else {
-                setCountdown(60 * parseInt(TrainData['operateID'][4]));
-            }
     },[])
-    //倒计时
-    const [countdown, setCountdown] = useState();
-    const [time,settime]=useState()
-    // 倒计时初始化
 
+    useEffect(()=>{
+        if(localStorage.getItem('time')){
+            setCountdown(localStorage.getItem('time'))
+        }else{
+            if(TrainData){
+                setCountdown(60 * parseInt(TrainData['operateID'][4]))
+            }
+        }
+    },[TrainData])
+
+    //倒计时
+    const [countdown, setCountdown] = useState(null);
 
     // 倒计时更新
     useEffect(() => {
         let interval = setInterval(() => {
-            if (countdown != 0) {
+            if (countdown > 0 ) {
                 setCountdown(countdown - 1);
-                localStorage.setItem('RemainingTime',countdown)
+                localStorage.setItem('time',countdown-1)
             } else {
                 clearInterval(interval);
                 alert('考试时间到！');

app-dm/src/pages/ListPages/Training/Operation2.css

@@ -101,6 +101,7 @@
 }
 /* 前进按钮 */
 .btn-out2{
+    cursor: pointer;
     height: 50px;
     position: absolute;
     bottom: 50px;

app-dm/src/pages/ListPages/Training/Operation2.jsx

@@ -12,7 +12,7 @@ import top from '../img/top.jpg'
 function Operation2() {
     const { operateID } = useParams();
     //获取剩余时间
-    const RemainingTime=localStorage.getItem('RemainingTime')
+    
 
     
     //终端
@@ -67,15 +67,15 @@ function Operation2() {
 
     // 倒计时初始化
     useEffect(() => {
-    setCountdown(RemainingTime);
+        setCountdown(localStorage.getItem('time'))
     }, []);
 
     // 倒计时更新
     useEffect(() => {
         let interval = setInterval(() => {
-            if (countdown != 0) {
+            if (countdown !== 0) {
                 setCountdown(countdown - 1);
-                localStorage.setItem('RemainingTime',countdown)
+                localStorage.setItem('time',countdown-1)
             } else {
                 clearInterval(interval);
                 alert('考试时间到！');
@@ -95,6 +95,12 @@ function Operation2() {
     // 下拉菜单
     const [isSubjectDropdownOpen, setIsSubjectDropdownOpen] = useState(false);
 
+    const tijiao = ()=>{
+        clearInterval()
+        localStorage.removeItem('time')
+        window.location.href='http://baidu.com'
+    }
+
   return (
     <div>
         <div className='nav-operation2'>
@@ -132,10 +138,10 @@ function Operation2() {
                 <p>上一页</p>
                 <img src={arrowleft} alt="" width='40px' height='40px' />
             </Link>
-            <Link className='btn-out2' style={{color:'#000',textDecoration:'none'}}>
+            <button onClick={tijiao} className='btn-out2' style={{color:'#000',textDecoration:'none'}}>
                 <img src={arrowright} alt="" width='40px' height='40px' />
                 <p>完成</p>
-            </Link>
+            </button>
         </div>
     </div>
   )