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 相关文章推荐
JavaScript prototype属性使用说明
May 13 Javascript
Jquery升级新版本后选择器的语法问题
Jun 02 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 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
zend api扩展的php对象的autoload工具
2011/04/18 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
全面分析Python的优点和缺点
2018/02/07 Python
关于Python的一些学习总结
2018/05/25 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
南京迈特望C/C++面试题
2012/07/09 面试题
视图的作用
2014/12/19 面试题
生日派对邀请函
2014/01/13 职场文书
管理标语大全
2014/06/24 职场文书
超市理货员岗位职责
2014/07/04 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
产品委托授权书范本
2014/09/16 职场文书
MySQL多表查询机制
2022/03/17 MySQL
青岛市的收音机研制与生产
2022/04/07 无线电