> 웹 프론트엔드 > H5 튜토리얼 > HTML5 canvas超逼真的模拟时钟特效

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

PHP中文网
풀어 주다: 2017-03-30 13:19:26
원래의
3902명이 탐색했습니다.

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

简要教程

thooClock是一款效果非常逼真的HTML5 canvas模拟时钟特效。该时钟特效使用jQuery和HTML5 Canvas API来制作,模拟现实生活中的时钟。并且它还具有定时闹钟的功能。

 使用方法

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

<script type="text/javascript" src="js/jquery-latest.min.js"></script> 
<script type="text/javascript" src="js/jquery.thooClock.js"></script>
로그인 후 복사

HTML结构

可以使用一个空的

来作为时钟的容器。

<p id="myclock"></p>
로그인 후 복사

初始化插件

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

<script type="text/javascript">
  $(&#39;#myDIV&#39;).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:这个函数会在每一秒都触发一次。

方法

设置闹钟时间

可以使用一个字符串来设置闹钟时间:

// must be "hh", "hh:mm" or "hh:mm:ss"              
var strTime = &#39;14:25&#39;
$.fn.thooClock.setAlarm(strTime);
로그인 후 복사

也可以使用一个Date对象来设置闹钟时间:

var alarm_date=new Date();
alarm_date.setHours(8,19,30);
$.fn.thooClock.setAlarm(alarm_date);
로그인 후 복사

清除闹钟

$.fn.thooClock.clearAlarm();
로그인 후 복사

以上就是HTML5 canvas超逼真的模拟时钟特效的内容,更多相关内容请关注PHP中文网(www.php.cn)!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿