Material Design风格定时器|秒表|闹钟jQuery插件

当前位置:主页 > jQuery库 > 布局和界面 > Material Design风格定时器|秒表|闹钟jQuery插件
Material Design风格定时器|秒表|闹钟jQuery插件
分享:

    插件介绍

    这是一款可以用于制作谷歌Material Design风格的定时器、秒表和闹钟的jQuery插件。该jQuery插件集合了Material Design的多种风格:点击波特效,扁平化风格和滑动按钮等。可用于制作定时器,秒表和闹钟等小工具。

    浏览器兼容性

    浏览器兼容性
    时间:2015-05-02
    阅读:
简要教程

这是一款可以用于制作谷歌Material Design风格的定时器、秒表和闹钟的jQuery插件。该jQuery插件集合了Material Design的多种风格:点击波特效,扁平化风格和滑动按钮等。可用于制作定时器,秒表和闹钟等小工具。

该插件是响应式的,可以在移动手机设备上使用。你可以通过点击或在触摸屏上通过触摸来切换各种功能。该插件的具体功能包括:

  • Alarm clock (闹钟):设定一个在指定时间响铃的闹钟。该闹钟功能通过HTML5 audio来实现。
  • Stopwatch (秒表):可以显示从点击开始按钮到点击结束按钮的时间。你可以开始,暂停和重置计时时间。
  • Timer (定时器):设置以分钟为单位的定时时间,开始后时间倒计时,到0时铃声响起。

上面的功能都基于 local storage 来实现,所以即使你的页面发生错误,重新打开时,app还能继续接着工作。

该插件使用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代码。