当前位置: 首页 > news >正文

jquery 实现考试倒计时

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

相关文章:

  • Android知识点textview加横线的属性
  • 配置链路聚合(端口聚合)
  • ELK常用API使用方法
  • oracle表空间增长异常或表空间占用过高问题分析
  • 大前端推荐使用的前端开发工具
  • 5.求单链表中节点的个数
  • 第九天
  • fmod()函数和modf()函数
  • 读书笔记--Java核心技术--基础篇
  • velt-0.1.7开发: KernelConfig的问题
  • P1164 小A点菜
  • 新建虚拟机
  • OpenCV探索之路(五):图片缩放和图像金字塔
  • 99%的人都理解错了HTTP中GET与POST的区别
  • spring的定时任务
  • AWS实战 - 利用IAM对S3做访问控制
  • canvas绘制圆角头像
  • ERLANG 网工修炼笔记 ---- UDP
  • leetcode386. Lexicographical Numbers
  • node.js
  • overflow: hidden IE7无效
  • Spark VS Hadoop:两大大数据分析系统深度解读
  • Vue2.x学习三:事件处理生命周期钩子
  • 计算机常识 - 收藏集 - 掘金
  • 排序算法学习笔记
  • 前嗅ForeSpider采集配置界面介绍
  • 浅谈Kotlin实战篇之自定义View图片圆角简单应用(一)
  • 全栈开发——Linux
  • 如何打造100亿SDK累计覆盖量的大数据系统
  • 如何解决微信端直接跳WAP端
  • 深入体验bash on windows,在windows上搭建原生的linux开发环境,酷!
  • 腾讯视频格式如何转换成mp4 将下载的qlv文件转换成mp4的方法
  • 用mpvue开发微信小程序
  • 源码安装memcached和php memcache扩展
  • puppet连载22:define用法
  • ​linux启动进程的方式
  • ​queue --- 一个同步的队列类​
  • #pragam once 和 #ifndef 预编译头
  • #ubuntu# #git# repository git config --global --add safe.directory
  • (BFS)hdoj2377-Bus Pass
  • (带教程)商业版SEO关键词按天计费系统:关键词排名优化、代理服务、手机自适应及搭建教程
  • (入门自用)--C++--抽象类--多态原理--虚表--1020
  • (转载)微软数据挖掘算法:Microsoft 时序算法(5)
  • .bat批处理(六):替换字符串中匹配的子串
  • .locked1、locked勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复
  • .NET MVC、 WebAPI、 WebService【ws】、NVVM、WCF、Remoting
  • .NET 发展历程
  • .NET/C# 避免调试器不小心提前计算本应延迟计算的值
  • .sh
  • /etc/fstab 只读无法修改的解决办法
  • @Transactional 详解
  • [ vulhub漏洞复现篇 ] JBOSS AS 4.x以下反序列化远程代码执行漏洞CVE-2017-7504
  • [acm算法学习] 后缀数组SA
  • [bbk5179]第66集 第7章 - 数据库的维护 03
  • [BUUCTF 2018]Online Tool(特详解)