http://tools.rustfisher.com/

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

时间戳工具

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

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

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

1
2
3
position: absolute;
bottom: 10px;
right: 10px;

时钟网页 - 用于kindle

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

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

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

1
2
3
4
5
6
.parentMain{
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}

子元素的设置

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

配合动态调整div大小

1
2
3
4
5
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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)';
}

参考

kindle适配问题

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

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