#日期插件(面向对象)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时间的组件(使用的是奥森字体)</title>
<link rel="stylesheet" href="fontawesome-4.2.0/css/font-awesome.min.css">
<style>
html, body, input, ul, li {
padding: 0;
margin: 0;
font-family: Arial, "microsoft Yahei";
font-size: 12px;
}
ul, li {
list-style: none;
outline: none;
}
.timerPicker {
position: relative;
top: 100px;
left: 40%;
display: inline-block;
}
.timerPicker .input {
border: 0;
outline: none;
height: 30px;
text-indent: 10px;
border-radius: 6px;
width: 98px;
line-height: 30px;
border: 1px solid #d9d9d9;
/*border-bottom: none;*/
color: #666;
/*transition: all .1s;*/
box-shadow: 0 1px 6px hsla(0, 0%, 39%, .2);
/*border-bottom-color: #fff;*/
}
.timerPicker .input:hover {
border-color: #57c5f7;
}
.timerPicker .input.slecting {
width: 164px;
height: 30px;
box-shadow: 0 1px 6px hsla(0, 0%, 39%, .2);
border-radius: 6px 6px 0 0;
border-bottom: 1px solid #e9e9e9;
}
.timerPicker .input:focus:hover {
border-color: #e9e9e9;
}
.timerPicker .input.slecting ~ .fa.fa-times-circle {
display: block;
}
.timerPicker .input.slecting ~ .fa.fa-clock-o {
display: none;
}
.timerPicker .fa {
color: #999;
font-size: 16px;
position: absolute;
top: 8px;
right: 10px;
cursor: pointer;
}
.timerPicker .fa.fa-times-circle {
display: none;
cursor: pointer;
}
.timerPicker .container {
width: 99%;
height: 144px;
border: 1px solid #d9d9d9;
position: absolute;
top: 31px;
left: 0;
border-radius: 0 0 6px 6px;
box-shadow: 0 1px 6px hsla(0, 0%, 39%, .2);
background-color: #fff;
border-top: none;
overflow: hidden;
}
.timerPicker .container ul {
float: left;
width: 33%;
transition: all .5s;
}
.timerPicker .container ul li {
border-left: 1px solid #e9e9e9;
border-right: 1px solid #fff;
text-align: center;
height: 24px;
line-height: 24px;
cursor: pointer;
color: #666;
transition: all .5s;
}
.timerPicker .container ul li:hover {
background-color: #abcdef;
}
.timerPicker .container ul:last-child li {
border-right: none;
}
.timerPicker .container::before {
content: '';
width: 100%;
height: 24px;
position: absolute;
top: 0;
left: 0;
background-color: #f7f7f7
}
.timerPicker .container {
display: none;
}
</style>
</head>
<body>
<div id="timperPicker"></div>
<script src="jquery/jquery-2.2.4.js"></script>
<script>
$.fn["timePicker"] = function (options) {
//设置一个默认对象
var __DEFULAT__ = {
placeholder: "请选择时间"
}
//定义一个初始化对象
var __PROPT__ = {
//工具涵数
//封装获得当前时间的涵数
getTime: function () {
return new Date().toTimeString().substr(0, 8);
},
//input光标选中部分,工具涵数
setSelection: function (input, startPos, endPos) {
window.setTimeout(function () {
if (typeof input.selectionStart != "undefined") {
input.selectionStart = startPos;
input.selectionEnd = endPos;
} else if (document.selection && document.selection.createRange) {
//兼容ie版本
input.select();
var range = document.selection.createRange();
range.collapse(true);
range.moveStart("character", startPos);
range.moveEnd("character", endPos);
range.select();
}
}, 50)
},
//设置时分秒
setFiledValue: function ($filed, value) {
value = Number(value);
value = Math.max(value, 0);
$filed.attr("value", value).css({
transform: "translatey(-" + value * 24 + "px)"
})
var index = $filed.index();
var start = index * 2 + index;
var $contar = $filed.parent().prevAll(".input");
var timers = $contar.val().split(":");
timers[index] = value < 10 ? "0" + value : value;
$contar.val(timers.join(":"));
this.setSelection($contar[0], start, start + 2);
},
_init: function () {
this.html(
'<div class="timerPicker">' +
'<input type="text" class="input" placeholder="' + this.options.placeholder + '">' +
'<i class="fa fa-clock-o"></i>' +
' <i class="fa fa-times-circle"></i>' +
' <div class="container">' +
' <ul class="hours">' +
' </ul>' +
' <ul class="minutes">' +
' </ul>' +
' <ul class="secondes">' +
' </ul>' +
' </div>' +
' </div>'
);
//生成数据
this.$container = this.find(".timerPicker .container");
this.$hours = this.$container.find(".hours");
this.$minutes = this.$container.find(".minutes");
this.$seconds = this.$container.find(".secondes");
var html = "";
for (var i = 0; i < 60; i++) {
// i == 24 && $container.find(".hours").html(html);
// 相当于if(i==24){$container.find(".hours").html(html)}
i == 24 && this.$hours.html(html);
html += "<li>" + (i < 10 ? "0" + i : i) + "</li>";
}
this.$minutes.html(html);
this.$seconds.html(html);
},
//绑定dom事件
bindDom: function () {
var $this = this;
$this.find(".input").on("focus", function () {
$(this).addClass("slecting").nextAll(".container").show();
if (!this.value) {
this.value = $this.getTime();
var timer = this.value.split(":");
var $first = $this.$hours;
$this.setFiledValue($first, timer[0]);
$this.setFiledValue($first = $first.next(), timer[1]);
$this.setFiledValue($first = $first.next(), timer[2]);
// alert(Number(timer[0]));
}
//调用光标选择部分的工具涵数
$this.setSelection(this, 0, 8);
}).on("blur", function () {
var $selects = $(this).nextAll(".container");
var selecting = $selects.attr("selecting");
if (!selecting || selecting == "false") {
$selects.hide();
$(this).removeClass("slecting");
}
}).nextAll(".fa-times-circle").on("click", function () {
$(this).prevAll("input").val().trigger("blur");
})
.nextAll(".container").hover(function () {
$(this).attr("slecting", "true");
}, function () {
$(this).attr("slecting", "false");
}).find("ul").on("mouseover", function () {
/************第二种方法*******/
var input = $(this).parent().prevAll("input")[0];//原生dom元素
var start = $(this).index() * 2 + $(this).index();
$this.setSelection(input, start, start + 2);
}).on("wheel", function (event) {//实现滚动效果
var $feild = $(event.currentTarget);//拿到是当前的父对象.hours
var currValue = Number($feild.attr("value"));//自定义属性
if (event.originalEvent.wheelDelta < 0) {
currValue++;
} else {
currValue--;
}
//用涵数代替
$this.setFiledValue($feild, currValue);
})
}
}
this.options = $.extend(__DEFULAT__, options);//如果后面的值会覆盖前面的值,
// 把前面的对象返回回去,如果后面没有值会显示前面的值
$.extend(this, __PROPT__);//把这个对象放到当前的Jquery对象中
//调用初始化方法
this._init();
//调用绑定dom事件
this.bindDom();
}
$(function () {
$("#timperPicker").timePicker({
placeholder: "请选择生日"
})
});
</script>
</body>
</html>