• jQuery倒计时插件


    原文:http://www.cnphp6.com/archives/127252

    jquery.time.js源码如下(源码来自网络):
    (function($){
        $.fn.countDown = function(secs) {
            secs = parseInt(secs);
            var timeId,
                me = $(this),
                HMSObj,
                HMSHtml = '<span><span class="time-border">#HH#</span></span>' +
                    '<span>:</span>' +
                    '<span><span class="time-border">#MM#</span></span>' +
                    '<span>:</span>' +
                    '<span><span class="time-border">#SS#</span></span>';
            var timeId = setInterval(function(){
                HMSObj = $.secsToHMS(secs);
                me.html(HMSHtml.replace('#HH#', HMSObj.H).replace('#MM#', HMSObj.M).replace('#SS#', HMSObj.S));
                secs--;
                if(secs < 0) {
                    clearInterval(timeId);
                }
            }, 1000);
    
        };
        $.extend({
            secsToHMS : function(secs) {
                var H = '00',
                    M = '00',
                    S = '00';
                H = $.formatTimeDouble(parseInt(secs/3600));
                secs %= 3600;
                M = $.formatTimeDouble(parseInt(secs/60));
                secs %= 60;
                S = $.formatTimeDouble(parseInt(secs));
                return {
                    H : H,
                    M : M,
                    S : S
                }
            },
            formatTimeDouble: function(time) {
                return 10 <= time ? time : 
                        time > 0 ? '0' + time : '00';
            }
        });
    })($);
    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		
    		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    		<script type="text/javascript" src="js/jquery.time.js"></script>
    		<script type="text/javascript">
    		  $(function() {
    		    $("#time").countDown(10);
    		  });        
    		</script>
    	</head>
    	<body>
    		<div id="time"></div>
    	</body>
    </html>
    
  • 相关阅读:
    《黑天鹅》笔记
    《随机漫步的傻瓜》笔记
    《眨眼之间》笔记
    《陌生人效应》笔记
    《设计心理学 -- 设计未来》笔记
    《设计心理学 -- 设计情感化》笔记
    《设计心理学 -- 与复杂共处》笔记
    《引爆点》笔记
    《逆转》笔记
    《设计心理学 -- 日常的设计》笔记
  • 原文地址:https://www.cnblogs.com/guxingzhe/p/5010034.html
Copyright © 2020-2023  润新知