js 只选择选择时分秒的jq插件-幸凡学习网

搜索文章

文章热门排行随机文章推荐文章

分享33个配色很棒的黄色网站
2012年120个令人印象深刻jQuery的...
30幅巨龙插画
javascript如何判断浏览器是否安...
如何解决手机版 uc 浏览器不能 ...
分享10款FLV PLAYER 网页视频播放...
20家顶级品牌鞋电子商务网站设计
冯小刚1942经典台词
30个国外野生动物动物园和保护区...
js 只选择选择时分秒的jq插件

程序员都在用的电脑小技巧,看看你...
我收藏的教程及工具
EasyDropDown很棒的下拉菜单，含精...
QQ在线联系网页代码
10款最受欢迎Web设计人员图标集免...
JQuery 获得div绝对,相对位置的坐...
关于HTML条件注释你可能不知道的...
Expression Blend实例中文教程(5...
2012年85个令人印象深刻的作品网...
HTML5&jQuery指向时图片从灰度变...

C#.net文件批量上传解决方案附下载
如何引导用户评论(用户检验)
kindeditor 批量上传加水印附源文件下载
ckeditor编辑器加+图片自动上传成功
前端设计js+Tab切换可关闭+添加并
js文字上下滚动+左右滚动兼容FF/IE
手机版 js图片浏览插件(附源代码下载)
ckeditor编辑器+finder配置上传功能
js识别手机访问自动跳转到相应页面
css各种通用布局的解决方案

js 只选择选择时分秒的jq插件

用声音读出全文

关注我吧

2018/6/20 11:40:49 阅读次数:13216Tags: 插件时间

C#.net文件批量上传解决方案附下载
如何引导用户评论(用户检验)
kindeditor 批量上传加水印附源文件下载
ckeditor编辑器加+图片自动上传成功
前端设计js+Tab切换可关闭+添加并
js文字上下滚动+左右滚动兼容FF/IE
手机版 js图片浏览插件(附源代码下载)
ckeditor编辑器+finder配置上传功能
js识别手机访问自动跳转到相应页面

一、概述：

由于项目中需要使用到只选择时分秒的插件，而开始使用的laydate 插件必须要带日期所以，还是自己写一个时分的插件吧。

效果如图下：

js 只选择选择时分秒的jq插件

二、实例代码：（点击进入预览效果）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js 只选择选择时分秒的jq插件-幸凡学习网</title>
<style>
/* CSS Document */
html, body, div, p, ul,ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td,figure{margin:0;padding:0;font-weight:normal;}
em,i{font-style:normal;}
b{font-weight:normal;}
ul,li{list-style-type:none;}


.test{width:600px;margin:200px auto;line-height:38px;text-align:center;}
.txt{border:1px solid #e6e6e6;height: 36px;line-height: 36px;padding:0 9px;margin:0 5px;}
</style>
</head>

<body>
<div class="test">
<input type="text" class="txt selecttime" readonly value="" id="dtime1"  /><i class="ml10 mr10">-</i><input type="text" class="txt selecttime" readonly value="12:14:10" id="dtime2"/>
</div>

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<!--选择时分秒插件 -->
<script type="text/javascript" charset="utf-8" src="http://www.86y.org/demo/selecttime/selectime.js"></script>
</body>
</html>

插件下载地址： http://www.86y.org/demo/selecttime/selectime.js

使用说明：

必须填写input id
input class必须包含selecttime,可以初始value 如(12:59:10)也可以为空
插件会自动根据input的位置自动显示在input位置下左下方

三、结语：

本插件比较方便引用到页面即可使用。如果有更好的建议欢迎打扰！

大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：【幸凡前端技术交流群】

如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=860【js 只选择选择时分秒的jq插件】幸凡学习网

如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)