一款不可多得的火柴时钟
时间:2022-05-06
本文章向大家介绍一款不可多得的火柴时钟,主要内容包括火柴时钟、核心思想、源码链接、附、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
火柴时钟
一款有意思的时钟玩具,原生代码编写,使用 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>
- ntp服务配置
- Linux系统下如何查看及修改文件读写权限
- Apache Commons CLI命令行启动
- rsync+inotify实时同步
- 18本纸质书:OpenCV、Python和机器学习,总有一本适合你
- 三种Linux服务器监控技术的对比
- http和www服务基础知识
- 手把手教你在VirtualBox中与主机共享文件夹
- Kafka与Logstash的数据采集对接 —— 看图说话,从运行机制到部署
- Kafka入门初探+伪集群部署
- Beats数据采集---PacketbeatFilebeatTopbeatWinlogBeat使用指南
- linux NFS网络文件系统
- linux基础命令
- 国外大学自办星际赛事 鼓励学生自制AI来对战
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- TRTC横竖屏切换
- Swift 元祖
- Flutter - 解决混合开发iOS脚本打包遇到的问题
- Shader 特效 —— Film Burn (炫光光晕)效果【GLSL】
- java selenium chromedriver浏览器驱动放在哪里?【两种位置】
- 56. Vue原生js的组件拆分结构设计
- 一步一步教你把 Redux Saga 添加到 React&Redux 程序中
- Octave的基本语句及函数的使用入门—ML Note 31
- JAVA的Lock锁接口实现
- 抽象语法树为什么抽象
- burpsuite IP伪造插件
- 用阻塞队列,再系一次鞋带
- I2C总线架构 之 设备驱动
- kail 安装及卸载 docker【亲测可用】
- mac 登录远程服务器(常规ssh+免密快捷方式)