js 实现点击加载-删除-排序-去重时间选择

ゞ浴缸里的玫瑰 2023-06-19 03:00 65阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95c3B4eXouYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95c3B4eXouYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1][]

<!doctype html>  
<html lang="en">  
 <head>  
  <meta charset="UTF-8">  
  <meta name="Generator" content="EditPlus®">  
  <meta name="Author" content="">  
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
  <title>Document</title>  
 </head>  
 <body>  
        <label class="layui-form-label">时间修改:</label>  
        <div class="layui-card-body"  >  
          <div id="card" style='width:400px;height:500px' ></div>  
        </div>  
 </body>  
 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>  
 <script>  
       var start='2019-01-01';  
      var end='2019-02-12';  
    showTime(start,end);  
//显示时间  
  function showTime(start,end)\{   
   
    var dateOnly = dataScope(start,end);  
    var date=getOnlyDate(dateOnly);  
    var dateArr=getMaxMinArr(date);  
    var \_html =''  
    var count = 0;  
    for ( var i = 0; i <dateArr.length; i++)\{  
      \_html += "<span class='tag label label-info' style='float:left;margin:2px;' data ='"+dateArr\[i\]+"'>" +  
              "<font color='\#006400'>"+dateArr\[i\]+"</font>" +  
              "<span class='label label-info' data-role='remove'><font color='red'>X</font> <i style='color: mediumvioletred' class='layui-icon layui-icon-close-fill'></i></span></span>";  
      count++;  
    \}   
    $("\#card").append(\_html);  
  \}  
  //日期删除  
  $("\#card").on("click",'span',function()\{  
    $(this).remove();  
  \})  
    //时间排序  
  function getMaxMinArr(array) \{  
    if(Object.prototype.toString.call(array).slice(8,-1) ==='Array')\{  
      for (var i = 1; i < array.length; i++) \{  
        var key = array\[i\];  
        var j = i - 1;  
        while (j >= 0 && array\[j\] > key) \{  
          array\[j + 1\] = array\[j\];  
          j--;  
        \}  
        array\[j + 1\] = key;  
      \}  
      return array;  
    \}else\{  
      return 'array is not an Array!';  
    \}  
  \}  
  //时间去重  
  function getOnlyDate(dateArr) \{  
    var dateNew=\[\];  
    dateNew=dateArr;  
    var span= $('\#card').find('.tag');  
    for (var i= 0; i<span.length; i++) \{  
      var spanTemp = span\[i\];  
      var dateName = spanTemp.getAttribute('data');  
      dateNew.push(dateName);  
    \}  
    //开始去重  
    var ret = \[\];  
    for (var i = 0; i < dateNew.length; i++) \{  
      if (dateNew.indexOf(dateNew\[i\]) == i) \{  
        ret.push(dateNew\[i\]);  
      \}  
    \}  
    $("span.tag").remove();  
    return ret;  
  \}

//计算时间差  
  function  dataScope(value1, value2) \{  
    var getDate = function(str) \{  
      var tempDate = new Date();  
      var list = str.split("-");  
      tempDate.setFullYear(list\[0\]);  
      tempDate.setMonth(list\[1\] - 1);  
      tempDate.setDate(list\[2\]);  
      return tempDate;  
    \}  
    var date1 = getDate(value1);  
    var date2 = getDate(value2);  
    if (date1 > date2) \{  
      var tempDate = date1;  
      date1 = date2;  
      date2 = tempDate;  
    \}  
    date2.setDate(date2.getDate() + 1);  
    date1.setDate(date1.getDate() );

date1.setDate(date1.getDate() + 1);  
    \}  
    return dateArr;  
  \}  
 </script>  
</html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95c3B4eXouYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191204134452847.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly95c3B4eXouYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly95c3B4eXouYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191218165558397.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly95c3B4eXouYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70