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 相关文章推荐
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
常见的原始JS选择器使用方法总结
Apr 09 Javascript
JavaScript在IE和FF下的兼容性问题
May 19 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 Javascript
详解创建自定义的Angular Schematics
Jun 06 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
小程序跳转H5页面的方法步骤
Mar 06 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中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
jQuery使用手册之一
2007/03/24 Javascript
javascript实现的动态文字变换
2007/07/28 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
2009/07/31 Javascript
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
JQuery球队选择实例
2015/05/18 Javascript
理解javascript闭包
2015/12/15 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
bootstrap 设置checkbox部分选中效果
2017/04/20 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
英语专业应届生求职信范文
2013/11/15 职场文书
学术会议欢迎词
2014/01/09 职场文书
优秀老师事迹材料
2014/02/05 职场文书
劲霸男装广告词
2014/03/21 职场文书
师德演讲稿范文
2014/05/06 职场文书
自荐信格式范文
2015/03/04 职场文书
Python中itertools库的四个函数介绍
2022/04/06 Python