前端那些事之jquery时间组件（面向过程）

最新推荐文章于 2024-03-07 18:29:35 发布
weixin_33828101
最新推荐文章于 2024-03-07 18:29:35 发布
阅读量285
点赞数
文章标签：前端 javascript python ViewUI
原文链接：https://my.oschina.net/yongxinke/blog/832918
版权
2019独角兽企业重金招聘Python工程师标准>>>
jquery时间组件（面向过程）

<!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 class="timerPicker">
    <input type="text" class="input" 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>
<script src="jquery/jquery-2.2.4.js"></script>
<script>
    $(function () {
        //动态添加时，分，秒的数据
        function getDate() {
            /**********第一种方法*************/
//            var $container = $(".timerPicker .container");
//            var $hours = $container.find(".hours");
//            var $minutes = $container.find(".minutes");
//            var $secondes = $container.find(".secondes");
//            for (var i = 0; i < 60; i++) {
//                i < 24 && $hours.append("<li>" + i + "</li>");
//                $minutes.append("<li>" + i + "</li>");
//                $secondes.append("<li>" + i + "</li>");
//            }
            /***************第二种方法效率高************************/
            var $container = $(".timerPicker .container");
            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 && $container.find(".hours").html(html);
                html += "<li>" + (i<10?"0"+i:i) + "</li>";
            }
            $container.find(".minutes").html(html);
            $container.find(".secondes").html(html);
        }

        function setFiledValue($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(":"));
           setSelection($contar[0],start,start+2);
        }

        getDate();
        $('.timerPicker .input').on("focus", function () {
            $(this).addClass("slecting").nextAll(".container").show();
            if (!this.value) {
                this.value = getTime();
                var timer = this.value.split(":");
                var $container = $(".timerPicker .container");
               var $first= $container.find(".hours");
               setFiledValue($first,timer[0]);
               setFiledValue($first=$first.next(),timer[1]);
               setFiledValue($first=$first.next(),timer[2]);

//                alert(Number(timer[0]));
            }
            //调用光标选择部分的工具涵数
            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 () {
            /***********第一种方法******/
            //根据选择的name显示光标选择的大小
//            var input = $(this).parent().prevAll("input")[0];//原生dom元素
            console.log($(this).index());
//            switch ($(this).index()) {
//                case 0:
//                    //只接收原生dom元素
//                    setSelection(input, 0, 2);
//                    break;
//                case 1:
//                    setSelection(input, 3, 5);
//                    break;
//                case 2:
//                    setSelection(input, 6, 8);
//                    break;
//            }

            /************第二种方法*******/
            var input = $(this).parent().prevAll("input")[0];//原生dom元素
            var start = $(this).index() * 2 + $(this).index();
            setSelection(input, start, start + 2);
        }).on("wheel", function (event) {//实现滚动效果
            //根据event.originalEvent.wheelDelta是数还是负数实现向上滚动还是向下滚动
//            console.log(event.originalEvent.wheelDelta);
            //var $feild = $(event.target);//拿到是每一个Li,子元素
            var $feild = $(event.currentTarget);//拿到是当前的父对象.hours
            var currValue = Number($feild.attr("value"));//自定义属性
//            console.log($feild);
//            console.log(value);
            if (event.originalEvent.wheelDelta < 0) {
                currValue++;
            } else {
                currValue--;
            }
            //用涵数代替
            setFiledValue($feild,currValue);

//            $feild.attr("value", currValue).css({
//                transform: "translatey(-" + currValue * 24 + "px)"
//            })
        })

//        $('.timerPicker .container').on("mouseover", function () {
//            $(this).attr("slecting", "true");
//        }).on("mouseout", function () {
//            $(this).attr("slecting", "false");
//        })

        //input光标选中部分，工具涵数
        function setSelection(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)
        }

        //封装获得当前时间的涵数
        function getTime() {
            //toTimeString().substr(0,8),格式为：XX:XX:XX
            return new Date().toTimeString().substr(0, 8);
            //toTimeString().substr(0,8),格式为：XX:XX:XX
//            return new Date().toLocaleString();
            //2017年2月5日  xx:xx:xx
        }

    });
</script>
</body>
</html>
转载于:https://my.oschina.net/yongxinke/blog/832918