这是一款可以用于制作谷歌Material Design风格的定时器、秒表和闹钟的jQuery插件。该jQuery插件集合了Material Design的多种风格:点击波特效,扁平化风格和滑动按钮等。可用于制作定时器,秒表和闹钟等小工具。
该插件是响应式的,可以在移动手机设备上使用。你可以通过点击或在触摸屏上通过触摸来切换各种功能。该插件的具体功能包括:
- Alarm clock (闹钟):设定一个在指定时间响铃的闹钟。该闹钟功能通过HTML5 audio来实现。
- Stopwatch (秒表):可以显示从点击开始按钮到点击结束按钮的时间。你可以开始,暂停和重置计时时间。
- Timer (定时器):设置以分钟为单位的定时时间,开始后时间倒计时,到0时铃声响起。
上面的功能都基于 local storage 来实现,所以即使你的页面发生错误,重新打开时,app还能继续接着工作。
注意:在移动手机上不会听到铃声。因为在Chrome 和 Safari版本的移动手机上,音频只能通过响应用户动作来发出声音,例如通过触摸某个按钮。而插件中的音频是在一个延时之后才开始播放,手机浏览器会忽略它。
该插件使用Materialize框架,结合jQuery和jQuery Timepicker插件,并使用Hammer.js来控制移动触摸事件。Materialize可以将普通的HTML input输入框组件转换为安卓样式的滑动开关按钮和复选框。插件中还使用Waves.js来为元素的点击添加点击波效果。
压缩包中的assets文件夹下的js文件夹中有4个js文件,其中alarm.js, stopwatch.js 和 timer.js分别对应定时器、秒表和闹钟的js代码。使用某种功能可单独引入其中一个文件。script.js文件时处理前台的一些按钮点击和元素切换的js代码。