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();

  • 相关阅读:
    微信小程序学习Course 9-2 云存储功能
    微信小程序学习Course 9-1 云数据库功能
    微信小程序学习Course 9 云开发功能
    微信小程序学习Course 6 界面交互API函数
    微信小程序学习Course 3-3 JS时间类型学习
    微信小程序案例TODO备忘录
    微信小程序学习Course 3-2 JS数组对象学习
    微信小程序学习Course 8 本地缓存API
    微信小程序学习Course 7 定时器功能
    常用excel函数语法及说明
  • 原文地址:https://www.cnblogs.com/xiaofang-FE/p/6836347.html
Copyright © 2011-2022 走看看