前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一款不可多得的火柴时钟

一款不可多得的火柴时钟

作者头像
lonelydawn
发布2018-03-29 12:03:36
6500
发布2018-03-29 12:03:36
举报
文章被收录于专栏:lonelydawn的前端猿区

火柴时钟

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

引用

代码语言:javascript
复制
<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个元素:

之后配置数字元素显示表,规定数字应该显示的对应节点:

代码语言:javascript
复制
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]
	}
]

当数字改变的时候,重新组织节点元素

代码语言:javascript
复制
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 的人体时钟

引入方式

代码语言:javascript
复制
<div>
    <script charset="Shift_JIS" 
     src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.js"></script>
</div>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 火柴时钟
    • 引用
      • 核心思想
        • 源码链接
          相关产品与服务
          容器服务
          腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档