ClockPicker.js是一款时钟插件,其实还可以改进,里面的分可以改成短横线。

在线实例

实例预览  jQuery ClockPicker 圆形时钟

使用方法

  1. <div class="input-group clockpicker">
  2. <input type="text" class="form-control" value="09:30">
  3. <span class="input-group-addon">
  4. <span class="glyphicon glyphicon-time"></span>
  5. </span>
  6. </div>
  7. $('.clockpicker').clockpicker();
复制

参数详解

参数 描述 默认值
default 默认时间, 'now' 或'13:14' -
placement 提示位置 'left'、'right'、'top' bottom
align 提示箭头位置 left
donetext 完成按钮文本 完成
autoclose 是否自动关闭 false
vibrate 当鼠标拖动显示摇摆效果 true
fromnow 设置从现在开始now 0

ClockPicker调用方法

show 显示 -
hide 隐藏 -
remove 移除 -
toggleView 切换显示 'hours' 或 'minutes' -

jQuery ClockPicker 圆形时钟的更多相关文章

  1. jq动画插件,自制基于vue的圆形时钟

    首先附上jq插件库,里面的东西太炫了,建议学前端的可以看看学习下:http://www.jq22.com/ 里面有个“超个性动画版本的个人简历”,通过屏幕上不断打印内容,改变相应样式来实现动画简历,我 ...

  2. jquery模拟LCD 时钟

    查看效果网址:http://keleyi.com/keleyi/phtml/jqtexiao/24.htm 以下是HTML文件源代码: <!DOCTYPE html PUBLIC "- ...

  3. canvas自适应圆形时钟绘制

    前面的话 前面介绍过canvas粒子时钟的绘制,本文将详细介绍canvas自适应圆形时钟绘制 效果演示 最终自适应圆形时钟的效果如下所示 功能分析 下面来分析一下该圆形时钟的功能 [1]静态背景 对于 ...

  4. js绘制圆形时钟

    纯js制作圆形时钟 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. 分享一款基于jquery的圆形动画按钮

    之前为大家介绍过一款纯css3实现的圆形旋转分享按钮.今天要给大家带来一款基于jquery的圆形动画按钮.这款按钮鼠标经过的时候以边框转圈,然后逐渐消息,在实例中给出了四种颜色的demo.效果图如下: ...

  6. C#绘制圆形时钟

    本文由作者参考部分案例后加以修改完成: 参考链接如下: http://blog.csdn.net/xuemoyao/article/details/8001113 http://wenku.baidu ...

  7. JS框架_(JQuery.js)圆形多选菜单选项

    百度云盘 传送门 密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...

  8. jQuery实现数字时钟

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  9. CSS3 圆形时钟式网页进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Atitit xml命名空间机制

    Atitit xml命名空间机制 命名冲突1 使用前缀来避免命名冲突2 使用命名空间(Namespaces)2 XML Namespace (xmlns) 属性2 默认的命名空间(Default Na ...

  2. Log Parser 2.2 分析 IIS 日志

    1,安装Log Parser 2.2 https://www.microsoft.com/en-us/download/details.aspx?displaylang=en&id=24659 ...

  3. is_null, empty, isset, unset对比

    is_null, empty, isset, unset 我们先来看看这4个函数的描述 isset 判断变量是否已存在(配置)unset 把变量删除(释放)掉empty 判断变量是否为空is_null ...

  4. 【Win10应用开发】自定义磁贴通知的排版

    前面老周用了两篇烂文,向大家介绍了Adaptive磁贴的模板使用.那些XML模板已经很强大了,不过,如果你觉得那些排版还不足以满足需求,不妨试试自己来定义磁贴的内容. 其实,Runtime App支持 ...

  5. jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on

    事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析 ...

  6. Divshot —— 在线的可视化网页设计

    Divshot 是一个在线网站,通过可视化方式进行 Web 界面的设计,并直接生成 HTML 和 CSS 代码.该工具提供常用的 Web UI 组件.界面基于 Twitter 的 Bootstrap  ...

  7. Python第一天 - 迭代

    (一)索引迭代 Python中,迭代永远是取出元素本身,而非元素的索引. 如果要取索引可以用enumerate()函数 例: L = ['Adam', 'Lisa', 'Bart', 'Paul'] ...

  8. EntityFramework DbContext 线程安全

    先看这一段异常信息: A second operation started on this context before a previous asynchronous operation compl ...

  9. 深入seajs源码系列二

    模块类和状态类 参照上文的demo,我们结合源码分析在简单的API调用的背后,到底使用了什么技巧来实现各个模块的依赖加载以及模块API的导出. 首先定义了一个Module类,对应与一个模块 funct ...

  10. MySQL入门02-MySQL二进制版本快速部署

    在上篇文章 MySQL入门01-MySQL源码安装 中,我们介绍了MySQL源码安装的方法. 源码安装虽然有着更加灵活和更加优化等诸多优势.但源码编译安装部署的过程相对复杂,而且整个过程所花费的时间很 ...