一款不可多得的火柴时钟

火柴时钟

一款有意思的时钟玩具，原生代码编写，使用 CSS 渲染过渡动效，引入 base64 格式 data url 图片。

引用

• 请保证el是个足够宽的容器，否则元素会折行。

• 你可以通过改变 scale 数值对时钟进行缩放。

核心思想

一个数字最多有 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 的人体时钟

引入方式