10秒倒计时、考试结束倒计时功能实现代码-JS

注册成功或登录后网页会有倒计时,如5秒后跳转到哪个页面的功能。

在做一些在线测试,网上考试系统时,会用到倒计时功能。

如网上考试系统里,会有时间提示离考试结束还有多长时间,临近考试结束剩10分钟,还可以弹窗提示考生。

10秒倒计时、考试结束倒计时功能实现代码-JS

JavaScript实现倒计时功能代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>10秒倒计时功能代码|www.125jz.com</title>
 </head>
 <body></body>
 <SPAN style="BACKGROUND: #00bfff" id=time>10</SPAN>秒钟后自动跳转.<br />
 如果不跳转,请点击下面的链接<A href=http://www.125jz.com> 125网页设计</A>
  <SCRIPT language=JavaScript type=text/javascript> 
  function delayURL(url) { var delay=document.getElementById("time").innerHTML;
  if(delay>0) {
   delay--;
   document.getElementById("time").innerHTML = delay;
  } else {
   window.top.location.href = url;
  }
 setTimeout("delayURL('" + url + "')", 1000);
  }
 </SCRIPT>
 <SCRIPT type=text/javascript> delayURL("http://www.125jz.com"); </SCRIPT> 
 </body> 
</html>

防刷新的考试结束倒计时JavaScript代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>距离考试结束还有分秒|www.125jz.com</title>
 </head>
 <body>
  <SCRIPT LANGUAGE="JavaScript">
   <!--  
   var maxtime;
   if (window.name == '') {
    maxtime = 1 * 60;
   } else {
    maxtime = window.name;
   }

   function CountDown() {
    if (maxtime >= 0) {
     minutes = Math.floor(maxtime / 60);
     seconds = Math.floor(maxtime % 60);
     msg = "距离考试结束还有" + minutes + "分" + seconds + "秒";
     document.all["timer"].innerHTML = msg;
     if (maxtime == 5 * 60) alert('注意,还有5分钟!');
     --maxtime;
     window.name = maxtime;
    } else {
     clearInterval(timer);
     alert("考试时间到,结束!");
    }
   }
   timer = setInterval("CountDown()", 1000);
   //-->
  </SCRIPT>
  <div id="timer" style="color:red"></div>
 </body>
</html>

网页设计交流群:208047327

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/8851.html

(0)
江山如画的头像江山如画管理团队
上一篇 2020年10月27日 上午9:56
下一篇 2020年11月1日 上午9:46

99%的人还看了以下文章

  • 编写第一个Python程序——输出HelloWorld并运行

    上一章节我们讲解了Python开发环境搭建,今天学习使用 Eclipse编写第一个Python程序——输出HelloWorld并运行。 1.打开Eclipse,选择File——》New——》Other。在弹出的New窗口中,选择Pydev——》Pydev Project——》next。 2.在弹出的窗口中,依次填写Project name(工程名)——》Di…

    2019年6月24日 编程开发
    8.1K0
  • tomcat配置中autodeploy 和reloadable的区别和使用场景

    tomcat配置中的autodeploy 和reloadable: <Context docBase=”xxx” path=”/xxx” reloadable=”true”/> <Context docBase=”xxx” path=”/xxx” autoDeploy=”true”/> 替换WEB-INF/lib目录中的jar文件或W…

    2018年12月25日
    6.8K0
  • 精!如何在IDEA中导入myeclipse项目、配置并运行(实例演示)

    125建站网站长原来开发的myeclipse项目直接在IDEA打开发现会有很多问题,根据解决过程,写出此文章供大家参考! 1.首先打开IDEA工具,选择导入项目,然后在弹出的窗口中选择要打开的myeclipse文件,然后点击确定。如图所示 2.选择Eclipse,然后一直下一步 3.正常我们SDK这里都配置好了,直接选择就好,然后完成项目的导入 4.导入的完…

    2023年2月3日 编程开发
    7.3K0
  • 第四章 数据库应用开发案例1

    理解JDBC以及Java程序与数据库的交互原理
    掌握JDBC API中提供的常用接口和类
    掌握JDBC连接数据库方法
    掌握数据库的CRUD操作
    掌握数据源与连接池技术

    2018年2月7日
    8.1K2
  • itbegin编程教学云课堂使用介绍

    进入https://www.itbegin.com/apps    点击右上角 登录 登录后,点击院校通–院校 点击进入个人中心 点击“web开发技术课堂”,进入相应课程 点击:我的预习,可以看到预习的知识点,时间要求。请同学们一定要在结束时间前完成任务! 点击查看,可以看到需要预习的知识点,预习以观察,查看效果为主。 如要求:观察各标签的使用及…

    2018年3月14日
    7.8K0
  • 2个pycharm使用技巧:更改文件、文件夹名称,更换pip为清华源

    pycharm怎么重命名文件、文件夹名称 1.右键单击文件名称,在弹出的界面选择refacto下的rename选项 2.在弹出的界面输入新的名称即可 pycharm更换pip清华源 永久使用 直接在Pycharm打开终端Terminal,选择Command Prompt,将下列语句复制进去,回车执行 pip config set global.index-u…

    2023年10月3日
    3.5K0

发表回复

登录后才能评论