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 indexOf函数使用说明
Jul 03 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
小程序实现列表倒计时功能
Jan 29 Javascript
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
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/05/09 PHP
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
Python制作简易注册登录系统
2016/12/15 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
详解Python3中ceil()函数用法
2019/02/19 Python
用python对excel查重
2020/12/07 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
季度思想汇报
2014/01/01 职场文书
个人简历中自我评价
2014/02/11 职场文书
小学教师培训方案
2014/06/09 职场文书
公司应聘求职信
2014/06/21 职场文书
海洋科学专业求职信
2014/08/10 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
先进教师个人总结
2015/02/11 职场文书
信用卡催款律师函
2015/05/27 职场文书
简短清晨问候语
2015/11/10 职场文书
Java中使用Filter过滤器的方法
2021/06/28 Java/Android