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类和继承 this属性使用说明
Sep 03 Javascript
JavaScript基本编码模式小结
May 23 Javascript
javascript学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
ajax的hide隐藏问题解决方法
Dec 11 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 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
function.inc.php超越php
2006/12/09 PHP
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
vuex 的简单使用
2018/03/22 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
python连接池实现示例程序
2013/11/26 Python
Python切换pip安装源的方法详解
2016/11/18 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
Django如何使用redis作为缓存
2020/05/21 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
Python可以用来做什么
2020/11/23 Python
python中pop()函数的语法与实例
2020/12/01 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
上海期货面试题
2014/01/31 面试题
财务管理专业毕业生求职信范文
2013/09/21 职场文书
大专学生推荐信范文
2013/11/19 职场文书
自主招生自荐信范文
2013/12/04 职场文书
大学生学习自我评价
2014/01/13 职场文书
20年同学聚会感言
2014/02/03 职场文书
户外活动策划方案
2014/03/12 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
幸福中国演讲稿
2014/09/12 职场文书