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 相关文章推荐
jQuery使用手册之一
Mar 24 Javascript
js直接编辑当前cookie的脚本
Sep 14 Javascript
javascript 跳转代码集合
Dec 03 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
javascript 动态创建表格的2种方法总结
Mar 04 Javascript
cookie的secure属性详解
Apr 08 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 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 Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
Python实现基于权重的随机数2种方法
2015/04/28 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
美国玩具公司:U.S.Toy
2018/05/19 全球购物
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
校园文化建设方案
2014/02/03 职场文书
工程资料员岗位职责
2014/03/10 职场文书
我的老师教学反思
2014/05/01 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书
车辆委托书范本
2014/10/05 职场文书
五年级下册复习计划
2015/01/19 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
用Python将库打包发布到pypi
2021/04/13 Python