【javascript】デバッグ関数（Debug function）

【HTML】

<div class="Debug Hide"></div>

【CSS】

.Debug {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 6rem;
	overflow: scroll;
}
.Hide {
	display: none;
}

【Javascript】

function debug() {
    var i, length = arguments.length;
    var element = document.querySelector('.Debug');
    
    element.classList.remove('Hide');
    for (i = 0; i < length; i ++) {
        element.innerHTML = arguments[i] + '<br />' + element.innerHTML;
    }
}

【使い方】

debug(1, 2, 3);

【javascript】要素を重ね合わせる（overlap elements）

【HTML】

<div class="Cursor"><div></div></div>

【CSS】

.Cursor {
	position: absolute;
	padding: 0;
	margin: 0;
}
.Cursor div {
	position: absolute;
	border: 1px dotted blue;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

【Javascript】

(function () {
	var select = new Event('SelectElement', {bubbles: true});
	(function (click) {
		document.addEventListener('click', click, false);
	})(function (event) {
		var target = event.target;
		var rect = target.getBoundingClientRect();
		var cursor = document.querySelector('.Cursor');

		if (target.closest('.Cursor')) {
			return;
		}

		cursor.style.left = rect.left + 'px';
		cursor.style.top = rect.top + 'px';
		cursor.style.width = rect.width + 'px';
		cursor.style.height = rect.height + 'px';
		cursor.classList.remove('Hide');
		
		target.dispatchEvent(select);
	});
})();

【使い方】

(function (select) {
	document.addEventListener('SelectElement', select, false);
})(function (event) {
	var target = event.target;
	
	console.log(target);
});

【javascript】数字をアルファベットに変換（Number to alphabet）

    // 0=A 1=B 2=C ...
    var a = String.fromCharCode(65 + i);

【CSS】【javascript】要素の中心を基準に描画（Draw relative to the center of the element.）

【HTML】

<div class="Container"><div class="Contents"></div></div>

【CSS】

.Container {
	position: absolute;
	width: 0;
	height: 0;
	overflow: visible;
}
.Container .Contents {
    position: absolute;
    left: -1rem; // herf width
    top: -1rem; // herf height
    right: -1rem; // herf width
    bottom: -1rem; // herf height
    background-color: #6699FF;
}

【使い方】

    var container = document.querySelector('.Container');
    
    // Container's center is the origin.
    container.style.left = '100px';
    container.style.right = '100px';

【CSS】斜線

background: linear-gradient(to left top, transparent calc(50% - 1px), black 1px, transparent calc(50% + 1px));

【javascript】【Gimmick】トグルスイッチ Toggle Switch

【HTML】

<div class="Toggle"></div>

【CSS】

.Toggle {
	position: relative;
	width: 3rem;
	height: 1rem;
	border-radius: 0.5rem;
	border: 1px solid black;
}
.Toggle::before {
	content: "";
	position: absolute;
	left: 1px;
	width: 1rem;
	height: 1rem;
	background-color: #6699FF;
	border-radius: 50%;
}
.Toggle.On::before {
	left: auto;
	right: 1px;
}

【Javascript】

(function () {
	var toggle = new Event('ChangeToggle', {bubbles: true});
	(function (click) {
		document.addEventListener('click', click, false);
	})(function (event) {
		var target = event.target;
		
		if (!target.classList.contains('Toggle')) { return; }
		
		target.classList.toggle('On');
		
		target.dispatchEvent(toggle);
	});
})();

【使い方】

(function (toggle) {
	document.addEventListener('ChangeToggle', toggle, false);
})(function (event) {
	var target = event.target;
	
	console.log(target.classList.contains('On'));
});

【javascript】PHPライクの日時フォーマット関数

var DateTime = {
	Format: function (date, format) {
		var result = format;
		var week = ['日', '月', '火', '水', '木', '金', '土'];
		var replacement = {
			'%d' : DateTime.FillZero(date.getDate()),
			'%j' : date.getDate(),
			'%w' : week[date.getDay()],
			'%N' : date.getDay(),
			'%W' : DateTime.WeekNumber(date),
			'%y' : date.getFullYear() % 100,
			'%Y' : date.getFullYear(),
			'%m' : DateTime.FillZero(date.getMonth() + 1),
			'%n' : date.getMonth() + 1,
			'%G' : date.getHours(),
			'%H' : DateTime.FillZero(date.getHours()),
			'%i' : DateTime.FillZero(date.getMinutes()),
			'%s' : DateTime.FillZero(date.getSeconds()),
			'%u' : date.getMilliseconds()
		};
		var key;
		
		for (key in replacement) {
			result = result.replace(key, replacement[key]);
		}
		
		return result;
	},
	FillZero: function (number) {
		return number < 10 ? '0' + number : number;
	},
	WeekNumber: function (date) {
		var firstDate = new Date(date.getFullYear(), 0, 1);
		var numberOfDays = Math.floor((date - firstDate) / 24 / 60 / 60 / 1000);
		return Math.ceil((date.getDay() + 1 + numberOfDays) / 7);
	}
};

【引数】

• date: Date変数
• format: 出力フォーマット

【使い方】

DateTime.Format(new Date(), '%Y-%m-%d %H:%i:%s');