zoukankan      html  css  js  c++  java
  • 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;
        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();

  • 相关阅读:
    How to configure security of ActiveMQ ?
    CentOS 搭建 nginx + tomcat
    25个 Git 进阶技巧
    写给Git初学者的7个建议
    my links
    Shell scripts to Create a local dir base on the time.
    81For全栈技术网
    一款可视化的在线制作H5
    在线制作h5
    在线制作h5——上帝的礼物
  • 原文地址:https://www.cnblogs.com/xiaofang-FE/p/6836347.html
Copyright © 2011-2022 走看看