<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jquery版的网页倒计时效果</title>
    <script type="text/javascript" src="jquery-2.2.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var time = 6000;//倒计时总秒数量
            (function () {
                var intDiff = parseInt(time);//倒计时总秒数量
                function timer(intDiff) {
                    window.setInterval(function () {
                        var day = 0, hour = 0, minute = 0, second = 0;//时间默认值
                        if (intDiff > 0) {
                            day = Math.floor(intDiff / (60 * 60 * 24));
                            hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                            minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                            second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
                        }
                        if (minute <= 9) minute = '0' + minute;
                        if (second <= 9) second = '0' + second;
                        $('#day_show').html(day);
                        $('#hour_show').html(hour);
                        $('#minute_show').html(minute);
                        $('#second_show').html(second);
                        intDiff--;
                    }, 1000);
                }

                $(function () {
                    timer(intDiff);
                });
            })(time)

        })
    </script>
</head>
<body>
<h1>网页上的倒计时</h1>
<div class="time-item">
    <span id="day_show">0天</span>
    <strong id="hour_show">0时</strong>
    <strong id="minute_show">0分</strong>
    <strong id="second_show">0秒</strong>
</div>
<!--倒计时模块-->
<!--<script src="http://www.jq22.com/js/jq.js"></script>-->

</body>
</html>

jquery版的网页倒计时效果的更多相关文章

  1. 【转载】jquery版的网页倒计时效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. jquery网页倒计时效果，秒杀，限时抢购！

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. jQuery CircleCounter的环形倒计时效果

    在线演示1 本地下载 使用jQuery插件CircleCounter生成的环形倒计时效果,这个插件使用HTML5画布生成动画效果,还不错,大家可以试试! 顺带手录制了个代码,大家不吝赐教:http:/ ...

  4. jquery网页倒计时效果，秒杀

    function FreshTime(){ var endtime=new Date('2019-4-12 18:00:00');//结束时间 var nowtime = new Date();//当 ...

  5. 【jquery插件】-网页下雪效果

        又到了年底,从圣诞节开始,可以发现各大网站的活动是越来越多,都变的银装素裹,本人由于业务需求也需要做这么一个效果,所以就通过google大神找了一下相关资源,结果就出现了N种雪花效果的方式.种 ...

  6. 【jQuery】手机验证码倒计时效果

    <ul class="ulist"> <li class="group"> <label class="label&qu ...

  7. javascript实现网页倒计时效果

    一.HTML代码如下: <div class="timer" id="timer"> <span style="color: bla ...

  8. jquery页面多个倒计时效果

    <div class="timeBox" data-times="2019/06/30,23:59:59"> 距结束 <span class= ...

  9. jQuery Countdown Timer 倒计时效果

    这个一款简单的 jQuery 倒计时插件,用于显示剩余的天数,小时,分钟和秒.倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒 ...

随机推荐

  1. 输出内容 document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容

    输出内容(document.write) document.write() 可用于直接向 HTML 输出流写内容.简单的说就是直接在网页中输出内容. 第一种:输出内容用""括起,直 ...

  2. 环信Demo 导入错误

    今天想导入环信的Demo 去看一看环信学习一下 谁知道导入出现这么个问题 Error:(1, 0) Minimum supported Gradle version is 3.3. Current v ...

  3. js怎样把URL链接的参数截取出来

    有时候,A页面参数需要传递到B页面,则把参数拼接到跳转B页面的url上,这时怎样在另一个页面截取A页面传递的参数呢,主要代码如下 /** * 获取指定的URL参数值 URL:http://www.qu ...

  4. UVALive-3722 留个坑，为什么费马小定理求逆元不对？？

    #include <iostream> #include <cstdlib> #include <queue> #include <algorithm> ...

  5. [ javasript ] javascript中的each遍历!

    1.数组中的each var arr = [ "one", "two", "three", "four"]; $.eac ...

  6. Vim操作 -- 按列

    1, 拷贝行 Y y 拷贝当前光标字符 如果需要拷贝整个单词,可以用 ye,e表示跳到词尾 2, 粘贴 P(大写) 粘贴到光标前 p(小写)粘贴到光标后 3, 进入快操作模式 ctrl+q 4, 用 ...

  7. [JZOJ1320] 【Usaco2009 gold 】拯救奶牛

    题目 题目大意 一个三角形的网格图,三角形与其有共同边的三角形相连. 起点到所有终点的最短距离. 思考历程 数据看起来还挺大的,所以不是什么图论算法. 这显然是一个结论题. 什么结论? 然后我就开始推 ...

  8. 新一代云WAF：防御能力智能化，用户享有规则“自主权”

    近日,在国际权威分析机构Frost & Sullivan发布的<2017年亚太区Web应用防火墙市场报告>中,阿里云以市场占有率45.8%的绝对优势连续两年领跑大中华区云WAF市场 ...

  9. js实现iframe刷新

    今天要用到iframe的框架刷新,在网上找到了关于这方面内容,整理如下: (1)一般页面的刷新——reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForc ...

  10. 操作系统-CPU调度

    概念 控制.协调多个进程对CPU的竞争 即按一定的调度算法从就绪队列中选择一个进程,把CPU的使用权交给被选中的进程 场景 N个进程就绪,等待上M(M>=1)个CPU运行,需要决策哪个进程分配给 ...