一款有意思的时钟玩具,原生代码编写,使用 CSS 渲染过渡动效,引入 base64 格式 data url 图片。
<link rel="stylesheet" type="text/css" href="./index.css">
<div id="match"></div>
<script type="text/javascript" src="./index.js"></script>
<script type="text/javascript">
var mc = new MatchClock({
el: 'match',
scale: 0.5
})
mc.start()
</script>
一个数字最多有 7 根火柴,于是我们将 数字分成 7个元素:
之后配置数字元素显示表,规定数字应该显示的对应节点:
var numbers = [
{
number: 0,
madeof: [0, 1, 2, 4, 5, 6]
}, {
number: 1,
madeof: [2, 5]
}, {
number: 2,
madeof: [0, 2, 3, 4, 6]
}, {
number: 3,
madeof: [0, 2, 3, 5, 6]
}, {
number: 4,
madeof: [1, 2, 3, 5]
}, {
number: 5,
madeof: [0, 1, 3, 5, 6]
}, {
number: 6,
madeof: [0, 1, 3, 4, 5, 6]
}, {
number: 7,
madeof: [0, 2, 5]
}, {
number: 8,
madeof: [0, 1, 2, 3, 4, 5, 6]
}, {
number: 9,
madeof: [0, 1, 2, 3, 5, 6]
}
]
当数字改变的时候,重新组织节点元素
makeNumber: function (index) {
var madeof = getNumber(Number(index)).madeof
for (var i = 0; i < els.length; i++) {
var show = false
for (var j = 0; j < madeof.length; j++) {
if (i === madeof[j]) {
show = true
removeElementClass(els[i], 'hidden')
}
}
if (!show) {
addElementClass(els[i], 'hidden')
}
}
}
这里再介绍一个基于 Flash 的人体时钟
引入方式
<div>
<script charset="Shift_JIS"
src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.js"></script>
</div>