Jony's Blog

因为以前项目需要做了一个简单的计时器，后来无聊，提出来完善成一个插件了。同时支持计时和倒计时。

样式部分

.timer *{ padding: 0px; margin: 0px;}
.timer{ width: 210px; height: 34px; line-height: 34px; font-family: Verdana, sans-serif; font-size: 28px; color: #FFF;}
.timer div.clock{ float: left; width: 28px; height: 34px; text-align: center; line-height: 34px; background: #000; margin-right: 2px; border-radius: 5px; overflow: hidden;}
.timer div.clock ul{ list-style: none;}
.timer div.clock ul li{ float: left; width: 28px; height: 34px; text-align: center; line-height: 34px;}
.timer div.dot{ float: left; width: 12px; height: 34px; color: #000;}

代码部分

/**
 * 基于 JQuery 的计时插件
 *
 * @author Jony
 * @version 2014-03-15 22:08 Jony 
 */
;
(function($){
	var timerIndex;
	var timerBox = [];
	var timerConfig = [];

	$.fn.extend({
		/**
		 * @param 整型 beginTime	起始时间，默认为 0。格式：hhiiss
		 * @param 布尔 countDown	倒计时，默认为 false
		 * @param 字串 clockClass	指针样式，默认为 clock
		 * @param 字串 dotClass		间隔样式，默认为 dot
		 * @param 字串 firstClass	前导样式，默认为 first
		 * @example $('#timer').jqTimer({begintTime: 123456});
		 */
		jqTimer: function(options){
			var defaults = {
				beginTime: 0,
				countdown: false,
				clockClass: 'clock',
				dotClass: 'dot',
				firstClass: 'first'
			};

			timerIndex = timerBox.length;
			timerBox[timerIndex] = this;
			timerConfig[timerIndex] = $.extend(defaults, options || {});

			var box = timerBox[timerIndex];
			var config = timerConfig[timerIndex];

			box.addClass('timer');

			box.append($('
').addClass(config.clockClass).text(config.beginTime[0]))
				.append($('
').addClass(config.clockClass).text(config.beginTime[1]))
				.append($('
').addClass(config.dotClass))
				.append($('
').addClass(config.clockClass).addClass(config.firstClass).text(config.beginTime[2]))
				.append($('
').addClass(config.clockClass).text(config.beginTime[3]))
				.append($('
').addClass(config.dotClass))
				.append($('
').addClass(config.clockClass).addClass(config.firstClass).text(config.beginTime[4]))
				.append($('
').addClass(config.clockClass).text(config.beginTime[5]));

			box.children('.' + config.clockClass).each(function(){
				var s = parseInt($(this).text());
				s = isNaN(s) ? 0 : s;
				$(this).html('
'+s+'
'+s+'
');
			});

			$.extend({
				jqTimerRun: function(boxIndex, i){
					var box = timerBox[boxIndex];
					var config = timerConfig[boxIndex];

					var i = (!i && i != 0) ? 5 : i;
					var c = box.children('.' + config.clockClass).eq(i);
					var p = config.countdown ? (c.hasClass(config.firstClass) ? 5 : 9) : (c.hasClass(config.firstClass) ? 6 : 10);
					var s = parseInt(c.find('li').eq(0).text(), 10);
					var h = c.find('li').eq(0).height();
					var g = false;

					if(config.countdown){
						s--;
						if(s < 0){
							s = p;
							g = true;
						}

						c.children('ul').css({marginTop: '-'+h+'px'});
						c.find('li').eq(0).text(s);
						c.children('ul').animate({marginTop: '0px'}, 'fast', function(){
							c.find('li').eq(1).text(s);
						});
					}else{
						s++;
						if(s >= p){
							s = 0;
							g = true;
						}

						c.children('ul').css({marginTop: '0px'});
						c.find('li').eq(1).text(s);
						c.children('ul').animate({marginTop: '-'+h+'px'}, 'fast', function(){
							c.find('li').eq(0).text(s);
						});
					}

					if(g && i > 0){
						$.jqTimerRun(boxIndex, (i - 1));
					}
				}
			});

			setInterval('$.jqTimerRun("' + timerIndex + '")', 1000);
		}
	});
})(jQuery);

最近负责公司全平台重构，后台的设计上，我采用了 glyphicon，由于程序架构上的需要，所有静态文件是通过一个子域名访问的，结果导致 glyphicon 里加载的字体 icon 无法显示。在网上搜索了一下找到了解决方案，很简单，在 nginx 的配置里，server 代码段下增加这么一段配置：

location ~ .*\.(eot|ttf|woff|svg)$ {
    add_header Access-control-Allow-Origin *;
}

HTML 部分代码

	
0
	
0
	
:
	
0
	
0
	
:
	
0
	
0

CSS 部分代码

.digits{ float: left; width: 210px; height: 34px; font-family: Verdana, sans-serif; font-size: 28px; color: #FFF; line-height: 34px; padding-top: 6px;}
.digits div.clock{ float: left; width: 28px; height: 34px; text-align: center; line-height: 34px; background: #000; margin-right: 2px; border-radius: 5px; overflow: hidden;}
.digits div.clock ul{ list-style: none;}
.digits div.clock ul li{ float: left; width: 28px; height: 34px; text-align: center; line-height: 34px;}
.digits div.dot{ float: left; width: 12px; height: 34px;}

JS 部分代码

function goTimer(i, n)
{
	if(!i){
		i = 5;
	}

	if(!n){
		n = '.clock';
	}

	var c = $(n).eq(i);
	var p = c.hasClass('first') ? 6 : 10;
	var s = parseInt(c.find('li').eq(0).text());

	s = s + 1;
	if(s === p){
		s = 0;
		goTimer((i - 1));
	}

	c.find('li').eq(1).text(s);
	c.children('ul').animate({marginTop: '-34px'}, 'fast', function(){
		timer++;

		c.find('li').eq(0).text(s);
		c.children('ul').css({marginTop: '0px'});
	});
}

假设在 /svn 目录下建立一个版本库 foo

新建版本库

cd /svn
svnadmin create foo;

配置版本库

vim ./foo/conf/svnserve.conf

[general]
anon-access = none #不允许匿名
auth-access = write
password-db = passwd
authz-db = authz

添加 svn 用户

vim ./foo/conf/passwd

[users]
user1 = password1
user2 = password2

设置目录权限

vim ./foo/conf/authz

[groups]
group1 = user1
group2 = user2

[foo:/]
* = r

[foo:/folder1]
@group1 = rw
* =

[foo:/folder2]
@group2 = rw
* =