jQuery实现的输入框选择时间插件用法实例


Posted in Javascript onFebruary 28, 2015

本文实例讲述了jQuery实现的输入框选择时间插件用法。分享给大家供大家参考。具体实现方法如下:

<!dooCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<meta charset = utf8>

<title>jQuery实现的输入框选择时间插件</title>

<script charset="utf-8" src="/js/jquery-1.6.2.min.js"></script>

<script charset="utf-8" src="/js/jquery.settime.js"></script>

</head>

<body>

<p id="msg">msg </p>

<p >time1<input id="time" value="" /></p>

<p >time2<input id="time2" value="" /></p>

<p >time3<input id="time3" value="" /></p>

<p ><input type = button id="button" value="button"/></p>

<div>

</div>

<script>

$('#time').setTime();

$('#time2').setTime({

drag:true,

h:[5,20],

i:[5,50],

s:[5,45],

a:0.05,

constraint:'',

'starteffect': function(d){

$('#msg').html(d[0]);

},

'onmove':function(e){

$('#msg').html(e[0] + '/' + e[1])

},

zindex:'0',

'cursor':'move',

'area':[[50,600],[10 ,5000]],

'callback':function(){

//alert(1)

}

});

$('#time3').setTime({

drag:true,

a:0.05

});

$('#button').click(function(){

alert( $('#time').val() );

alert( $('#time2').val() );

alert( $('#time3').val() );

});

</script>

</body>

</html>

本文中的时间插件jquery.settime.js点击此处本站下载。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
vue  自定义组件实现通讯录功能
Sep 30 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 #Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 #Javascript
浅析JavaScript事件和方法
Feb 28 #Javascript
常用的JavaScript WEB操作方法分享
Feb 28 #Javascript
js实现点击图片改变页面背景图的方法
Feb 28 #Javascript
本人自用的global.js库源码分享
Feb 28 #Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 #Javascript
You might like
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
python操作yaml说明
2020/04/08 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
自考毕业生自我鉴定
2013/11/04 职场文书
统计岗位职责
2014/02/21 职场文书
关于读书的演讲稿
2014/05/07 职场文书
学习雷锋标语
2014/06/25 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
给客户的检讨书
2014/12/21 职场文书
社区低保工作总结2015
2015/07/23 职场文书
新学期主题班会
2015/08/17 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
java实现对Hadoop的操作
2021/07/01 Java/Android
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers