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浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
异步安全加载javascript文件的方法
Jul 21 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
详解Angular调试技巧之报错404(not found)
Jan 31 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 Javascript
Vue Element plus使用方法梳理
Dec 24 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
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
Java设计中的Builder模式的介绍
2018/03/22 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
Python实现竖排打印传单手机号码易撕条
2015/03/16 Python
python中的lambda表达式用法详解
2016/06/22 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
在pycharm中配置Anaconda以及pip源配置详解
2019/09/09 Python
如何在python中判断变量的类型
2020/07/29 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
CSS3 display知识详解
2015/11/25 HTML / CSS
网络方面基础面试题
2012/11/16 面试题
财务会计专业毕业生自荐信
2013/10/02 职场文书
英文导游欢迎词
2014/01/11 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
给全校老师的建议书
2014/03/13 职场文书
领导干部廉政承诺书
2014/03/27 职场文书
团拜会策划方案
2014/06/07 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
超强台风观后感
2015/06/09 职场文书
学习雷锋主题班会
2015/08/14 职场文书
QT与javascript交互数据的实现
2021/05/26 Javascript
python中pandas对多列进行分组统计的实现
2021/06/18 Python
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python