Web tools 开发记录

http://tools.rustfisher.com/

平时开发中我们会用到一些工具，比如时间戳工具，查询ascii码，查询颜色色值等等。
做一些静态网页，把这些开发者，美术常用的功能集合起来，便于大家的工作和学习。

时间戳工具

http://tools.rustfisher.com/timestamp-tool.html

使用了bootstrap。颜色风格类似material design。

父div定义position: relative;，子元素可以指定位置

position: absolute;
bottom: 10px;
right: 10px;

时钟网页 - 用于kindle

https://tools.rustfisher.com/clock-k1.html

结合kindle的特点，做一个时钟页面。颜色风格以黑白为主。
目前的kindle没有重力传感器，考虑添加功能，用户可以让网页旋转90度。

需要将元素居中显示。
这里采用的方法是flex布局。父元素设置display: flex。

.parentMain{
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

子元素的设置

<div id="main" class="parentMain">
    <div id="content" style="display:inline-block; margin: auto; align-content: center;">

配合动态调整div大小

function autoResizeDiv(){
	document.getElementById('main').style.height = window.innerHeight +'px';
}
window.onresize = autoResizeDiv;
autoResizeDiv();

设置display:inline-block;text-align: center;后，可以子元素水平居中显示。

旋转div

点击按钮，把某个div顺时针旋转90度。这里是想把时间显示区块旋转90度。
js控制css的属性，旋转div

timeFieldRotateDeg = 0;

function rotateTimeFieldRight() {
	timeFieldRotateDeg += 90;
	if(timeFieldRotateDeg == 360) {
		timeFieldRotateDeg = 0;
	}
	timeContentField = document.getElementById('timeContentField');
	console.log('rotate time content field');
	timeContentField.style.webkitTransform = 'rotate('+timeFieldRotateDeg+'deg)'; 
	timeContentField.style.mozTransform    = 'rotate('+timeFieldRotateDeg+'deg)'; 
	timeContentField.style.msTransform     = 'rotate('+timeFieldRotateDeg+'deg)'; 
	timeContentField.style.oTransform      = 'rotate('+timeFieldRotateDeg+'deg)'; 
	timeContentField.style.transform       = 'rotate('+timeFieldRotateDeg+'deg)'; 
}

参考

• https://stackoverflow.com/questions/19126432/rotate-a-div-using-javascript
• https://stackoverflow.com/questions/14233341/how-can-i-rotate-an-html-div-90-degrees

kindle适配问题

bootstrap似乎并不能在kindle的浏览器上很好的工作。
不采用动态计算屏幕宽高的方式。居中元素。

https://tools.rustfisher.com/clock-k2.html