web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
日期和时间
HTML5 canvas超逼真的模拟时钟特效
分类:
日期和时间
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
使用该模拟时钟插件首先需要引入jQuery和jquery.thooClock.js文件。 ```html ``` ##### HTML结构 可以使用一个空的div来作为时钟的容器。 ```html
``` ##### 初始化插件 在页面DOM元素加载完毕之后,可以通过thooClock()方法来初始化该时钟插件。 ```html ``` ##### 配置参数 下面是该时钟插件的可用配置参数: - size:默认值:250。时钟的大小。 - dialColor:默认值:'#000000'。时钟的前景色。可以是hex,颜色关键字,rgb或rgba颜色值。 - dialBackgroundColor:默认值:'transparent'。时钟的背景颜色。 - secondHandColor:默认值:'#F3A829'。时钟秒针的颜色。 - minuteHandColor:默认值:'#222222'。时钟分针的颜色。 - hourHandColor:默认值:'#222222'。时钟时针的颜色。 - alarmHandColor:默认值:'#FFFFFF'。闹钟指示的颜色(闹钟指示只有在alarmTime设置为'hh:mm')时才可见。 - alarmHandTipColor:默认值:'#026729'。闹钟指示的提示框颜色。 - hourCorrection:默认值:'+0'。小时校正。例如:+5或-3。 - alarmCount:默认值:1。闹钟会响多少次。 - alarmTime:响闹钟的时间。可以是Date对象或字符串:hh,hh:mm,hh:mm:ss。 - showNumerals:是否在时钟上显示数字。 - brandText:时钟的品牌名称。 - brandText2:时钟的产地名称。 - onAlarm:闹钟的回调函数。 - offAlarm:闹钟结束时的回调函数。 - onEverySecond:这个函数会在每一秒都触发一次。 ##### 方法 设置闹钟时间 可以使用一个字符串来设置闹钟时间: ```html // must be "hh", "hh:mm" or "hh:mm:ss" var strTime = '14:25' $.fn.thooClock.setAlarm(strTime); ``` 也可以使用一个Date对象来设置闹钟时间: ```html var alarm_date=new Date(); alarm_date.setHours(8,19,30); $.fn.thooClock.setAlarm(alarm_date); ``` ##### 清除闹钟 ```html $.fn.thooClock.clearAlarm(); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告