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简单实现删除记录时的提示效果
Dec 05 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
vue element项目引入icon图标的方法
Jun 06 Javascript
JS闭包经典实例详解
Dec 20 Javascript
vue-router 中 meta的用法详解
Nov 01 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 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(7) php 字符串相关应用
2010/03/05 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
javascript void(0)的妙用
2009/10/21 Javascript
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
ES6 Generator基本使用方法示例
2020/06/06 Javascript
python用post访问restful服务接口的方法
2018/12/07 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
python 连续不等式语法糖实例
2020/04/15 Python
python 弧度与角度互转实例
2020/04/15 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
高职助产应届生自荐信
2013/09/24 职场文书
2014自荐信的写作技巧
2014/01/28 职场文书
函授生自我鉴定
2014/03/25 职场文书
交通事故私了协议书
2014/04/16 职场文书
教研处工作方案
2014/05/26 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
赞助商致辞
2015/07/30 职场文书
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫