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 相关文章推荐
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
canvas绘制的直线动画
Jan 23 Javascript
详解浏览器渲染页面过程
Feb 09 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
关于layui 下拉列表的change事件详解
Sep 20 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
JavaScript 实现继承的几种方式
Feb 19 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简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
javascript常见用法总结
2014/05/22 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
nodejs开发——express路由与中间件
2017/03/24 NodeJs
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
python中文编码问题小结
2014/09/28 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
python跳出双层for循环的解决方法
2019/06/24 Python
Python 画出来六维图
2019/07/26 Python
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
企业整改报告范文
2014/11/08 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
硕士学位论文评语
2014/12/31 职场文书
房产公证书格式
2015/01/26 职场文书
皇城相府导游词
2015/02/06 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书