首页 手机软件 手机游戏 单机游戏 资讯文章 专题下载 游戏合集 文章合集 php下载 php教程 电脑软件
+ -
当前位置：首页 → 问答吧 → 求帮忙改个倒计时JS效果，方便做促销(新)

求帮忙改个倒计时JS效果，方便做促销(新)

时间：2010-06-02

来源：互联网

想做个手动促销效果，搜到了这个贴，不过跟我想的还有点不同，希望大侠出现帮我改改，不甚感激
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>title</title> <style type="text/css"> div { margin: 5px; padding: 3px; border: 1px solid green; background-color: #ccc; } div span { font-size: 12px; color: black; } </style> </head> <body> <div id="div0" style="background:#FFFF00"><b>[时间表最好单独放出来方便摆放位置]</b>时间到本DIV隐藏</div> <div id="div1" style="background:#FFFFCC"><b>[时间表最好单独放出来方便摆放位置]</b>上1个DIV到时间这个DIV显示</div> <div id="div2" style="background:#FFCCFF"><b>[时间表最好单独放出来方便摆放位置]</b>上1个DIV到时间这个DIV显示</div> <div id="div3" style="background:#99FFFF"><b>[时间表最好单独放出来方便摆放位置]</b>上1个DIV到时间这个DIV显示</div> <script type="text/javascript"> <!-- function t2s(t) { var s = t.replace(/(\d+):(\d+):(\d+)/, function ($0, $1, $2, $3) { return parseInt($1) * 3600 + parseInt($2) * 60 + parseInt($3) }); return isNaN(s) ? 0 : s; } function s2t(n) { var s, m, h; if (isNaN(n) || n < 0) return ""; s = n % 60; n = (n - s) / 60; m = n % 60; h = (n - m) / 60; return (h < 10 ? "0" : "") + h + ":" + (m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s; } function Timer(container, id, time, func) { var span = document.createElement("span"); container = container || document.body; container.appendChild(span); span.id = id; span.time = t2s(time); span.innerText = time; Timer.reg(span, func); } Timer.id = null; Timer.list = []; Timer.reg = function (item, func) { Timer.list[Timer.list.length] = {"item": item, "func": func}; if (null == Timer.id) Timer.id = window.setTimeout(Timer.func, 1000); } Timer.func = function () { var i, n, o; if (Timer.list.length > 0) { Timer.id = window.setTimeout(Timer.func, 1000); for (i = Timer.list.length - 1; i >= 0; i--) { o = Timer.list[i]; o.item.innerText = s2t(--o.item.time); if (o.item.time == 0) { Timer.list.splice(i, 1); if (o.func) o.func.call(o.item); } } } if (Timer.list.length == 0) { window.clearTimeout(Timer.id); Timer.id = null; } } var ids = [1, 2, 3, 4]; var times = ["00:00:8", "00:00:15", "00:00:20", "00:00:25"]; var func = function () { this.innerText = "time out"; }; for (var i = 0; i < ids.length; i++) Timer(document.getElementById("div" + i), ids[i], times[i], func); //--> </script> </body> </html>
 提示：您可以先修改部分代码再运行
有几个小小的要求就是上面这几个层当到时间了可以按照顺序显示方便放不同的促销商品，
还有前面再加多个天数
另外测试了下火狐浏览器不显示倒计时表，IE6.IE7正常
多谢了！
原帖在这里
http://bbs.blueidea.com/thread-2838161-1-1.html

[ 本帖最后由 caiys203 于 2010-6-4 11:18 编辑 ]

作者: caiys203   发布时间: 2010-06-02

没人哦。自己顶顶，这功能挺好的，希望懂的大侠指定一二

作者: caiys203   发布时间: 2010-06-03

帮你顶一个。

作者: togoog   发布时间: 2010-06-04

这个我也不会，帮你顶个

作者: shbijiben   发布时间: 2010-06-04

引用:
有几个小小的要求就是上面这几个层当到时间了可以按照顺序显示方便放不同的促销商品
什么叫  当时间到了 上面的层可以按照顺序显示??什么顺序,顺序何来?

作者: faeng220   发布时间: 2010-06-04

就是说比如1这个图层的倒计时到了就显示2这个图层，2到时间了就显示3这个图层

作者: caiys203   发布时间: 2010-06-04

那你同时显示的有几个???
1 显示的是 2,3不显示?
2 显示的时候1,3不显示?

作者: faeng220   发布时间: 2010-06-04

对，就是这样哦，可以自己往后面加4,5,6就更好了

作者: caiys203   发布时间: 2010-06-04


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <title>title</title> <style type="text/css"> div { margin: 5px; padding: 3px; border: 1px solid green; background-color: #ccc; } div span { font-size: 12px; color: black; } </style> <script type="text/javascript"> (function() { var window = this, cd = window.ckCountDown = {}; cd = ckCountDown = function() { this.initialize.apply(this, arguments); }; cd.author = '[email protected]|QQ:31474361'; cd.prototype = { initialize: function(opt) { var defaults = { startTime: 0, stopTime: 0, duration: 60 * 1000, countSpeed: 1000, start: this.k, pause: this.k, complete: this.k, count: this.k, trend: 1 }; this.options = opt = extend(defaults, opt); this.startTime = (opt.startTime.getTime ? opt.startTime : (new Date)).getTime(); this.stopTime = opt.stopTime.getTime ? opt.stopTime.getTime() : null; this.trend = this.stopTime ? (this.stopTime - this.startTime) : opt.trend; this.trend = this.trend > 0 ? 1 : this.trend < 0 ? -1 : this.trend; this.duration = this.stopTime ? parseInt(this.stopTime - this.startTime) : opt.duration; this.stopTime = opt.stopTime ? opt.stopTime : new Date(this.startTime + opt.duration * this.trend); this.currentTime = this.startTime; this.now = function() { return (new Date).getTime(); }; this.lastNow = this.now(); this.interval = 0; this.elapse = 0; }, _cdTime: function() { return { time: this.currentTime, elapse: this.elapse, cdTime: this.duration - this.elapse }; }, _count: function() { this.elapse += this.now() - this.lastNow; this.currentTime = this.startTime + this.elapse * this.trend; this.lastNow = this.now(); if (this.elapse >= this.duration) { this.elapse = this.duration; this.currentTime = this.stopTime; this.stop(); } this.options.count.call(this, this._cdTime()); }, start: function() { var _this = this; this.elapse = 0; this.lastNow = this.now(); this.interval = setInterval(function() { _this._count(); }, this.options.countSpeed); this.options.start.call(this, this._cdTime()); }, pause: function() { clearInterval(this.interval); this.options.pause.call(this, this._cdTime()); }, continute: function() { var _this = this; this.interval = setInterval(function() { _this._count(); }, this.options.countSpeed); }, stop: function() { this.pause(); this.elapse = this.duration; this.options.complete.call(this, this._cdTime()); }, setCurrentDate: function(date) { this.currentTime = date.getTime() }, onStart: function(fn) { this.options.start = fn; }, onPause: function(fn) { this.options.pause = fn; }, onComplete: function(fn) { this.options.complete = fn; }, onCount: function(fn) { this.options.count = fn; }, k: function() { } }; function extend(o, u) { var n = {}; for (var k in o) n[k] = o[k]; for (var k in u) n[k] = u[k]; return n; } /** * @constructor DateFormatter * @author [email protected]|QQ:31474361 * @version 1.0 */ window.DateFormatter = function(expr) { var wd = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], M = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], utc = false, am = 'AM', pm = 'PM', y, m, j, d, h, i, s, e; this.format = function(t) { if (!t.getTime) { return false; } y = utc ? t.getUTCFullYear() : t.getFullYear(); m = utc ? t.getUTCMonth() : t.getMonth(); j = utc ? t.getUTCDate() : t.getDate(); d = utc ? t.getUTCDay() : t.getDay(); h = utc ? t.getUTCHours() : t.getHours(); i = utc ? t.getUTCMinutes() : t.getMinutes(); s = utc ? t.getUTCSeconds() : t.getSeconds(); e = utc ? t.getUTCMilliseconds() : t.getMilliseconds(); a = h < 12 ? am : pm; return expr.replace(/\/0?[\w\/]{1}/g, function() { switch (arguments[0]) { case '/Y': return '' + y; case '/y': return ('' + y).replace(/\d*(\d{2})/, '$1'); case '/0m': return '' + ((m < 9 ? '0' + (m + 1) : (m + 1))); case '/m': return '' + (m + 1); case '/M': return M[m]; case '/0j': return '' + (j < 10 ? '0' + j : j); case '/j': return '' + j; case '/d': return '' + d; case '/D': return wd[d]; case '/0H': return '' + (h < 10 ? '0' + h : h); case '/H': return '' + h; case '/0h': h = h > 12 ? h - 12 : h; return '' + (h < 10 ? '0' + h : h); case '/h': return h > 12 ? h - 12 : h; case '/0i': return '' + (i < 10 ? '0' + i : i); case '/i': return '' + i; case '/0s': return '' + (s < 10 ? '0' + s : s); case '/s': return '' + s; case '/0e': return '' + (e < 10 ? '00' + e : (e < 100 ? '0' + e : e)); case '/e': return '' + e; case '/a': return '' + a; case '//': return '/'; default: return arguments[0]; } }); }; this.isUTC = function(u) { return typeof (u) == 'boolean' ? (utc = u) : utc; } this.AM = function(a) { a = '' + a; am = a ? a : am; return am; }; this.PM = function(p) { p = '' + p; pm = p ? p : pm; return pm; }; this.weekdays = function() { return _confg(arguments, 'wd', 7); }; this.months = function() { return _confg(arguments, 'M', 12); } function _confg(args, vrb, s) { var a1 = args[0], a2 = args[1]; if (args.length > 2) { return false; } switch (typeof (a1)) { case 'undefined': return eval(vrb); case 'object': if (a1.length != s || typeof (a1[0]) == 'undefined') { return false; } for (var i = 0, l = a1.length; i < l; i++) { eval(vrb + '[i] = a1[i];'); } break; case 'number': return (typeof (a2) != 'undefined' ? false : eval(vrb + '[a1]')); case 'string': if (typeof (a2) != 'number' || typeof (eval(vrb + '[a2]')) == 'undefined') { return false; } eval(vrb + '[a2] = a1;'); } return true; } }; })(); </script> </head> <body> <div id="div0" style="background:#FFFF00"><b id="timer0">[时间表最好单独放出来方便摆放位置]</b></div> <div id="div1" style="background:#FFFFCC"><b id="timer1">[时间表最好单独放出来方便摆放位置]</b></div> <div id="div2" style="background:#FFCCFF"><b id="timer2">[时间表最好单独放出来方便摆放位置]</b></div> <div id="div3" style="background:#99FFFF"><b id="timer3">[时间表最好单独放出来方便摆放位置]</b></div> </body> <script type="text/javascript"> function $(id){ return document.getElementById(id); } var div0 = $('div0'),div1 = $('div1'),div2 = $('div2'),div3 = $('div3'), timer0 = $('timer0'), timer1 = $('timer1'), timer2 = $('timer2'), timer3 = $('timer3'); var cd_a = new ckCountDown({ duration: 30*1000, // 持续30秒 trend: -1, // [-1,1] 倒计数 countSpeed: 10 // 计数速度 0.01秒 }); var df1 = new DateFormatter('倒计时：/0H时/0i分/0s秒/0e'); // 创建格式器 df1.isUTC(true); cd_a.onCount( function(t){ // 计数时触发 timer0.innerHTML = df1.format( new Date(t.cdTime) ); }); cd_a.onComplete( function(t){ //计数结束时触发 timer1.innerHTML = "时间A到，可以把我隐藏了"; }); cd_a.start(); //设置完成，开始计时A /* 计时器B */ var cd_b = new ckCountDown({ stopTime: new Date(2012,11,31), //结束时间 2012年12月31日, 0是1月, 11指12月 countSpeed: 1000 }); var df2 = new DateFormatter('距离/Y年/0m月/0j日还有：'); cd_b.onCount( function(t){ var _this = this; var cd = Math.floor(t.cdTime/1000), second = cd%60, minute = Math.floor(cd/60)%60, hour = Math.floor(cd/3600)%24, day = Math.floor(cd/(3600*24)); timer2.innerHTML = [df2.format( new Date(_this.stopTime) ),day,'天',hour,'小时',minute,'分',second,'秒'].join(''); }); timer3.innerHTML = '慢慢等吧....' cd_b.start(); </script> </html>
 提示：您可以先修改部分代码再运行
给你写了两个类
ckCountDown
DateFormatter (以前在蓝色写过它的用法，嘿嘿，现在找不到了页面了)
关键代码：
复制内容到剪贴板
代码:
<script type="text/javascript">
    function $(id){ return document.getElementById(id); }
    var div0 = $('div0'),div1 = $('div1'),div2 = $('div2'),div3 = $('div3'),
        timer0 = $('timer0'), timer1 = $('timer1'), timer2 = $('timer2'), timer3 = $('timer3');
    var cd_a = new ckCountDown({
            duration: 30*1000, // 持续30秒
            trend: -1, // [-1,1] 倒计数
            countSpeed: 10 // 计数速度 0.01秒
        });
    var df1 = new DateFormatter('倒计时：/0H时/0i分/0s秒/0e'); // 创建格式器
        df1.isUTC(true);
    cd_a.onCount( function(t){ // 计数时触发
        timer0.innerHTML = df1.format( new Date(t.cdTime) );
    });
    cd_a.onComplete( function(t){ //计数结束时触发
        timer1.innerHTML = "时间A到，可以把我隐藏了";
    });
    cd_a.start(); //设置完成，开始计时A
    
    /* 计时器B */
    var cd_b = new ckCountDown({
            stopTime: new Date(2012,11,31), //结束时间 2012年12月31日, 0是1月, 11指12月
            countSpeed: 1000
        });
    var df2 = new DateFormatter('距离/Y年/0m月/0j日还有：');
    cd_b.onCount( function(t){
        var _this = this;
        var cd = Math.floor(t.cdTime/1000),
            second = cd%60,
            minute = Math.floor(cd/60)%60,
            hour = Math.floor(cd/3600)%24,
            day = Math.floor(cd/(3600*24));
        timer2.innerHTML = [df2.format( new Date(_this.stopTime) ),day,'天',hour,'小时',minute,'分',second,'秒'].join('');
    });
    timer3.innerHTML = '慢慢等吧....'
    cd_b.start();
</script>

作者: carkey712   发布时间: 2010-06-04

DateFormatter API：
http://bbs.blueidea.com/viewthre ... p;extra=#pid4715764

作者: carkey712   发布时间: 2010-06-04

这个好像跟我的需求不同哦，，，，不过还是多谢你的热心

作者: caiys203   发布时间: 2010-06-04

简单说下
ckCountDown
参数：{
     startTime: 0, // 开始时间Date: new Date(2010,5,1)
     stopTime: 0,  // 结束时间Date: new Date(2012,11,31)
     duration: 60 * 1000, // 持续（可选,设定了开始和结束会自动计算）
     countSpeed: 1000, // 计算（刷新）间隔
     trend: 1, // 计数指向 1正计时， -1倒计时（开始和结束若设定了会自动计算）
     start: this.k, //开始计数时，回调 (亦可在事件方法中绑定 cd.onStart( fn )  )
     pause: this.k, //计数暂停时，回调
     complete: this.k, //计数结束时，回调
     count: this.k,  //计数时，回调
}
重要属性：
this.
   [parseTime:] elapse // 已消逝的时间,以毫秒为单位的时间
   [parseTime:] currentTime // 相对于startTime， 计数器的计数到的当前时间
    //new Date( currentTime ), 可转换成Date对象
方法：
start() //从头开始计时
pause() //计数暂停
continute() //继续计数
stop() // 结束计数，触发complete事件
setCurrentTime() //设置计数器当前时间（当前进度）
如： cd.start(); 开始计时
事件：
onCount //计数过程中触发
onStart //开始计数时触发
onPause //计数暂停时触发
onComplete //计数完成时触发
如： cd.onCount( function( t ){
      // 回调的t包含以下属性,都是以毫秒为单位的parseTime串，如同（ alert( (new Date).getTime(); )
      t.time;  // 当前时间
      t.elapse; // 已消逝时间
      t.cdTime; // 剩余时间
      //this.setCurrentTime( t.time ); //这个回调函数里的this是本cdCountDown对象
  });

作者: carkey712   发布时间: 2010-06-04

引用:
原帖由 caiys203 于 2010-6-4 15:36 发表
这个好像跟我的需求不同哦，，，，不过还是多谢你的热心
我晕,框架给你搭好, 能不能自己变通一下啊，修改这里
cd_a.onComplete( function(t){ //计数结束时触发
        timer1.innerHTML = "时间A到，可以把我隐藏了";
        // 这里添加隐藏和显示DIV的代码
    });

作者: carkey712   发布时间: 2010-06-04


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>title</title> <style type="text/css"> div { margin: 5px; padding: 3px; border: 1px solid green; background-color: #ccc; } div span { font-size: 12px; color: black; } </style> </head> <body> <div id="div0" style="background:#FFFF00"><b>[时间表最好单独放出来方便摆放位置]</b>时间到本DIV隐藏</div> <div id="div1" style="background:#FFFFCC"><b>[时间表最好单独放出来方便摆放位置]</b>上1个DIV到时间这个DIV显示</div> <div id="div2" style="background:#FFCCFF"><b>[时间表最好单独放出来方便摆放位置]</b>上1个DIV到时间这个DIV显示</div> <div id="div3" style="background:#99FFFF"><b>[时间表最好单独放出来方便摆放位置]</b>上1个DIV到时间这个DIV显示</div> <script type="text/javascript"> <!-- function t2s(t) { var s = t.replace(/(\d+):(\d+):(\d+)/, function ($0, $1, $2, $3) { return parseInt($1) * 3600 + parseInt($2) * 60 + parseInt($3) }); return isNaN(s) ? 0 : s; } function s2t(n) { var s, m, h; if (isNaN(n) || n < 0) return ""; s = n % 60; n = (n - s) / 60; m = n % 60; h = (n - m) / 60; return (h < 10 ? "0" : "") + h + ":" + (m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s; } function Timer(container, id, time, func) { var span = document.createElement("span"); container = container || document.body; container.appendChild(span); span.id = id; span.time = t2s(time); span.innerText = time; Timer.reg(span, func); } Timer.id = null; Timer.list = []; Timer.reg = function (item, func) { Timer.list[Timer.list.length] = {"item": item, "func": func}; if (null == Timer.id) Timer.id = window.setTimeout(Timer.func, 1000); } Timer.func = function () { var i, n, o; if (Timer.list.length > 0) { Timer.id = window.setTimeout(Timer.func, 1000); for (i = Timer.list.length - 1; i >= 0; i--) { o = Timer.list[i]; o.item.innerText = s2t(--o.item.time); if (o.item.time == 0) { Timer.list.splice(i, 1); if (o.func) o.func.call(o.item); } } } if (Timer.list.length == 0) { window.clearTimeout(Timer.id); Timer.id = null; } } var ids = [1, 2, 3, 4]; var times = ["00:00:8", "00:00:15", "00:00:20", "00:00:25"]; var func = function () { this.innerText = "time out"; this.parentNode.style.display="none"; }; for (var i = 0; i < ids.length; i++) Timer(document.getElementById("div" + i), ids[i], times[i], func); //--> </script> </body> </html>
 提示：您可以先修改部分代码再运行

作者: EraIT   发布时间: 2010-06-04


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>title</title> <style type="text/css"> div { margin: 5px; padding: 3px; border: 1px solid green; background-color: #ccc; } div span { font-size: 12px; color: black; } </style> </head> <body> <div id="div0" style="background:#FFFF00"><b>[时间表最好单独放出来方便摆放位置]</b>时间到本DIV隐藏</div> <div id="div1" style="background:#FFFFCC;display:none"><b>[时间表最好单独放出来方便摆放位置]</b>上1个DIV到时间这个DIV显示</div> <div id="div2" style="background:#FFCCFF;display:none"><b>[时间表最好单独放出来方便摆放位置]</b>上1个DIV到时间这个DIV显示</div> <div id="div3" style="background:#99FFFF;display:none"><b>[时间表最好单独放出来方便摆放位置]</b>上1个DIV到时间这个DIV显示</div> <script type="text/javascript"> <!-- function t2s(t) { var s = t.replace(/(\d+):(\d+):(\d+)/, function ($0, $1, $2, $3) { return parseInt($1) * 3600 + parseInt($2) * 60 + parseInt($3) }); return isNaN(s) ? 0 : s; } function s2t(n) { var s, m, h; if (isNaN(n) || n < 0) return ""; s = n % 60; n = (n - s) / 60; m = n % 60; h = (n - m) / 60; return (h < 10 ? "0" : "") + h + ":" + (m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s; } function Timer(container, id, time, func) { var span = document.createElement("span"); container = container || document.body; container.appendChild(span); span.id = id; span.time = t2s(time); span.innerText = time; Timer.reg(span, func); } Timer.id = null; Timer.list = []; Timer.reg = function (item, func) { Timer.list[Timer.list.length] = {"item": item, "func": func}; if (null == Timer.id) Timer.id = window.setTimeout(Timer.func, 1000); } Timer.func = function () { var i, n, o; if (Timer.list.length > 0) { Timer.id = window.setTimeout(Timer.func, 1000); for (i = Timer.list.length - 1; i >= 0; i--) { o = Timer.list[i]; o.item.innerText = s2t(--o.item.time); if (o.item.time == 0) { Timer.list.splice(i, 1); if (o.func) o.func.call(o.item); } } } if (Timer.list.length == 0) { window.clearTimeout(Timer.id); Timer.id = null; } } var ids = [1, 2, 3, 4]; var ix=1; var times = ["00:00:8", "00:00:15", "00:00:20", "00:00:25"]; var func = function () { this.innerText = "time out"; this.parentNode.style.display=="none"?this.parentNode.style.display="block":this.parentNode.style.display="none"; ix%=ids.length; if(ix){document.getElementById("div" + ix).style.display="block";} ix++; }; for (var i = 0; i < ids.length; i++) Timer(document.getElementById("div" + i), ids[i], times[i], func); //--> </script> </body> </html>
 提示：您可以先修改部分代码再运行

作者: EraIT   发布时间: 2010-06-04

好贴。。顶一下咯。

作者: jgs1982   发布时间: 2010-06-04

15楼的EraIT非常感谢，就是跟我想的效果一样，
不过我想问下时间可以单独做个ID放出来么，
比如
<div id=xx>
<div id=时间>剩余0小时43分34秒</div>
<div>内容</div>
</div>
这样我好用CSS控制它的位置摆放跟样式！

另外9楼的carkey712 也很感谢，可能效果也做出来了，不过我不怎么会改，多谢！

[ 本帖最后由 caiys203 于 2010-6-7 10:17 编辑 ]

作者: caiys203   发布时间: 2010-06-07

另外前面多个参数天，火狐测试时间好像不显示，IE6.IE7正常
能做成这样就完美了

作者: caiys203   发布时间: 2010-06-07

觉得这个代码还不错的同志帮忙顶顶，还有待修正

作者: caiys203   发布时间: 2010-06-08

[quote]原帖由 caiys203 于 2010-6-7 10:03 发表

我也不会改，希望高手们帮忙调一下。

作者: slmily   发布时间: 2010-06-08


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>code.js.cn</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> img{border:none;} .goods,.goods li{margin:0;padding:0;list-style:none;font: 12px/1.5 arial;} .goods li{float:left;display:inline;width:200px;margin:2px;border:1px solid #000;text-align:center} .goods a{display:block;margin:10px;} .goods p{background:#FF8000;color:#fff;margin:0;padding:10px;} </style> </head> <body> <ul class="goods" id="goods"> <li><a href="" ><img src="http://home.blueidea.com/attachment/201006/4/194782_12756430086lIh_t.jpg" alt="" /></a><p time="2010/6/12 12:30:00"></p></li> <li><a href="" ><img src="http://home.blueidea.com/attachment/201006/4/194782_12756430086lIh_t.jpg" alt="" /></a><p time="2010/7/12 15:10:00"></p></li> <li><a href="" ><img src="http://home.blueidea.com/attachment/201006/4/194782_12756430086lIh_t.jpg" alt="" /></a><p time="2010/8/12 20:12:00"></p></li> <li><a href="" ><img src="http://home.blueidea.com/attachment/201006/4/194782_12756430086lIh_t.jpg" alt="" /></a><p time="2010/9/12 17:11:00"></p></li> <li><a href="" ><img src="http://home.blueidea.com/attachment/201006/4/194782_12756430086lIh_t.jpg" alt="" /></a><p time="2010/10/12 4:14:00"></p></li> <li><a href="" ><img src="http://home.blueidea.com/attachment/201006/4/194782_12756430086lIh_t.jpg" alt="" /></a><p time="2010/11/12 3:4:00"></p></li> <li><a href="" ><img src="http://home.blueidea.com/attachment/201006/4/194782_12756430086lIh_t.jpg" alt="" /></a><p time="2010/12/12 1:3:00"></p></li> <li><a href="" ><img src="http://home.blueidea.com/attachment/201006/4/194782_12756430086lIh_t.jpg" alt="" /></a><p time="2010/5/12 23:22:00"></p></li> <li><a href="" ><img src="http://home.blueidea.com/attachment/201006/4/194782_12756430086lIh_t.jpg" alt="" /></a><p time="2010/6/12 5:18:00"></p></li> <li><a href="" ><img src="http://home.blueidea.com/attachment/201006/4/194782_12756430086lIh_t.jpg" alt="" /></a><p time="2010/7/10 1:20:00"></p></li> </ul> </body> <script type="text/javascript"> //<![CDATA[ countDown=function (endTime,el){ var time=new Date(endTime),_cd=this; this.el=typeof el=="string"?document.getElementById(el):el; setInterval(function (){_cd.onchange(_cd.diffToString(time-new Date,1))},1000); }; countDown.prototype={ onchange:function (){}, diffToString:function (num,iscn){ var unit=[8.64E+7,3.6E+6,6E+4,1E+3,1],date=[],cnDate=[]; var cn='\u5929,\u65f6,\u5206,\u79d2,\u6beb\u79d2'.split(','); for(var i=0,l=unit.length;i<l;i++){ date[i]=parseInt(num/unit[i]); cnDate[i]=date[i]+cn[i]; num%=unit[i] }; return iscn?cnDate:date }, onchange:function (oddTimer){ var t=oddTimer.slice(0,-1).join(''); this.el.innerHTML=t.indexOf('-')==-1?'剩余:'+t.replace(/\b\d\b/g,'0$&'):'<del style="color:#3E1F00">已售完</del>'; } }; var ps=document.getElementById('goods').getElementsByTagName('P'); for(var i=0,j;j=ps[i++];){ var t=j.getAttribute('time') if(t){ new countDown(t,j) }; }; //]]> </script> </html>
 提示：您可以先修改部分代码再运行

作者: kfguoguo   发布时间: 2010-06-08

楼上这个很强大，我又多了一种思路来做促销，IE6,IE7,ff都通过测试
收藏先，谢谢！不知道能不能再辛苦一下再改一下，
因为放首页，我是想只出现1个，其他都隐藏，根据倒计时顺序一个个显示出来，
15楼的想法跟我想法非常接近只是时间没有单独弄成ID放出来，FF没通过

[ 本帖最后由 caiys203 于 2010-6-8 16:21 编辑 ]

作者: caiys203   发布时间: 2010-06-08

那你不如ajax请求，这个没啥意思了

作者: kfguoguo   发布时间: 2010-06-08

引用:
原帖由 kfguoguo 于 2010-6-8 16:39 发表
那你不如ajax请求，这个没啥意思了
ajax请求  贴个例子看看!

作者: kj1025   发布时间: 2010-06-09

都是一些代码强人。

作者: 苍狼   发布时间: 2010-06-10

后生可畏啊

作者: birdbird   发布时间: 2010-06-10

9楼、15楼、21楼几位辛苦啦，你们帖出的代码都很不错。

作者: w365   发布时间: 2010-06-10

相关阅读 更多

热门阅读

热门下载

更多
关于本站 免责申明 联系我们

Copyright 2006-2020 php爱好者(phpfans.net) All Rights Reserved.备案号：湘ICP备2023016114号-2

本站为非盈利性网站，不接受任何广告。本站所有资源均由网友上传，如有侵权，请发邮件至 [email protected] phpfans.net