精美jquery 翻页倒计时实现程序

先看看我们的效果图片如下

下面看jquery+js的代码，我们这里不提供jquery库文件下载，大家可以官网去下载

 代码如下 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 <title>翻页倒计时</title>
 <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
 <script src="jquery.countdown.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 jQuery(function($) {
  $('#counter').countdown({
   image: 'img/digits.png',
   startTime: '01:12:12:00'
  });

  $('#counter_2').countdown({
   image: 'img/digits.png',
   startTime: '00:02',
   format: 'mm:ss',
   timerEnd: function(){
    $("#test").html("倒数结束！").fadeIn(500);
   }
  });
 });
 </script>
 <style type="text/css">
  .cntSeparator { font-size: 54px; padding: 10px 7px; color: #000; width: 26px; }
  
  .desc { margin: 7px 3px; overflow: hidden; zoom: 1; }
  .desc div { float: left; width: 110px; margin-right: 40px; font-size: 14px; text-align: center; }
  .cntDigit,
  .cntSeparator { position: absolute; }
  
  #counter,
  #counter_2 { position: relative; }
  #test { display: none; border: #FC0 1px solid; background-color: #FFFAE3; padding: 5px 10px; margin: 20px 0; line-height: 24px; font-size: 14px; }
  
  .cnt_0 { left: 0; }
  .cnt_1 { left: 55px; }
   .cnt_2 { left: 110px; }
  .cnt_3 { left: 150px; }
  .cnt_4 { left: 205px; }
   .cnt_5 { left: 260px; }
  .cnt_6 { left: 300px; }
  .cnt_7 { left: 355px; }
   .cnt_8 { left: 410px; }
  .cnt_9 { left: 450px; }
  .cnt_10 { left: 505px; }
 </style>
</head>
<body>

 <div id="counter"></div>
 <div class="desc">
  <div>天</div>
  <div>小时</div>
  <div>分钟</div>
  <div>秒</div>
 </div>
 <br />
 <br />
 <br />
 
 <div id="counter_2"></div>
 <div class="desc">
  <div>分钟</div>
  <div>秒</div>
 </div>
 <div id="test"></div>
 
</body>
</html>

jquery.countdown.js

 代码如下 复制代码

jQuery.fn.countdown = function(userOptions) {
 // Default options
 var options = {
  stepTime: 60,
  format: "dd:hh:mm:ss",
  startTime: "01:12:32:55",
  digitImages: 6,
  digitWidth: 53,
  digitHeight: 77,
  timerEnd: function() {},
  image: "digits.png"
 };
 var digits = [],
 interval;

 var createDigits = function(where) {
  var c = 0;
  for (var i = 0; i < options.startTime.length; i++) {
   if (parseInt(options.startTime.substring(i, i + 1)) >= 0) {
    elem = $('<div class="cntDigit cnt_' + i + '" />').css({
     height: options.digitHeight * options.digitImages * 10,
     float: 'left',
     backgroundImage: 'url('' + options.image + '')',
     width: options.digitWidth
    });
    digits.push(elem);
    margin(c, -((parseInt(options.startTime.substring(i, i + 1)) * options.digitHeight * options.digitImages)), true);
    digits[c].__max = 9;
    
    switch (options.format.substring(i, i + 1)) {
    case 'h':
     digits[c].__max = (c % 2 == 0) ? 2 : 9;
     if (c % 2 == 0) digits[c].__condmax = 4;
     break;
    case 'd':
     digits[c].__max = 9;
     break;
    case 'm':
    case 's':
     digits[c].__max = (c % 2 == 0) ? 5 : 9;
    }++c;
   } else elem = $('<div class="cntSeparator cnt_' + i + '"/>').css({
    float: 'left'
   }).text(options.startTime.substring(i, i + 1));

   where.append(elem)
  }
 };

 var margin = function(elem, val, creat) {
  if (val !== undefined) {
   return digits[elem].css({
    'marginTop': val + 'px'
   });
  } else {
   return parseInt(digits[elem].css('marginTop').replace('px', ''));
  }
 };

 var moveStep = function(elem) {
  digits[elem]._digitInitial = -(digits[elem].__max * options.digitHeight * options.digitImages);
  return function _move() {
   mtop = margin(elem) + options.digitHeight;
   if (mtop == options.digitHeight) {
    margin(elem, digits[elem]._digitInitial);
    if (elem > 0) moveStep(elem - 1)();
    else {
     clearInterval(interval);
     for (var i = 0; i < digits.length; i++) margin(i, 0);
     options.timerEnd();
     return;
    }
    if ((elem > 0) && (digits[elem].__condmax !== undefined) && (digits[elem - 1]._digitInitial == margin(elem - 1))) margin(elem, -(digits[elem].__condmax * options.digitHeight * options.digitImages));
    return;
   }

   margin(elem, mtop);
   if (margin(elem) / options.digitHeight % options.digitImages != 0) setTimeout(_move, options.stepTime);

   if (mtop == 0) digits[elem].__ismax = true;
  }
 };

 $.extend(options, userOptions);
 this.css({
  height: options.digitHeight,
  overflow: 'hidden'
 });
 createDigits(this);
 interval = setInterval(moveStep(digits.length - 1), 1000);
};
时间： 2024-10-04 03:30:55

精美jquery 翻页倒计时实现程序的相关文章

jQuery 翻页组件yunm.pager.js实现div局部刷新的思路_jquery

 前端的翻页插件有很多,bootstrap的翻页界面看起来就不错,做起来也易于上手,但应用于项目中的翻页实现还有有几个难点,分别是: 如何封装一个翻页插件,如题中的yunm.pager.js. 涉及到的div局部刷新该如何做. 在没给大家介绍正文之前,先给大家展示下效果图,如果感觉还不错,请继续往下阅读: 翻页的总体流程涉及到的知识点很多,这篇文章我们也主要来关注以上两点,其余的内容,请自悟. 一.如何定义局部刷新的div 翻页时,我们一般只会刷新页面中涉及到翻页的父级div,那么该如何定义呢?

封装的jquery翻页滚动(示例代码)_jquery

HTML结构: 复制代码 代码如下: ul._rollSe{width:100px;height:300px;over-flow:hidden}  ul._rollSe li._rollPar{height:100px;border:1px solid #369}  复制代码 代码如下: <div class="_rollParent">  <ul class="_rollPageSe">  <li class="_rollp

使用jQuery.fn自定义jQuery翻页插件_jquery

第一次写jQuery插件.自己感觉写的也不怎么样.写jQuery插件利用的就是这个东东 jQuery.fn,例如 复制代码 代码如下: jQuery.fn.pluginName=function(){}; 这个是我写的分页插件的样子 插件通过一个外放的函数来进行翻页操作,无论是点击前进.后退.还是改变页面大小,都会调用该函数. 先看看插件的代码结构 复制代码 代码如下: (function ($) { //存放插件所需的属性字段 var PagerFields = { }; //插件的私有函数

jquery+css3问卷答题卡翻页动画效果示例_jquery

CSS3+jQuery制作立体翻页时间展示动画特效.该翻页插件的外观非常华丽喜庆,非常适合产品活动或者育儿网站使用. 这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatib

jquery实现键盘左右翻页特效_jquery

jquery键盘左右翻页,jquery键盘方向键翻页功能,当无上一篇或者下一篇的时候,按键盘将会没什么反应,避免错误跳转. HTML代码 <p>上一篇:<a id='pre' href='http://www.daimajiayuan.com/sitejs-17294-1.html'>一款随滚动条下滑左右渐入的页面布局</a> </p> <p>下一篇:<a id='next' href='http://www.daimajiayuan.co

jquery带翻页动画的电子杂志代码分享_jquery

这是一款基于jquery实现的带翻页动画的电子杂志,小编有时就在想我们读的纸质课本可不可以都改成电子书,这要是不是会更节省资源呐? 记得以前我们有介绍过不少书本翻页的动画,比如这款CSS3书本翻页动画,制作就非常逼真.今天要分享的这款jQuery书本翻页3D动画功能更加强大,可以支持任意数量页的翻阅,并且也有非常美观的视觉效果.书本的内容支持任意HTML元素,相当灵活. 运行效果图                         --------------------------------查

函数型显示翻页连接

翻页|函数|显示|翻页|函数 这个程序将显示翻页连接功能单独抽出,而不涉及其它操作,可内置翻页效果,方便灵活. pagehanshu.asp<%'设置页码及URL'value1 翻页地址 'value2 page的值 'value3 地址标签 eg:第一页.下一页'value4 根据vaule1而定'如果 value1 = "page.asp" 时,value4 = 1; value1 = "page.asp?id=1" 时,value4 = 0; funct

求php的mssql翻页程序！

程序|翻页 PHP代码:-------------------------------------------------------------------------------- <html><head><title>PHP分页</title></head><body><?//为了便于理解和更快地应用到工作中去,我们以MS SQL Server的NorthWind数据库Customers表为例. $pageSize= 4;

使用ASP.NET AJAX和JQuery一起解决翻页选择的问题

1. 前言 开发项目中经常会遇到要求用户选择列表中数据的问题,例如选择允许参加某个活动 的用户.选择允许参加某个项目的省市或地区,在数据量较小的情况下,我们可以把所有数据使用任何一 种数据绑定控件显示出来并在每一个数据项前面显示复选框,但在数据量比较大时同时显示全部数据显然 不太合适,我们首先考虑到的是使用分页.但是在使用分页后问题也随之而来,如何在切换分页时同时保 持已选中项目,有些开发人员可能使用服务器端代码编写保存在Session中,这种方式最大的弊端在于每 次都向服务器端提交,并且由于这