web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置：
首页
>
网页特效
>
日期和时间
Clock.js-HTML5模拟时钟jQuery插件
分类：
日期和时间
日期：
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
使用该时钟插件需要在页面中引入jquery和clock.js文件。 ```html <script src='jquery.min.js'></script> <script src='clock.js'></script> ``` ##### HTML结构 可以实用一个div作为该模拟时钟的容器。 ```html <div class="clock"></div> ``` ##### CSS样式 需要将时钟容器的定位方式设置为相对定位。 ```html .clock { position: relative;} ``` ##### 初始化插件 在页面DOM元素加载完毕之后，可以通过clock()方法来初始化该时钟插件。 ```html 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()方法获取时钟的数据对象，该对象可以用于控制时钟的状态。 ```html data.pause(); // 暂停时钟 data.start(); // 开始时钟 data.setTime(new Date()); // 为时钟设置新的时间 ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告
