【项目经验】——考试倒计时


    之前做项目的时候也做过考试,但没有具体涉及过考试倒计时的内容,这次再次带着考试,真正的看了考试倒计时这块的内容,站在前人巨人的肩膀上,把这段内容总结下来:


    首先看在view中添加的内容:

<span style="white-space:pre">		</span><span style="font-family:SimSun;"><tr>
                    <td colspan="2">
                        @*倒计时*@
                        考试倒计时:<div id="timer" style="text-align: center; font-size: 20px; width: 100%; float: right; height: 30px; color: rgba(0, 0, 0, 0.82);margin-bottom: 35px;"></div></td>

              </tr></span>

<span style="font-family:SimSun;">@*倒计时*@
@{Html.RenderAction("GetExamTime", "StudentMain");}</span>

    第二段代码引用的controller层中StudentMain类中的方法,在controller中的具体内容:

<span style="white-space:pre">	</span><span style="font-family:SimSun;">/// <summary>
        /// 获取考试时间js代码
        /// </summary>
        /// <returns></returns>
        public StringBuilder GetExamTime()
        {
            StringBuilder ExamTime = new StringBuilder();
            ExamTime.Append("<script>");
            ExamTime.Append("var maxtime = ");
            //ExamTime.Append(Session["examTime"]);
            ExamTime.Append("3600");
            ExamTime.Append(";</script>");
            return ExamTime;
        }</span>

    这样一来,界面上就显示出时间了,关键的问题所在就是要让时间出现倒计时的效果,接下来这段也就是考试倒计时的关键所在:

<span style="font-family:SimSun;font-size:18px;">function CountDown() {

    //maxtime表示时间的秒数
    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;
    }
    else {
        clearInterval(timer);
        alert("考试时间到…………结束交卷");

        //这里调用交卷方法
        JumpPape()

    }
}
timer = setInterval("CountDown()", 1000);</span>

    

    嗯,仅需以上几段代码,考试倒计时的效果就出来啦,按秒倒计时的哦,哈哈,说难不难,说简单吧,小编还真着实琢磨了琢磨,功夫不负有心人,让我做出来了(虽然前人已经做得棒棒哒~),这也不知道节省了我多少时间呢,巨人给垫背,学习就有了更多的支持啦~~~



  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 32
    评论
评论 32
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值