前端那些事之jquery日期插件（面向对象）

最新推荐文章于 2021-06-04 03:53:10 发布
weixin_34383618
最新推荐文章于 2021-06-04 03:53:10 发布
阅读量155
点赞数
文章标签： javascript 前端 python ViewUI
原文链接：https://my.oschina.net/yongxinke/blog/838744
版权
2019独角兽企业重金招聘Python工程师标准>>>
#日期插件（面向对象）

<!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>
转载于:https://my.oschina.net/yongxinke/blog/838744