html:  

  <div class="countdown">
    <p class="mtp"><span class="countdown_text">答题倒计时</span></p>
    <p class="line_height34"><span id="countdown_time"></span><span class="countdown_text">分钟</span></p>
  </div>

css:

  .countdown {
    background:#005DAC;
    text-align:center;
    position:absolute;
    top:80px;
    right:120px;
    width:161px;
    height:161px;
    border-radius:80px;
    -webkit-border-radius:80px;
    -moz-border-radius:80px;
  }
  .countdown .mtp {
    margin-top:50px;
  }
  .countdown .line_height34 {
    line-height:34px;
  }
  .countdown .countdown_text {
    color:white;
    margin-top:55px;
    font-size:20px;
    line-height:29px;
    letter-spacing:3px;
  }
  .countdown #countdown_time {
    color:#F8B62C;
    font-size:25px;
  }

js:

  $(function() {
    //设置时间倒计时
    setCountDown_time();
  })
  /*时间倒计时*/
    var sec = 60,min = 10;
    var format = function(str) {
      if(parseInt(str) < 10) {
        return "0" + str;
      }  
      return str;
    };
    function setCountDown_time(){
      var idt = window.setInterval("ls();", 1000);
    }
    function ls() {
      sec--;
      if(sec == 0) {
      min--;
      sec = 59;
    }
    document.getElementById("countdown_time").innerHTML = format(min) + ":" + format(sec);
    if(parseInt(min) == 0 && parseInt(sec) == 0) {
      window.clearInterval(idt);
      alert('考试时间已到,试卷已提交,感谢您的使用!');
    }
  }
  ls();

转载于:https://www.cnblogs.com/xiaofang-FE/p/6836347.html

jquery 实现考试倒计时相关推荐

  1. php考试倒计时提交系统,AJAX_基于Ajax技术实现考试倒计时并自动提交试卷,1.概述在开发网络考试系统 - phpStudy...

    基于Ajax技术实现考试倒计时并自动提交试卷 1.概述 在开发网络考试系统时,考试计时并自动提交试卷是必不可少的功能.由于在答卷过程中,试卷不能刷新,所以需要使用Ajax实现无刷新操作.运行本实例,访 ...

  2. php ajax 考试倒计时,ajax实现在线考试倒计时

    基于的C/S模式单机版的考试系统,我记得那种单机版的考试系统在进入考试以后界面就会自动的最大化,从而使考生的界面只能停留在考试界面而不能进行其他的操作,那样的话保证了考试系统的安全性.那么现在基于B/ ...

  3. 考试 倒计时 php,PHP实现考试倒计时功能代码

    这篇文章主要为大家详细介绍了PHP实现倒计时功能,文中示例代码介绍的非常详细,具有一定的参考价值. 本实例为大家分享了PHP实现倒计时功能. 具体代码:html> 编程之家 - PHP实现倒计时 ...

  4. php ajax 考试倒计时,基于Ajax技术实现考试倒计时并自动提交试卷

    1.概述 在开发网络考试系统时,考试计时并自动提交试卷是必不可少的功能.由于在答卷过程中,试卷不能刷新,所以需要使用Ajax实现无刷新操作.运行本实例,访问准备考试页面index.jsp,在该页面中, ...

  5. JavaScript实现效果——考试倒计时

    1.动态效果图: 2.代码如下: <!DOCTYPE html><html><head><meta charset="utf-8"> ...

  6. Vue回炉重造之封装防刷新考试倒计时组件

    你好,我是Vam的金豆之路,可以叫我豆哥.2019年年度博客之星.技术领域博客专家.主要领域:前端开发.我的微信是 maomin9761,有什么疑问可以加我哦,自己创建了一个微信技术交流群,可以加我邀 ...

  7. c语言上机试题倒计时,C语言课程实训-显示考试倒计时.doc

    C语言课程实训-显示考试倒计时 课 程 设 计 报 告 课程名称 C语言课程实训 系 别: 专业班级: 学 号: 姓 名: 课程题目: 显示考试倒计时 完成日期: 指导老师: 2013年6月21日 课 ...

  8. 自学web前端练手——js的考试倒计时

    考试倒计时,并附带15分钟和5分钟的图片更换.(没调整统一的图片大小) 起初文本一直出不来,搞了半小时(一条一条的检查排查错误),最后把setInterval从函数体中弄出来就好了,吐了_(:з」∠) ...

  9. 普歌-Vue 封装防刷新考试倒计时组

    date.vue <!-- 定时器组件 --> <template><div class=""><p>{{ count }}< ...

最新文章

  1. Vs 正则表达式 查找替换 微软权威参考
  2. 解决Multiple dex files define Lcom/qq/e/ads/ADActivity;
  3. CSS实现input默认文字灰色有提示文字点击后消失鼠标移开显示
  4. spring中的bean属性相关访问、编辑、转换
  5. 【Android 异步操作】线程池 ( 线程池简介 | 线程池初始化方法 | 线程池种类 | AsyncTask 使用线程池示例 )
  6. java heapsort_排序算法笔记:堆排序 HeapSort in java
  7. 前端学习(1383):多人管理项目3
  8. 数据库MySQL/mariadb知识点——数据类型
  9. PyTorch语义分割开源库semseg
  10. 嵌入式操作系统内核原理和开发(多线程轮转)
  11. 程序在Linux下后台运行,进程查看及终止
  12. python 字符串分割
  13. java http get 图片_http协议get方法获取图片并保存到本地
  14. windows进程/线程创建过程 --- windows操作系统学习
  15. 解决Linux系统下,出现“不在sudoers文件中,此事将被报告”的问题
  16. 【AGC035F】Two Histograms
  17. Excel功能及实现
  18. 管晓宏院士谈工业数据共享和分类分级管理
  19. 一步一步在平衡车上实现卡尔曼滤波
  20. 防止SQL注入攻击-学习笔记

热门文章

  1. SylixOS设备驱动
  2. MSCOCO检测数据集类别中文名
  3. [原创]python计算中文文本相似度神器
  4. macbook蓝牙pan未连接_机械键盘也能这么萌?洛斐DOT小黄鸭键鼠,蓝牙一键切换!...
  5. Android学习-使用WebView在app上显示网页
  6. 学习笔记-《python程序员面试宝典》-基础知识-数据结构-编程思维(一)
  7. 现在还没多少人知道的商业模式,月入百万不是梦——消费盲返模式
  8. Delphi惹谁了?
  9. 文字图片白底黑字_白底黑字简短文字图片 白底黑字纯简短文字
  10. longest-common-prefix[最长公共子序列]