考试倒计时、计时器

已于 2024-07-08 15:58:19 修改
阅读量203 收藏 1
点赞数 3
文章标签： 前端 javascript react.js
于 2024-07-08 11:07:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/J20010905/article/details/140261107
版权

页面刷新导致倒计时/计时器不准确(requestAnimationFrame


本文章参考其他大神的计时器做了优化：页面退出监听状态更新计时器

考试倒计时场景

  • 无考试分钟数、无考试结束时间（展示计时器）
  • 无考试分钟数、有考试结束时间 （展示到结束时间的倒计时）
  • 有考试分钟数、无考试结束时间 （展示分钟数倒计时）
  • 有考试分钟数、有考试结束时间
    a. 考试分钟数 > 考试结束时间（展示到考试结束时间的倒计时）
    b. 考试分钟数 < 考试结束时间 （展示分钟数倒计时）

计时器

import React, { useEffect, useState } from 'react';
// 辅助函数，用于在数字前面添加前导零
export const pad = (num: number, size = 2) => String(num).padStart(size, '0');

// 格式化时间
const formatTime = (totalSeconds: number) => {
  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = totalSeconds % 60;
  return {
    hours: pad(hours),
    minutes: pad(minutes),
    seconds: pad(seconds),
  };
};
const Timepiece = () => {
  const initSeconds = formatTime(parseInt(localStorage.getItem('totalSeconds') || '', 10) || 0); // 先取本地缓存秒数
  const [time, setTime] = useState(initSeconds); // 页面展示时分秒

  // 更新时间的定时器
  useEffect(() => {
    let intervalId;
    // 更新时间的函数
    const updateTimer = () => {
      // 获取已经过去的秒数（假设我们从localStorage加载了一个初始秒数）
      let totalSeconds = parseInt(localStorage.getItem('totalSeconds') || '', 10) || 0 as number;
      totalSeconds++; // 增加一秒

      // 格式化时间并更新state
      setTime(formatTime(totalSeconds));

      // 将总秒数保存到localStorage
      localStorage.setItem('totalSeconds', totalSeconds.toString());
    };

    // 使用setInterval来定期更新时间
    intervalId = setInterval(updateTimer, 1000);

    // 清除定时器的函数，组件卸载时执行
    return () => {
      clearInterval(intervalId);
    };
  }, []); // 由于我们不依赖任何state或props的变化，所以这里也是空依赖数组

  console.log('======time', time);
  return (
    <div>
     	{time.hours}:{time.minutes}:{time.seconds}
    </div>
  );
};

export default Timepiece;

倒计时

做了两个优化
1.页面刷新不会影响倒计时展示
2. 监听页面tab，更新倒计时

/* eslint-disable react-hooks/exhaustive-deps */
import React, {
  RefObject,
  useCallback, useEffect, useRef, useState,
} from 'react';
import { Dialog, Toast } from 'antd-mobile';
import { HrCandidateExaminationSubmitVO, candidateExaminationSubmit } from '@/api';
import { BaseApiResponse } from '@/utils/fetchExt';
// 辅助函数，用于在数字前面添加前导零
const pad = (num: string | number, size = 2) => String(num).padStart(size, '0');

interface ExaminationObj {
  duration: number; // 考试分钟数
  examinationId: number; // 考试id
  name: string;
  endDate: string; // 考试结束时间
}
interface PropsDTO {
  clearCountDown: () => void;
  setsubmitVisible: (val: any) => void;
  examinationObj: ExaminationObj;
  requestRef: RefObject<number>;
}
const Countdown = (props: PropsDTO) => {
  const {
    examinationObj, requestRef, setsubmitVisible, clearCountDown,
  } = props;
  const [count, setCount] = useState<number>(0);
  const [duration, setTotalDuration] = useState<number>(0);
  const previousTimeRef = useRef(null);
  const currentCountRef = useRef<number>(0);

  // 提交答案
  const onSubmit = () => {
    const { examinationId, name } = examinationObj;
    const answerList = JSON.parse(localStorage.getItem('answerList') || '[]') as HrCandidateExaminationSubmitVO[];
    	//XXXXXX调用提交接口
    }).catch((err) => {
      Toast.show({
        content: (err as BaseApiResponse).message,
        afterClose: () => {
          clearCountDown();
          window.location.href = '/ExaminationList';
        },
      });
    });
  };
  // 格式化时间
  function formatSeconds(value: number) {
    let second = parseInt((value / 1000) as unknown as string, 10); //  秒
    let minute = 0; //  分
    let hour = 0 as number | string; //  时
    if (second > 59) {
      minute = parseInt((second / 60) as unknown as string, 10);
      second = parseInt((second % 60) as unknown as string, 10);
      if (minute > 59) {
        hour = parseInt((minute / 60) as unknown as string, 10);
        minute = parseInt((minute % 60) as unknown as string, 10);
        if (hour < 10) hour = `0${hour}`; // 小时补零
      }
    }
    const result = `${pad(hour)}:${pad(minute)}:${pad(second)}`;
    console.log(pad(hour), pad(minute), pad(second));
    return result;
  }

  // 倒计时
  const animate = useCallback((time: number | null) => {
    if (previousTimeRef.current !== undefined) {
      const deltaTime = (time || 0) - (previousTimeRef.current || 0);
      if (deltaTime > 1000) {
        if (currentCountRef.current > 2000) {
          previousTimeRef.current = time;
          setCount((prevCount) => {
            currentCountRef.current = prevCount - 1000;
            localStorage.setItem('totalDuration', JSON.stringify(prevCount - 1000));
            return (prevCount - 1000);
          });
        } else {
          onSubmit();
          return;
        }
      }
    } else {
      previousTimeRef.current = time;
    }

    // console.log('=====previousTimeRef.current', previousTimeRef.current);
    requestRef.current = requestAnimationFrame(animate);
  }, []);

  // 计算倒计时
  const calculatedCountdownFn = () => {
    const timer = JSON.parse(localStorage.getItem('totalDuration') || 'null') as string; // 剩余倒计时
    const startTime = JSON.parse(localStorage.getItem('startTime') || 'null') as string || new Date().getTime(); // 首次考试开始时间
    const nowTime = new Date().getTime(); // 当前时间
    const Countdduration = examinationObj?.duration * 60 * 1000; // 倒计时毫秒
    const CountdownEndTime = (Number(startTime)) + Countdduration; // 倒计时结束时间 = 首次考试时间 + 倒计时分钟
    const fixedEndTime = new Date(examinationObj?.endDate).getTime(); // 固定结束时间
    localStorage.setItem('startTime', JSON.stringify(startTime)); // 保存首次考试时间
    console.log('=======时间差', CountdownEndTime - nowTime);

    // 没有设置倒计时-设置了考试结束时间
    if (!examinationObj.duration && examinationObj.endDate) {
      localStorage.setItem('totalDuration', JSON.stringify(fixedEndTime - nowTime));
      setCount(fixedEndTime - nowTime);
      setTotalDuration(fixedEndTime - nowTime);
    } else if ((fixedEndTime > CountdownEndTime) || (!examinationObj.endDate)) { // 倒计时时间比固定结束时间结束快时
      localStorage.setItem('totalDuration', JSON.stringify(CountdownEndTime - nowTime));
      setCount(CountdownEndTime - nowTime);
      setTotalDuration(CountdownEndTime - nowTime);
    } else { // 固定时间比倒计时时间结束快时
      localStorage.setItem('totalDuration', JSON.stringify(fixedEndTime - nowTime));
      setCount(fixedEndTime - nowTime);
      setTotalDuration(fixedEndTime - nowTime);
    }
    console.log('====fixedEndTime', fixedEndTime > CountdownEndTime);
    console.log('====CountdownEndTime', CountdownEndTime > fixedEndTime);
  };

  useEffect(() => {
    calculatedCountdownFn();
  }, []);

  // 监听切换tab
  function visibilitychangeEvent() {
    console.log('document.visibilityState', document.visibilityState, duration);
    // 用户离开了当前页面
    if (document.visibilityState === 'hidden') {
      console.log('hidden');
    }

    // 用户打开或回到页面
    if (document.visibilityState === 'visible') {
      console.log('visible');
      calculatedCountdownFn();
    }
  }

  useEffect(() => {
    if (duration <= 1000) {
      return;
    }
    currentCountRef.current = duration;
    previousTimeRef.current = null;
    if (requestRef.current) {
      cancelAnimationFrame(requestRef.current);
    }
    requestRef.current = requestAnimationFrame(animate);
    return () => {
      cancelAnimationFrame(requestRef.current);
    };
  }, [animate, duration]);

  useEffect(() => {
    // 用于监听浏览器切换Tab页
    document.addEventListener('visibilitychange', visibilitychangeEvent);
    return () => {
      document.removeEventListener('visibilityChange', visibilitychangeEvent);
    };
  }, []);

  return (
    <div>
      {formatSeconds(count)}
    </div>
  );
};

export default Countdown;

倒计时setInterval版

（使用requestAnimationFrame 发现在h5切到后台后，倒计时不会执行，导致倒计时结束后无法触发自动提交， 所以还是使用setInterval实现）

/* eslint-disable react-hooks/exhaustive-deps */
import React, {
  RefObject,
  useCallback, useEffect, useRef, useState,
} from 'react';
import { Dialog, Toast } from 'antd-mobile';
import { HrCandidateExaminationSubmitVO, candidateExaminationSubmit } from '@/api';
import { BaseApiResponse } from '@/utils/fetchExt';
// 辅助函数，用于在数字前面添加前导零
const pad = (num: string | number, size = 2) => String(num).padStart(size, '0');

interface ExaminationObj {
  duration: number;
  examinationId: number;
  name: string;
  endDate: string;
}
interface PropsDTO {
  clearCountDown: () => void;
  setsubmitVisible: (val: any) => void;
  examinationObj: ExaminationObj;
  requestRef: RefObject<number>;
}
const Countdown = (props: PropsDTO) => {
  const {
    examinationObj, requestRef, setsubmitVisible, clearCountDown,
  } = props;
  const [count, setCount] = useState<number>(0);
  const TimeRef = useRef(null);

  // 提交答案
  const onSubmit = () => {
    const { examinationId, name } = examinationObj;
    const answerList = JSON.parse(localStorage.getItem('answerList') || '[]') as HrCandidateExaminationSubmitVO[];
    candidateExaminationSubmit(examinationId, answerList).then(async (res) => {
      if (res.code === '0') {
        await Dialog.alert({
          content: '考试结束',
          // bodyClassName: styles.confirm,
          onConfirm: () => {
            setsubmitVisible(false);
            clearCountDown();
            window.location.href = '/ExaminationList';
          },
        });
      }
    }).catch((err) => {
      Toast.show({
        content: (err as BaseApiResponse).message,
        afterClose: () => {
          clearCountDown();
          window.location.href = '/ExaminationList';
        },
      });
    });
  };
  // 倒计时
  function formatSeconds(value: number) {
    let second = parseInt((value / 1000) as unknown as string, 10); //  秒
    let minute = 0; //  分
    let hour = 0 as number | string; //  时
    if (second > 59) {
      minute = parseInt((second / 60) as unknown as string, 10);
      second = parseInt((second % 60) as unknown as string, 10);
      if (minute > 59) {
        hour = parseInt((minute / 60) as unknown as string, 10);
        minute = parseInt((minute % 60) as unknown as string, 10);
        if (hour < 10) hour = `0${hour}`; // 小时补零
      }
    }
    const result = `${pad(hour)}:${pad(minute)}:${pad(second)}`;
    return result;
  }

  // 倒计时
  const countDownTime = (time: number) => {
    TimeRef.current = setInterval(() => {
      time -= 1000;
      setCount(time);
      if (time <= 1000) {
        onSubmit();
        clearInterval(TimeRef.current!);
      }
    }, 1000);
  };
  // 计算倒计时
  const calculatedCountdownFn = () => {
    const timer = JSON.parse(localStorage.getItem('totalDuration') || 'null') as number; // 剩余倒计时
    const startTime = JSON.parse(localStorage.getItem('startTime') || 'null') as string || new Date().getTime(); // 首次考试开始时间
    const nowTime = new Date().getTime(); // 当前时间
    const Countdduration = examinationObj?.duration * 60 * 1000; // 倒计时毫秒
    const CountdownEndTime = (Number(startTime)) + Countdduration; // 倒计时结束时间 = 首次考试时间 + 倒计时分钟
    const fixedEndTime = new Date(examinationObj?.endDate).getTime(); // 固定结束时间
    localStorage.setItem('startTime', JSON.stringify(startTime)); // 保存首次考试时间

    // 没有设置倒计时-设置了考试结束时间
    if (!examinationObj.duration && examinationObj.endDate) {
      localStorage.setItem('totalDuration', JSON.stringify(fixedEndTime - nowTime));
      setCount(fixedEndTime - nowTime);
      countDownTime(fixedEndTime - nowTime);
    } else if ((fixedEndTime > CountdownEndTime) || (!examinationObj.endDate)) { // 倒计时时间比固定结束时间结束快时
      localStorage.setItem('totalDuration', JSON.stringify(CountdownEndTime - nowTime));
      setCount(CountdownEndTime - nowTime);
      countDownTime(CountdownEndTime - nowTime);
    } else { // 固定时间比倒计时时间结束快时
      localStorage.setItem('totalDuration', JSON.stringify(fixedEndTime - nowTime));
      setCount(fixedEndTime - nowTime);
      countDownTime(fixedEndTime - nowTime);
    }
  };

  // 更新时间的定时器
  useEffect(() => {
    calculatedCountdownFn();
    // 清除定时器的函数，组件卸载时执行
    return () => {
      clearInterval(TimeRef.current!);
    };
  }, []); // 由于我们不依赖任何state或props的变化，所以这里也是空依赖数组

  return (
    <div>
      {formatSeconds(count)}
    </div>
  );
};

export default Countdown;

参考：https://juejin.cn/post/7187193005063798844?searchId=2024062816014818EC910885549A70E361

https://juejin.cn/post/7022636375136534565?searchId=20240628161156E7EA8E9D0A3B457099AF

吉吉鸭
关注
PPt倒计时器
05-24
在PPT演示文稿中，有时我们需要添加倒计时功能，比如用于培训、演讲、考试或活动开场等场合，以确保时间的有效管理。"PPt倒计时器"就是一个这样的工具，它能够在幻灯片上实时显示剩余时间，提醒观众或演讲者时间的...
vue考试每道题添加计时器实现
最新发布
m0_59627947的博客
05-10 179
【代码】vue考试每道题添加计时器实现。
Vue考试倒计时和计算考试用时
这里是前端，是不一样的前端
11-04 508
【代码】倒计时1111。
Vue实现考试倒计时（内含思路，效果图，代码，注释）
黄瓜炒鸡蛋的博客
03-27 4154
实现思路： 通过考试结束时间，考试最大允许时长，考试开始时间、当前时间，计算出做题的可用时间，再利用定时器改变考试可用时间。 实现效果如下：（界面请自行设计） 代码如下： 倒计时Html代码： <p :class="Time<60*10?'Time red':Time<60*20?'Time orange':'Time cadetblue'" v-if="Time!=null"><span>{{Day}} 天 {{Hours}} 小时 {{Minutes}} 分钟 {{
Vue实现 在线考试型倒计时
Slient_SSS的博客
12-17 3132
因公司需求，现制作一种在线考试型倒计时 注意：底层为Vue，所有的提示使用了elementUI，可根据需求引入或者自行改造制作 Html部分 <template> <div> <p><i class="el-icon-time"></i> {{ `${hr}: ${min}: ${sec}` }}</p> <el-button v-show="isshow1" @click="begin
在线考试系统的时间控制（倒计时）
热门推荐
黎鉴洪的博客
05-07 1万+
在线考试系统的时间控制倒计时跟一般的html倒计时的区别：html可以很轻松地实现倒计时，但是页面刷新的同时，时间回到原点，根本没啥用。但是在线考试系统的时间控制是通过时间同步来实现真真正正的倒计时以达到刷新页面但是时间继续倒计而不会回到原点 思路：1 .点击进入考试             2 .在数据库获取试题，同时通过userId和subject_id判断score表是否含有该对象，没有
jQuery自适应倒计时插件
06-24
这在诸如活动倒计时、产品发布预告或者考试倒计时等场景中非常有用。 在实现过程中，`jquery.lwtCountdown.js`可能使用了以下关键技术： 1. **事件监听**：插件会监听页面加载或者其他触发事件，以便在正确的时间...
C#有进度条的计时器(倒计时器)
11-15
在本资源中，开发者创建了一个带有进度条的倒计时器，这在许多应用场景中都非常实用，如游戏倒计时、考试剩余时间提示、等待用户确认操作等。以下是对这个项目的详细解释： 首先，C#中的`System.Windows.Forms....
迷你倒计时器V1.0.0
01-12
一款倒计时软件，可按中考、高考、考研及自定义时间进行倒计时，另外还具有显示名言警句、更换背景等功能。适合在班级白板中展示中考、高考、考研倒计时，是考试冲刺阶段提示倒计时的首选。
考试倒计时
04-16
因为考试邻近，一直没有心思看书，所以写了一个这样的小工具用于给自己一点压力。 程序对于有拖延症的朋友还是有一些帮助的。
js实现考试倒计时
王硕的专栏
03-17 756
<br /><html> <br /><br />   <head> <br />   </head> <br /><br />   <body> <br />      <input type="text" name="mss" id="mss"/> <br />      <br />      <form action="./index.html"> <br />        <input type="text" value="name" name="name"/>    <br /><br /> 
vue实现正计时
m0_52457734的博客
07-19 1648
实现效果： 1.点击开始按钮启动计时 2.点击重置按钮计时恢复到00:00:00 3.点击暂停按钮暂停计时 Vue代码： <template> <div> <div class="timeContainer">{{ time }}</div> <a-button style="margin-right: 20px" type="primary" @click="start" >开始</a-button
js实现的一个简单的考试倒计时
03-15 1301
js实现的一个  简单的考试倒计时    html 代码： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/...
java考试系统倒计时的实现_(Java程序设计）第11章设计考试系统中的倒计时.ppt
weixin_35149412的博客
02-26 1240
第11章　任务11——设计考试系统中的倒计时 11.1 任 务 描 述　　本章的任务是设计倒计时。考试系统中的倒计时功能是必不可少的功能之一，当考生成功登录考试系统后，点击【开始考试】按钮，则计时系统开始倒计时。当考试时间结束时，系统将弹出相应的对话框提示并退出考试。如图11-1所示，在我们所设计的考试系统中，时间的显示在整个界面的上方，使得考生能清晰地看到时间的显示，把握好考试时间。Java利...
考试系统倒计时实现
王硕的专栏
03-16 1072
 无标题文档   var counttime=7200; function startTime() { var s=counttime%60;  var m=Math.floor(counttime/60);  if(m>60){ var h= Math.floor(m/60);    document.getElementById
用74LS90设计考试倒计时计时器
06-13
使用74LS90设计考试倒计时计时器的具体步骤如下： 1. 首先，需要将一个74LS90计数器设置为倒计时器。这可以通过将其输入端的时钟信号反相接入来实现。也就是说，当时钟信号为高电平时，74LS90计数器不会工作，当时...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值