Clock.jsHTML5模拟时钟jQuery插件

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

 33402  337  查看评论 (7)
分享到微信朋友圈
X
Clock.jsHTML5模拟时钟jQuery插件 ie兼容9

使用方法

使用该时钟插件需要在页面中引入jquery和clock.js文件。

<script src='jquery.min.js'></script>                  
<script src='clock.js'></script>

HTML结构

可以实用一个<div>作为该模拟时钟的容器。

<div class="clock"></div>

CSS样式

需要将时钟容器的定位方式设置为相对定位。

.clock { position: relative;}

初始化插件

在页面DOM元素加载完毕之后,可以通过clock()方法来初始化该时钟插件。

var clock = $(".clock").clock({
    width: 300,       // set width
    height: 450,      // set height
    theme: 't1',      // set theme  => 't1' 't2' 't3'
    date: new Date()  // set date => new Date()
}),
data = clock.data('clock');

配置参数

  • width:时钟的宽度。

  • height:时钟的高度。

  • theme:主题,可选值有:t1,t2,t3。

  • date:设置时钟的时间。

方法

在初始化时钟对象之后,可以通过对象的dada()方法获取时钟的数据对象,该对象可以用于控制时钟的状态。

data.pause();  // 暂停时钟   
data.start();  // 开始时钟
data.setTime(new Date());  // 为时钟设置新的时间


相关插件-日期和时间

纯JS彩色方块倒计时插件

纯JS实现,指定日期倒计时,60秒倒计时,指定日期到今天的时间
  日期和时间
 17483  228

带节假日设置的日历

带节假日设置的日历
  日期和时间
 105448  442

jQuery日历插件

简洁、优雅的日历插件。
  日期和时间
 77760  519

jQuery移动端入住时间择插件

移动端酒店入住和离开时间一次性选择插件,界面一般但是功能绝对OK
  日期和时间
 30284  305

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

    夜猫 0
    2018/1/11 12:21:42

    能用%来调大小吗?

    回复
    hjw2959 0
    2017/8/24 9:00:41
    LIUbo2 0
    2017/7/28 15:08:12
    SAn 0
    2017/6/2 15:52:17
    旧巷。 0
    2016/8/31 12:08:42
    小琴 0
    2016/7/29 9:07:42
    效果看起来不错
        z林0
        2016/8/4 8:08:50
        是的
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复