githubblog/js/function.js

/**
 * 轻量级控件，调用函数生成时间选择控件，确认后调用回调函数返回data;
 * @param cb 回调函数 例:selectTime(function(data){console.log(data.time.toString()))}
 */
var selectTime = function(cb){
    var html = '<div id="time-line" style="width:100%;background-color:#eee;font-size:0px;position:fixed">'
        +'<div style="width:70%;margin:0px auto;position:relative">'
        +        '<div class="focus" style="position:absolute;height:30px;background-color:rgba(236, 154, 154, 0.11);top:60px;left:0px;width:100%;border-radius:30px;">'
        +            '<div style="line-height: inherit;font-size: inherit;display: inline;position:absolute;left:30%;">:</div>'
        +           '<div style="line-height: inherit;font-size: inherit;display: inline;position:absolute;right:30%;">:</div>'
        +       '</div>'
        +       '<div class="hour" style="width:33.33%;height:100%;display:inline-block;overflow:hidden;position:relative;">'
        +           '<ul style="padding:0px;margin:0px;width: 100%;height:480%;;font-size:initial;display:block;position: absolute;top:60px;">'
        +           '</ul>'
        +       '</div>'
        +       '<div class="minute" style="width:33.33%;height:100%;display:inline-block;overflow:hidden;position:relative;">'
        +            '<ul style="padding:0px;margin:0px;width: 100%;height:1200%;;font-size:initial;display:block;position: absolute;top:60px;">'
        +            '</ul>'
        +        '</div>'
        +        '<div class="second" style="width:33.33%;height:100%;display:inline-block;overflow:hidden;position:relative;">'
        +            '<ul style="padding:0px;margin:0px;width: 100%;height:1200%;font-size:initial;display:block;position: absolute;top:60px;">'
        +            '</ul>'
        +        '</div>'
        +        '<div class="make-cancel"style="position:absolute;height:100%;width:20%;background-color:rgb(255, 75, 75);left:-20%;top:0px;">'
        +            '<div style="display: table;height: 100%;width: 100%">'
        +                '<div style="display:table-cell;font-size: initial;vertical-align: middle">'
        +                    '<div style="font-size: initial;text-align: center;font-weight: bold;color: white;">'
        +                        '取消'
        +                    '</div>'
        +                '</div>'
        +            '</div>'
        +        '</div>'
        +        '<div class="make-sure"style="position:absolute;height:100%;width:20%;background-color:rgb(85, 219, 102);right:-20%;top:0px;">'
        +            '<div style="display: table;height: 100%;width: 100%">'
        +                '<div style="display:table-cell;font-size: initial;vertical-align: middle">'
        +                    '<div style="font-size: initial;text-align: center;font-weight:bold;color:white;">'
        +                        '确认'
        +                    '</div>'
        +                '</div>'
        +            '</div>'
        +        '</div>'
        +    '</div>'
        +'</div>'
    $("body").append(html);

    var html = "<li style='list-style:none;height:4.16667%;width:50%;margin:0px auto;text-align: center'>";
    for(var i = 0;i<24;i++){
        if(i<10){
            $("#time-line .hour ul").append(html+"0"+i+"</li>");
        }else{
            $("#time-line .hour ul").append(html+i+"</li>")
        }
    }

    var html = "<li style='list-style:none;height:1.66667%;width:50%;margin:0px auto;text-align: center;'>";
    for(var i = 0;i<60;i++){
        if(i<10){
            $("#time-line .minute ul").append(html+"0"+i+"</li>");
        }else{
            $("#time-line .minute ul").append(html+i+"</li>")
        }
    }

    var html = "<li style='list-style:none;height:1.66667%;width:50%;margin:0px auto;text-align: center;'>";
    for(var i = 0;i<60;i++){
        if(i<10){
            $("#time-line .second ul").append(html+"0"+i+"</li>");
        }else{
            $("#time-line .second ul").append(html+i+"</li>")
        }
    }

    var liHeight = 30;
    var startY;//按下抬起的开始点
    var touchPosition;//触摸点
    var beginY;//计算速度开始位置，随时更新
    var v;//滑动速度
    var time = {};
    time.toString = function(){
        return time.hours+":"+time.minutes+":"+time.seconds;
    }
    $("#time-line").css("height",liHeight*5+"px")
    $("#time-line .focus").css("lineHeight",liHeight+"px").css("fontSize",liHeight+"px").css("color","#55DB66")

    $("#time-line ul li:nth-child(1)").each(function(){
        $(this).css("color","#55DB66")
        $(this).css("fontSize",liHeight+"px")
    });

    $("#time-line ul li").css("line-height",parseInt($("#time-line ul li").css("height"))+"px")

    $("#time-line ul").bind("touchstart",function(event){
        if(event.originalEvent.targetTouches.length == 1){
            event.preventDefault();
            var touch = event.originalEvent.targetTouches[0];
            startY = touch.screenY;
            touchPosition = touch.screenY;

            //开始记录
            setInterval(function(){
                beginY = touchPosition;
                setTimeout(function(){
                    var count =(touchPosition - beginY)/100
                    if(Math.abs(count) > 0.5){
                        v = count;
                    }else{
                        v = 0;
                    }
                },200)
            },100);
        }
    })

    $("#time-line ul").bind("touchmove",function(event){
        if(event.originalEvent.targetTouches.length == 1){
            event.preventDefault();
            var touch = event.originalEvent.targetTouches[0];
            var top = $(this).css("top");
            var offset = touch.screenY-startY;
            startY = touch.screenY;
            touchPosition = touch.screenY;
            $(this).css("top",(parseInt(top)+offset)+"px");

            var nowTop = parseInt($(this).css("top"));
            var index = Math.round((liHeight*3-nowTop)/liHeight);
            $(this).find("li").each(function(){
                $(this).css("color","")
                $(this).css("fontSize","initial")
            })
            $(this).find("li:nth-child("+index+")").each(function(){
                $(this).css("color","#55DB66")
                $(this).css("fontSize",liHeight+"px")
            })
        }
    })

    $("#time-line ul").bind("touchend",function(event){
        //惯性滑动
        var s = v * 300;
        var b = parseInt($(this).css("top"));
        $(this).animate({top:(b+s)+"px"},v*10,function(){
            var nowTop = parseInt($(this).css("top"));
            $(this).css("top",Math.round((nowTop/liHeight))*liHeight+"px")

            var nowTop = parseInt($(this).css("top"));
            var ulHeight = $(this).height();
            //计算溢出
            if(nowTop > liHeight*2){
                //向下溢出
                $(this).animate({top:liHeight*2+"px"},1,function(){
                    $(this).find("li").each(function(){
                        $(this).css("color","")
                        $(this).css("fontSize","initial")
                    });
                    var index = Math.round((liHeight*3-nowTop)/liHeight);
                    var i = 0;
                    $(this).find("li:nth-child(1)").each(function(){
                        $(this).css("color","#55DB66")
                        $(this).css("fontSize",liHeight+"px")
                    })
                })
            }else if(nowTop < -(ulHeight-liHeight*3)){
                //向上溢出
                $(this).animate({top: -(ulHeight-liHeight*3)+"px"},1,function(){
                    $(this).find("li").each(function(){
                        $(this).css("color","")
                        $(this).css("fontSize","initial")
                    });
                    $(this).find("li:nth-last-child(1)").each(function(){
                        $(this).css("color","#55DB66")
                        $(this).css("fontSize",liHeight+"px")
                    })
                })
            }else{
                //定位
                $(this).animate({top:nowTop+"px"},1,function(){
                    $(this).find("li").each(function(){
                        $(this).css("color","")
                        $(this).css("fontSize","initial")
                    });
                    var index = Math.round((liHeight*3-nowTop)/liHeight);
                    $(this).find("li:nth-child("+index+")").each(function(){
                        $(this).css("color","#55DB66")
                        $(this).css("fontSize",liHeight+"px")
                    })
                })
            }
        });
    })

    $("#time-line .make-sure").bind("click",function(){
        $("#time-line .hour ul").each(function(){
            index = Math.abs((parseInt($(this).css("top"))-liHeight*2)/liHeight);
            time.hours = $(this).find("li:nth-child("+(index+1)+")").html();
        })
        $("#time-line .minute ul").each(function(){
            index = Math.abs((parseInt($(this).css("top"))-liHeight*2)/liHeight);
            time.minutes = $(this).find("li:nth-child("+(index+1)+")").html();
        })
        $("#time-line .second ul").each(function(){
            index = Math.abs((parseInt($(this).css("top"))-liHeight*2)/liHeight);
            time.seconds = $(this).find("li:nth-child("+(index+1)+")").html();
        })
        $("#time-line").animate({top:'-100%'},400,"linear",function(){
            $(this).remove();
            if(cb instanceof Function){
                var data = {};
                data.time = time;
                cb(data)
            }
        })
    })
    $("#time-line .make-cancel").bind("click",function(){
        $("#time-line").animate({left:'-100%'},400,"linear",function(){
            $(this).remove();
        });
    })
}