一款不可多得的火柴时钟

火柴时钟

一款有意思的时钟玩具,原生代码编写,使用 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>
  • 请保证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 的人体时钟

引入方式

<div>
    <script charset="Shift_JIS" 
     src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.js"></script>
</div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

2016.06 第一周 群问题分享

HTML+CSS meta标签的viewport属性说明 2016.05.30~2016.06.03 核心概念 viewport(视口) 参考答案 <meta ...

30370
来自专栏吾爱乐享

php学习之html的标签属性(二)

15320
来自专栏肖蕾的博客

第十四章:TouchPadTouchPadStyleTouchPad控件

API定义:TouchPad的样式 用法:public TouchpadStyle(Drawable background, Drawable knob) ...

7520
来自专栏听雨堂

MapX中取得图元操作的速度测试

        最常见的操作,是取得图层中的某个图元。假如需要根据一个属性(无重复)来获得图元的话,发现速度相差极大。 遍历比较是最慢的。 用图层的search...

20060
来自专栏JackieZheng

初探JavaScript(二)——JS如何动态操控HTML

  除去五一三天,我已经和《JavaScript Dom编程艺术》磨合了六天,第一印象很好。慢慢的,我发现这是一块排骨,除了肉还有骨头。遇到不解的地方就会多看几...

29850
来自专栏ytkah

excel判断单元格包含指定内容的函数用=IF(COUNTIF(A1,"*内容*"),"0","1")

  前面我们聊过怎样将Excel包含某字符的单元格填充颜色,这边我们用另外一种方法来实现:excel判断单元格包含指定内容的函数   选中需要显示结果的单元格,...

1.2K60
来自专栏HTML5学堂

段落首字下沉

HTML5学堂:在项目中,时常能看到了一种文字展示的特殊效果——首字下沉(如图)。于是花了几分钟考虑了一下使用方法,脑测之后,又敲了敲代码实现了一下,写出来与大...

41750
来自专栏web编程技术分享

《从案例中学习JavaScript》之实现对话效果

384120
来自专栏mathor

第六届蓝桥杯决赛B组C/C++——完美正方形

17550
来自专栏web编程技术分享

js常用方法和一些封装(2) -- 随机数生成

415100

扫码关注云+社区

领取腾讯云代金券