jQuery ClockPicker 圆形时钟

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‘ -
下载

时间： 2024-08-08 01:32:23

jQuery ClockPicker 圆形时钟的相关文章

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

之前为大家介绍过一款纯css3实现的圆形旋转分享按钮.今天要给大家带来一款基于jquery的圆形动画按钮.这款按钮鼠标经过的时候以边框转圈,然后逐渐消息,在实例中给出了四种颜色的demo.效果图如下: 在线预览   源码下载 实现的代码. html代码: <figure class='red'> <div class='icon'> i</div> <div class='circle'> </div> </figure> <f

js绘制圆形时钟

纯js制作圆形时钟 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } body{ background: grey; } .box{ width:320px; height: 320px; borde

用html+css+javascript制作圆形时钟

制作好的效果如下: 表盘.刻度和数字全都是用html+css完成的. html+css代码如下: <!DOCTYPE html> <html> <head> <title>圆形时钟</title> <style type="text/css"> #div1{ width: 500px; height: 500px; border:1px solid black; border-radius: 50%; margin

jQuery轻量级圆形进度指示器插件

radialIndicator是一款轻量级的jQuery圆形指示器插件.该圆形指示器插件支持颜色范围,动态修改值,格式化和百分比值等形式.它可以很好的和jquery或angular js一起工作. 在线演示:http://www.htmleaf.com/Demo/201502171390.html 下载地址:http://www.htmleaf.com/jQuery/Layout-Interface/201502171389.html

C#绘制圆形时钟

本文由作者参考部分案例后加以修改完成: 参考链接如下: http://blog.csdn.net/xuemoyao/article/details/8001113 http://wenku.baidu.com/view/1221d6522f60ddccda38a0e7 (1)     最终效果 (2)程序实现分析: 选用Paint事件进行实现绘制,然后加一个定时器设定为1000毫秒更新一次. (3)具体方法 在Form窗体(设置大小为300*300),中添加Time1,属性Enabled改为tr

javascript 实现圆形时钟秒针同步

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <st

圆形时钟

<!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8"> <title>1</title><base target="_blank" /> <link rel="stylesheet" href="*{padding:0px;margin:0px;} html{} body{ backg

100+经典常用的jQuery插件大全实例演示和下载

jQuery 表单插件 jQuery cxCalendar 日期选择器 jQuery cxColor 颜色选择器 jQuery cxSelect 联动下拉菜单 jQuery Validation Engine 表单验证 jQuery soColorPacker 网页拾色器 jQuery AutoComplete 自动补全 jQuery uploadify 文件上传 jQuery FileUpload 文件上传 jQuery LayDate 日期控件 jQuery ClockPicker 圆形时钟

收藏5款基于jquery的web前端效果预览

1.基于jquery的圆形动画按钮 今天要给大家带来一款基于jquery的圆形动画按钮.这款按钮鼠标经过的时候以边框转圈,然后逐渐消息,在实例中给出了四种颜色的demo. 在线演示 源码下载 2.使用jQuery和CSS3制作数字时钟 数字时钟可以应用在一些WEB倒计时效果.WEB闹钟效果以及基于HTML5的WEB APP中,本文将给大家介绍不借助任何图片,如何使用CSS3和HTML来制作一个非常漂亮的数字时钟效果. 在线演示 源码下载 3.基于纯 CSS3 技术实现美观的标签云效果 标签云是博