当前位置：首页 > 网页特效 > 日期和时间

HTML5 canvas超逼真的模拟时钟特效

分类：日期和时间日期：2024-05-14 点击(0) 评论(0)

简介

使用该模拟时钟插件首先需要引入jQuery和jquery.thooClock.js文件。

```html
<script type="text/javascript" src="js/jquery-latest.min.js"></script> 
<script type="text/javascript" src="js/jquery.thooClock.js"></script> 
```               
#####  HTML结构
可以使用一个空的div来作为时钟的容器。

```html
<div id="myclock"></div>     
```             
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过thooClock()方法来初始化该时钟插件。

```html
<script type="text/javascript">
  $('#myDIV').thooClock();
</script>   
```             
#####  配置参数
下面是该时钟插件的可用配置参数：

- 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();   
```

web299.com

HTML5 canvas超逼真的模拟时钟特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果