jquery倒计时插件
- 1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 2.<html xmlns="http://www.w3.org/1999/xhtml">
- 3.<head>
- 4.<title></title><!--http://www.cssrain.cn/demo/jquery-ui-tab/jquery-1.3.1.js-->
- 5.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- 6.<script src="jquery-1.4.2.js" type="text/javascript"></script>
- 7.<script src="time.js" type="text/javascript"></script>
- 8.<script>
- 9.$(function(){
- 10./***** 测试1 ****/
- 11.// 开始 && 重新开始
- 12.$("#start").click(function(){
- 13. $("#test").CRcountDown({
- 14. startNumber:15,
- 15. callBack:test
- 16. })
- 17. .css("color","red");
- 18.});
- 19.// 暂停
- 20.$("#pause").click(function(){
- 21. $("#test").pause();
- 22.});
- 23.// 暂停后 重新开始
- 24.$("#again").click(function(){
- 25. $("#test").reStart();
- 26.});
- 27.function test(){
- 28. $("<p>1</p>")
- 29. .hide()
- 30. .fadeIn(1000)
- 31. .appendTo("body");
- 32.}
- 33.
- 34./***** 测试2 ****/
- 35.// 开始 && 重新开始
- 36.$("#start2").click(function(){
- 37. $("#test2").CRcountDown({
- 38. startNumber:10,
- 39. callBack:test2
- 40. })
- 41. .css("color","blue");
- 42.});
- 43.// 暂停
- 44.$("#pause2").click(function(){
- 45. $("#test2").pause();
- 46.});
- 47.// 暂停后 重新开始
- 48.$("#again2").click(function(){
- 49. $("#test2").reStart();
- 50.});
- 51.function test2(){
- 52. $("<p>2</p>")
- 53. .hide()
- 54. .fadeIn(1000)
- 55. .appendTo("body");
- 56.}
- 57.
- 58.})
- 59.</script>
- 60.</head>
- 61.<body>
- 62.<h1>测试1：</h1>
- 63.<button id="start" >开始&&重新开始</button>
- 64.<button id="pause" >暂停</button>
- 65.<button id="again" >暂停后 重新开始</button>
- 66.<div id="test" ></div>
- 67.
- 68.<br/>
- 69.<h1>测试2：</h1>
- 70.<button id="start2" >开始&&重新开始</button>
- 71.<button id="pause2" >暂停</button>
- 72.<button id="again2" >暂停后 重新开始</button>
- 73.<div id="test2" ></div>
- 74.
- 75.<br/><br/>
- 76.Dev by cssrain
- 77.
- 78.
- 79.</body>
- 80.</html>
- <!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><!--http://www.cssrain.cn/demo/jquery-ui-tab/jquery-1.3.1.js-->
- <meta. http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script. src="jquery-1.4.2.js" type="text/javascript"></script>
- <script. src="time.js" type="text/javascript"></script>
- <script>
- $(function(){
- /***** 测试1 ****/
- // 开始 && 重新开始
- $("#start").click(function(){
- $("#test").CRcountDown({
- startNumber:15,
- callBack:test
- })
- .css("color","red");
- });
- // 暂停
- $("#pause").click(function(){
- $("#test").pause();
- });
- // 暂停后 重新开始
- $("#again").click(function(){
- $("#test").reStart();
- });
- function test(){
- $("<p>1</p>")
- .hide()
- .fadeIn(1000)
- .appendTo("body");
- }
- /***** 测试2 ****/
- // 开始 && 重新开始
- $("#start2").click(function(){
- $("#test2").CRcountDown({
- startNumber:10,
- callBack:test2
- })
- .css("color","blue");
- });
- // 暂停
- $("#pause2").click(function(){
- $("#test2").pause();
- });
- // 暂停后 重新开始
- $("#again2").click(function(){
- $("#test2").reStart();
- });
- function test2(){
- $("<p>2</p>")
- .hide()
- .fadeIn(1000)
- .appendTo("body");
- }
- })
- </script>
- </head>
- <body>
- <h1>测试1：</h1>
- <button id="start" >开始&&重新开始</button>
- <button id="pause" >暂停</button>
- <button id="again" >暂停后 重新开始</button>
- <div id="test" ></div>
- <br/>
- <h1>测试2：</h1>
- <button id="start2" >开始&&重新开始</button>
- <button id="pause2" >暂停</button>
- <button id="again2" >暂停后 重新开始</button>
- <div id="test2" ></div>
- <br/><br/>
- Dev by cssrain
- </body>
- </html>
- time.js的代码:
- Time.js的代码代码
- 1.$(function(){
- 2.jQuery.fn.countDown = function(settings,to) {
- 3. if(!to && to != settings.endNumber) { to = settings.startNumber; }
- 4. this.data("CR_currentTime",to);
- 5. $(this).text(to).animate({"none":"none"},settings.duration,'',function() {
- 6. if(to > settings.endNumber + 1) {
- 7. $(this).countDown(settings,to - 1);
- 8. }else{
- 9. settings.callBack(this);
- 10. }
- 11. });
- 12. return this;
- 13.};
- 14.//计时&&重新计时
- 15.jQuery.fn.CRcountDown = function(settings) {
- 16. settings = jQuery.extend({
- 17. startNumber: 10,
- 18. endNumber: 0,
- 19. duration: 1000,
- 20. callBack: function() { }
- 21. }, settings);
- 22. this.data("CR_duration",settings.duration);
- 23. this.data("CR_endNumber",settings.endNumber);
- 24. this.data("CR_callBack",settings.callBack);
- 25. return this.stop().countDown(settings);
- 26.};
- 27.//计时暂停
- 28.jQuery.fn.pause = function(settings) {
- 29. return this.stop();
- 30.};
- 31.//暂停后，重新开始
- 32.jQuery.fn.reStart = function() {
- 33. return this.pause().CRcountDown({
- 34. startNumber : this.data("CR_currentTime"),
- 35. duration : this.data("CR_duration"),
- 36. endNumber : this.data("CR_endNumber"),
- 37. callBack : this.data("CR_callBack")
- 38. });
- 39.};
- 40.
- 41.})
复制代码
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论