zoukankan      html  css  js  c++  java
  • 使用jQuery开发一个超酷的倒计时效果

    使用jQuery开发一个超酷的倒计时效果

    在线演示 在线下载

    今天我们分享一篇来自tutorialzine的教程,本文将使用jQuery开发一个超酷的倒计时效果插件,使用这个插件你可以生成一个非常炫的倒计时器,你可以方便的整合到你需要的web功能模块中,希望大家喜欢!

    <div id="countdown" class="countdownHolder">
    <span class="countDays">
    <span class="position">
    <span class="digit static"></span>
    </span>
    <span class="position">
    <span class="digit static"></span>
    </span>
    </span>

    <span class="countDiv countDiv0"></span>

    <span class="countHours">
    <span class="position">
    <span class="digit static"></span>
    </span>
    <span class="position">
    <span class="digit static"></span>
    </span>
    </span>

    <span class="countDiv countDiv1"></span>

    <span class="countMinutes">
    <span class="position">
    <span class="digit static"></span>
    </span>
    <span class="position">
    <span class="digit static"></span>
    </span>
    </span>

    <span class="countDiv countDiv2"></span>

    <span class="countSeconds">
    <span class="position">
    <span class="digit static"></span>
    </span>
    <span class="position">
    <span class="digit static"></span>
    </span>
    </span>

    <span class="countDiv countDiv3"></span>
    </div>

    以下代码将演示如何调用上述插件:

    $(function(){

    var note = $('#note'),
    ts = new Date(2012, 0, 1),
    newYear = true;

    if((new Date()) > ts){
    // The new year is here! Count towards something else.
    // Notice the *1000 at the end - time must be in milliseconds
    ts = (new Date()).getTime() + 10*24*60*60*1000;
    newYear = false;
    }

    $('#countdown').countdown({
    timestamp : ts,
    callback : function(days, hours, minutes, seconds){

    var message = "";

    message += days + " day" + ( days==1 ? '':'s' ) + ", ";
    message += hours + " hour" + ( hours==1 ? '':'s' ) + ", ";
    message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and ";
    message += seconds + " second" + ( seconds==1 ? '':'s' ) + " <br />";

    if(newYear){
    message += "left until the new year!";
    }
    else {
    message += "left to 10 days from now!";
    }

    note.html(message);
    }
    });

    });

    代码书写完毕!

  • 相关阅读:
    Centos 端口被占用,kill被占用的进程
    Centos7 docker安装GitLab
    MongoDB 3.6.1集群部署
    MySql时区修改
    Springboot默认定时任务——Scheduled注解
    Nacos Docker集群部署
    docker-compose使用
    docker部署redis集群
    设置Redis集群访问密码(不停机设置)
    AWS SNS 创建 订阅 发布
  • 原文地址:https://www.cnblogs.com/gbin1/p/2313788.html
Copyright © 2011-2022 走看看