jq制作插件，均匀分布日期的进度条插件制作（可以拖动，可以按需设置初始化位置，起始和截至时间，定时移动进度）

jq插件制作（进度条，可传普通参数或是回调函数都可以）

先来一张图直观看一下效果吧

通常jq的插件包含两个文件，一个是它的css文件，还有一个就是js文件了。
通常有两种方式写插件
$.fn.extend和$.extend具体区别就是调用方式不同
我用的是$.fn.extend为了避免运用插件时css标签命名的冲突，通常设置的名称都比较特殊或很长或。。。这里只是提醒大家在制作插件的时候要避免在页面运用时命名冲突的问题。还有一个小问题，不一定遇得到，就是同一个页面里面有两处调用该插件要注意的地方，我是在js中开始用that接了一下作用域this，varthat=this,在处理css效果时，都采用that.find()方式，这样在操作时，只会改变对应插件的样式了，低逼格方法，大佬勿喷哈哈。先看页面调用插件的方法（首页页面要引入插件的css和js）我写了一个show方法来控制它的调用，插件的调用主要是$(‘元素’).progress()这种方式
$(function(){
function show(obj){
var start=obj.start
var end= obj.end
$(‘body’).progress({
callback:function(i,j){
console.log(i,j)
},
data:{‘name’:‘aa’,‘age’:20,‘startset’:0,‘start’:start,‘end’:end}
}
);
}
show({start:‘2018/6/8 00:00:00’,end:‘2020/8/8 00:00:00’})

})

再来看具体的js，基本我都注释了

;(function ($) {
       $.fn.progress=function (options) {
        //解决this指向性问题
        var that=this
        //控件放于用户指定容器
        this.append(`<div class="container">
        <div class='timesliderstart'></div>
        <div class='timesliderend'></div>
        <div class="progress"><div class='move'><div class='time'></div></div></div>
        <div class="start">开始</div><div class="end">暂停</div>
    </div>`)
    //设置起始时间
    var start=options.data.start
    var starttime=new Date(start)
    that.find('.timesliderstart').html(forMatestartandEndTime(starttime))
    //设置结束时间
     var end=options.data.end
     var endtime=new Date(end)
      that.find('.timesliderend').html(forMatestartandEndTime(endtime))
    //获取进度条宽度
    var width=$(this).find('.container').outerWidth()
    //时间分布部分
           //获取设置的结束时间
           var date=new Date(end)
           //获取对应时间毫秒数
           var time_start = new Date(start).getTime()
           //获取截至时间的毫秒数
           var time_end=date.getTime()
           console.log(date)
           //获取进度条之间总毫秒数
           var totalTime=time_end-time_start
           //计算出从开始到结束时间内五秒的分段数量
           var timeDifference=totalTime/5000
           //计算出每五秒应该移动的距离
           var moveDistance=width/timeDifference
           //移动距离起始位置的距离
           var range=0
           //判断进度条是否可以拖动
           var canmove=false
           //设置全局定时器，便于控制
           var timer=null
           //设置变量控制不可多次触发开始方法
           var started=false
          //处理开始与截至时间显示
          function forMatestartandEndTime(date){

            var t1 = date.getFullYear();
               var t2 = date.getMonth()+1;
               var t3 = date.getDate();
               var t4 = date.getHours()
               var t5=date.getMinutes()
               var t6=date.getSeconds()
               return(t1 +'年'+t2+'月'+t3+'日'+t4 +'时'+t5+'分'+t6+'秒')
        }
           //处理时间格式公共方法
    function forMateTime(obj){
        var total=obj+time_start
        var date=new Date(total)
        var t1 = date.getFullYear();
           var t2 = date.getMonth()+1;
           var t3 = date.getDate();
           var t4 = date.getHours()
           var t5=date.getMinutes()
           var t6=date.getSeconds()
           return(t1 +'年'+t2+'月'+t3+'日'+t4 +'时'+t5+'分'+t6+'秒')
    }
    //处理进度条移动时各阶段日期公共方法
    function getProgressTime(){
        var time=range/width*totalTime
        return(forMateTime(time))
    }
         //初始化
    function startSet(){
        range=options.data.startset
        that.find('.progress').css({'width':`${range}px`})
    }
       startSet()
        //点击拖动js部分
    that.find('.move').mousedown(function(){
        canmove=!canmove
    })
    $(window).mouseup(function(){
        if(canmove){
            canmove=!canmove
            started=false
            // clearInterval(timer)
            // timer=null
        }
    })
    
   that.find('.container').mousemove(function(e){
       if(canmove){
          //精确控制range在0-width区间内，加一
           range=e.pageX-$(this).offset().left+1
           if(range>width){
               range=width
           }
           if(range>=0&&range<=width){
            $(this).find('.progress').css({'width':`${range}px`})
           }
           if(options.callback&&range>=0&&range<=width){
               //移动显示时间
               that.find('.time').html(getProgressTime())
            //执行回调
            options.callback(options.data.age,getProgressTime())
           }
       }
   })
   //点击开始js部分
        that.find('.start').click(function(){
            if(range<width){
            if(!started){
                that.find('.start').css({'background':'grey'})
                that.find('.end').css({'background':'white'})
            started=true
            
            timer=setInterval(function(){
                
                range+=moveDistance
                if(range>width){
                    that.find('.progress').css({'width':`${width}px`})
                    timer=null
                    clearInterval(timer)
               that.find('.time').html(forMatestartandEndTime(endtime.getTime()))
                    return false

                }
                    that.find('.progress').css({'width':`${range}px`})
                if(options.callback){
                    //执行回掉函数
                    if(range<=width){
                    options.callback(options.data.name,getProgressTime())
                    }
                }
                //悬浮时间
                that.find('.time').html(getProgressTime())
                if(range>=width){
                    //清除定时器
                    clearInterval(timer)
                    timer=null
                }
            },5000)//设置定时时间为5000毫秒
            
        }
        else{
            return false
        }
    }
    else{
        return false
    }
        })
        //点击暂停js部分
        that.find('.end').click(function(){
            that.find('.start').css({'background':'white'})
            that.find('.end').css({'background':'grey'})
            started=false
            //清除定时器
            clearInterval(timer)
        })
        };
    })(jQuery);

为了完整性也给一下css代码吧

.container{
    width: 400px;
    height: 20px;
    border: 1px solid grey;
    position:fixed;
    bottom: 40px;
    z-index: 999;
    left: calc(50% - 200px)
}
.time{
    user-select: none;
    font-size: 12px;
    position: absolute;
    bottom: -30px;
    left: -50px;
    width: 100px;
    text-align: center;
    color: red;
}
.timesliderstart{
    user-select: none;
    font-size: 12px;
    position: absolute;
    top: -40px;
    left: -50px;
    width: 100px;
    text-align: center;
}
.timesliderend{
    user-select: none;
    font-size: 12px;
    position: absolute;
    top: -40px;
    right: -50px;
    width: 100px;
    text-align: center;
}
.progress{
    position: absolute;
    background: grey;
    width: 0;
    height: 100%;
    cursor: pointer;
}
.move{
    position: absolute;
    right: 0;
    width: 5px;
    height: 30px;
    top: -5px;
    background: red;

}
.start{
    user-select: none;
    width: 50px;
    text-align: center;
    height: 20px;line-height: 20px;
    position: absolute;
    right:-60px;
    cursor: pointer;
    border: 1px solid grey;
    border-radius: 3px;
}
.end{
    user-select: none;
    width: 50px;
    text-align: center;
    height: 20px;line-height: 20px;
    position: absolute;
    right:-120px;
    cursor: pointer;
    border: 1px solid grey;
    border-radius: 3px;
}

再看一下html内代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./jindutiao/index.css">
</head>
<body>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="./jindutiao/index.js"></script>
    <script>
    $(function(){
        function show(obj){
            var start=obj.start
            var end= obj.end
           $('body').progress({
           callback:function(i,j){
               console.log(i,j)
           },
           data:{'name':'aa','age':20,'startset':0,'start':start,'end':end}
        }
   );
        }
        show({start:'2018/6/8 00:00:00',end:'2020/8/8 00:00:00'})
        
    })
    </script>
</body>
</html>

最后给一下目录结构，直观看结构

js文件中都是常用的代码，我就不多说了，大家自己看看吧