jQuery渐进数字时间钟

所属分类:输入-日期和时间

 18563  228  查看评论 (5)
分享到微信朋友圈
X
jQuery渐进数字时间钟 ie兼容12

index.html - demo页面入口文件
index.css - demo页面主要样式
index.js - demo页面主要逻辑

demo思路:

    1、获取当前时间

    2、吧当前时间转化为字符串,如22:45:56  -->  224556

    3、6个数和6个类名为column的div对应上

    4、分别找到每一列为当前时间数字垂直居中显示,要根据数字大小调节在Y轴上的移动距离

    5、同一列数字的透明度不同,要根据离当前时间数字的远近设置透明度

相关插件-日期和时间

mobiscroll2.13.2手机滑动选择日期时间插件(带星期)

根据mobiscroll2.13.2手机滑动选择日期时间插件(带星期)修改的插件,nowText:
  日期和时间
 61796  468

timeago.js自动将时间戳转换为更易读的时间轴

timeago.js是一款基于jQuery的时间处理插件,它可以轻易的将时间戳转换成如:5分钟前,约3小时前这样的更友好易读的时间轴
  日期和时间
 28734  342

Canvas时钟插件clock-canvas.js

使用html5中Canvas技术,绘制钟表表盘,表面大小支持自适应。
  日期和时间
 31903  334
  日期和时间
 52087  365

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    壹米阳光 0
    2024/3/15 22:25:37
    潇洒杰叔 0
    2022/4/22 17:36:54
    开心就好。 0
    2019/11/19 11:56:50
    建议给显示的数字时间加个框,外面的数字隐藏,现在看着有点乱 回复
    человек 0
    2019/11/10 18:08:43
    这个真的棒
        壹米阳光0
        2024/3/15 22:26:21
        是的
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复