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 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 Javascript
前端开发之便利店收银系统代码
Dec 27 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实现的下载css文件中的图片的代码
2010/02/08 PHP
php数字转汉字代码(算法)
2011/10/08 PHP
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
php魔术变量用法实例详解
2014/11/13 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
GRID拖拽行的实例代码
2013/07/18 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
innerText 使用示例
2014/01/23 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
微信小程序开发摇一摇功能
2019/11/22 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
Python中的多重装饰器
2015/04/11 Python
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
python flask 多对多表查询功能
2017/06/25 Python
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
python保存数据到本地文件的方法
2018/06/23 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
调解员先进事迹材料
2014/02/07 职场文书
事业单位考察材料范文
2014/12/25 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
关于军训的感想
2015/08/07 职场文书
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server