zoukankan      html  css  js  c++  java
  • jQuery 倒计时

    倒计时,在网页制作中会经常用到,特别是一些节日活动页面运用更是广泛。今天就和大家分享一下jQuery如何实现倒计时。话不多说,言归正传,倒计时开始:

    首先,既然是用jQuery实现,那么前提就是要先引入jQuery文件(最好是用最新的版本),请看代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>倒计时demo</title>
        <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    </head>
    <body>
    <div id="remainSeconds" style="display:none">180000</div>
    <div id="remainTime" style="font-size:20px;font-weight:800;color:#FF9900">
        倒计时:
        <span id="day"></span><span id="hour"></span><span id="minite"></span><span id="second"></span></div>
    </body>
    <script type="text/javascript" language="javascript">
        var SysSecond;
        var InterValObj;
        $(document).ready(function() {
            SysSecond = parseInt($("#remainSeconds").html());
            InterValObj = window.setInterval(SetRemainTime, 1000);
        });
        function SetRemainTime() {
            if (SysSecond > 0) {
                SysSecond = SysSecond - 1;
                var second = Math.floor(SysSecond % 60);
                var minite = Math.floor((SysSecond / 60) % 60);
                var hour = Math.floor((SysSecond / 3600) % 24);
                var day = Math.floor((SysSecond / 3600) / 24);
    //            $("#remainTime").html(day + "天" + hour + "小时" + minite + "分" + second + "秒");
                //或者这样写,
                $("#day").html(day);
                $("#hour").html(hour);
                $("#minite").html(minite);
                $("#second").html(second);
            } else {
                window.clearInterval(InterValObj);
            }
        }
    </script>
    </html>

    一个简单的倒计时就完成了,OK!谢谢阅读!

  • 相关阅读:
    11g SPA (sql Performance Analyze) 进行升级测试
    SPA游标采集之去除重复
    C++ 实现分数的四则运算
    计算两个数的最大公约数和最小公倍数(欧几里得算法)
    计算a月的第b个星期c
    完数问题
    求整数的最大质因子
    C++ 读取文本文件内容到结构体数组中并排序
    月饼问题PAT B1020(贪心算法)
    路径打印(set以及字符串的相关操作)
  • 原文地址:https://www.cnblogs.com/kingchan/p/6033260.html
Copyright © 2011-2022 走看看