<!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. Nand Flash 控制器中的硬件 ECC 介绍

    ECC 产生方法 ECC 是用于对存储器之间传送数据正确进行校验的一种算法,分硬件 ECC 和软件 ECC 算法两种,在 S3C2410 的 Nand Flash 控制器中实现了由硬件电路(ECC 生 ...

  2. 判断JS对象是否为空的几种方式

    .将json对象转化为json字符串,再判断该字符串是否为"{}" var data = {}; var b = (JSON.stringify(data) == "{} ...

  3. SpringCloud之Fegin学习笔记

    以下部分内容来源于网络摘抄~ 1.作用 Feign 是一种声明式.模板化的 HTTP 客户端.在 Spring Cloud 中使用 Feign,可以做到使用 HTTP 请求访问远程服务,就像调用本地方 ...

  4. swiper 插件里面嵌套可滚动内容

    在移动端使用swiper的整屏滚动,如果slide里面有滚动内容的话,滚动的时候会整个页面一起滚动,如果想里面的滚动区域单独滚动的话,可以在初始化swiper的时候添加上 noSwipingClass ...

  5. htaccess apache重定向学习

    1.推荐博客:http://www.cnblogs.com/adforce/archive/2012/11/23/2784664.html 2.测试工具:https://htaccess.madewi ...

  6. 微信小程序 button 按钮所有默认的样式

    小程序默认样式 // 默认样式 button { position:relative; display:block; margin-left:auto; margin-right:auto; padd ...

  7. MyEclipse使用总结——在MyEclipse中新建Maven框架的web项目[转]

    前面的文章我们已经在本机安装好了maven,同时在myeclipse中配置好了maven的插件. 链接如下: Maven安装----在Windows上安装Maven myeclipse安装maven插 ...

  8. Android基础控件ProgressBar进度条的使用

    1.简介 ProgressBar继承与View类,直接子类有AbsSeekBar和ContentLoadingProgressBar, 其中AbsSeekBar的子类有SeekBar和RatingBa ...

  9. Python学习day41-数据库(1)

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  10. 05_jQuery对象初识(三)登录案例

    1.案例需求:点击登录按钮验证用户名和密码都不为空,为空就在对应的input标签下面显示一个错误的提示信息. 1.给登录的按钮绑定点击事件 2.点击事件要做的事情 1.找到input标签.取值.判断是 ...