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 相关文章推荐
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
Mar 27 Javascript
JavaScript 学习点滴记录
Apr 24 Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
javascript常用代码段搜集
Dec 04 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
js选择器全面解析
Jun 27 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
gulp解决跨域的配置文件问题
Jun 08 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
JS手写一个自定义Promise操作示例
Mar 16 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
?繁体转换的class
2006/10/09 PHP
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
PHP基础知识介绍
2013/09/17 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
2017/01/04 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
批处理与python代码混合编程的方法
2016/05/19 Python
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
python3中函数参数的四种简单用法
2018/07/09 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
广告学专业毕业生自荐信
2013/09/24 职场文书
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
综合实践教学反思
2014/01/31 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
企业口号大全
2014/06/12 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
开展警示教育活动总结
2015/05/09 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
Go 语言结构实例分析
2021/07/04 Golang