进度条点击选择时间段

最新推荐文章于 2023-04-06 20:28:54 发布
最新推荐文章于 2023-04-06 20:28:54 发布
阅读量965 收藏
点赞数
分类专栏： Javascript CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44446223/article/details/89457016
版权

hotmap.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="hotmap.css">
</head>
<link href="<%=basePath%>assets/js/plugin/bootstrapSelect/css/bootstrap-select.min.css?v=0.0.0.1" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="hotmap2.js"></script>

  <body>
    <div id="hotmapbox">
        <div class="populationdensity">
            <p class="populationtop clearfloat">
                <span class="populatiol">颜色对应人口密度</span><span class="populatior">人/100平方米</span>
            </p>
            <p class="populationcenter">
                <img src="populationdensity.png" alt="">
            </p>
            <div class="populationb">
                <ul>
                    <li><span class="spone">0-5</span></li>
                    <li><span class="sptwo">6-11</span></li>
                    <li><span class="spthree">12-17</span></li>
                    <li><span class="spfour">18-20</span></li>
                    <li><span class="splast">>20</span></li>
                </ul>
            </div>
        </div>
        <!-- <div id="searchbtn" class="BMapLib_box BMapLib_rectangle BMapLib_last" drawingtype="rectangle"  title="画矩形" onfocus="this.blur()">
            <p>区域框选</p>
      </div> -->
        <div id="hotmap">

        </div>
        <div id="progressbar">
           <div class="barinterval">
                <div class="line">
                </div>
           </div>
           <div id="timebar">
                <div class="colorline">
                   
                </div><!-- 背景条 -->
                <div class="showtime">
                        <span class="showtimeinfo"></span>
                        
                </div> <!--显示时间  -->
                <ul class='timer clearfloat'>
                        <li  class="sq"><p  id="sq0"></p><div>00:00</div></li>
                        <li  class="sq"><p  id="sq1"></p><div>01:00</div></li>
                        <li  class="sq"><p  id="sq2"></p><div>02:00</div></li>
                        <li  class="sq"><p  id="sq3"></p><div>03:00</div></li>
                        <li  class="sq"><p  id="sq4"></p><div>04:00</div></li>
                        <li  class="sq"><p  id="sq5"></p><div>05:00</div></li>
                        <li  class="sq"><p  id="sq6"></p><div>06:00</div></li>
                        <li  class="sq"><p  id="sq7"></p><div>07:00</div></li>
                        <li  class="sq"><p  id="sq8"></p><div>08:00</div></li>
                        <li  class="sq"><p  id="sq9"></p><div>09:00</div></li>
                        <li  class="sq"><p  id="sq10"></p><div>10:00</div></li>
                        <li  class="sq"><p  id="sq11"></p><div>11:00</div></li>
                        <li  class="sq"><p  id="sq12"></p><div>12:00</div></li>
                        <li  class="sq"><p  id="sq13"></p><div>13:00</div></li>
                        <li  class="sq"><p  id="sq14"></p><div>14:00</div></li>
                        <li  class="sq"><p  id="sq15"></p><div>15:00</div></li>
                        <li  class="sq"><p  id="sq16"></p><div>16:00</div></li>
                        <li  class="sq"><p  id="sq17"></p><div>17:00</div></li>
                        <li  class="sq"><p  id="sq18"></p><div>18:00</div></li>
                        <li  class="sq"><p  id="sq19"></p><div>19:00</div></li>
                        <li  class="sq"><p  id="sq20"></p><div>20:00</div></li>
                        <li  class="sq"><p  id="sq21"></p><div>21:00</div></li>
                        <li  class="sq"><p  id="sq22"></p><div>22:00</div></li>
                        <li  class="sq"><p  id="sq23"></p><div>23:00</div></li>
                        <li  class="sq"><p  id="sq24"></p><div>23:59</div></li>
                </ul>
        </div>
        </div>
       
    </div>
</body>

</html>

hotmap.css

#hotmapbox{
    width:1754px;
    height:772px;
    background: #778811;
    position: relative;
}
ul li{
    list-style:none;
}
/* 地图鼠标绘图框*/
.BMapLib_Drawing_panel{
  border:0  none!important;
}
.BMapLib_hander{
  display: none!important;
}
.BMapLib_marker{
  display: none!important;
}
.BMapLib_circle{
  display: none!important;
}
.BMapLib_polyline{
  display: none!important;
}
.BMapLib_polygon{
  display: none!important;
}
.BMapLib_rectangle_hover {
  display: inline-block!important;
  width: 138px!important;
  height: 48px!important;
  background:url(../images/searchbtn.png) no-repeat 10px 13px rgba(35,177,58,0.7)!important;
  border:2px solid rgba(35,177,58,1)!important;
  box-shadow:0px 3px 7px 0px rgba(0, 0, 0, 0.1)!important;
  border-radius:4px!important;
  position: absolute!important;
  top: 12px!important;
  right: 13px!important;
  z-index: 99999!important;
}
.BMapLib_rectangle{
  display: inline-block!important;
  width: 138px!important;
  height: 48px!important;
  background:url(../images/searchbtn.png) no-repeat 10px 13px rgba(35,177,58,0.7)!important;
  border:2px solid rgba(35,177,58,1)!important;
  box-shadow:0px 3px 7px 0px rgba(0, 0, 0, 0.1)!important;
  border-radius:4px!important;
  position: absolute!important;
  top: 12px!important;
  right: 13px!important;
  z-index: 99999!important;
}
.red{
  background: red;
}
.clearfloat:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0
  }
  
  #hotmapbox #searchbtn{
    /* display: none; */
    width: 138px;
    height: 48px;
    background:rgba(35,177,58,0.7);
    border:2px solid rgba(35,177,58,1);
    box-shadow:0px 3px 7px 0px rgba(0, 0, 0, 0.1);
    border-radius:4px; 
    position: absolute;
    top: 12px;
    right: 13px;
    z-index: 99999;
    }

    .BMapLib_rectangle p{
    height:48px;
    font-size:18px;
    line-height: 48px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    margin:0;
    color:rgba(255,255,255,1);
    text-align: center;
    padding-left:30px;
    background: url(../images/searchbtn.png) no-repeat 10px 13px;
    }
#hotmap{
    width: 100%;
    height: 100%;
    background:#ccc;
}
#hotmapbox .populationdensity {
    width:438px;
    height:98px;
    background:rgba(9,18,33,1);
    opacity:0.7;
    border-radius:10px;
    position: absolute;
    bottom: 120px;
    right: 15px;
    z-index: 99999;
    padding-left: 0.15px;
  }
  
  #hotmapbox .populationdensity .populationtop {
    width: 438px;
    height: 10px;
    font-family:NotoSansHans-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
    margin-top: 14px;
  }
  
  #hotmapbox .populationdensity .populationtop {
    font-size: 14px;
    margin-left: 12px;
  }
  
  #hotmapbox .populationdensity .populationtop .populatiol {
    float: left;
  }
  
  #hotmapbox .populationdensity .populationtop .populatior {
    float: right;
    padding-right: 30px;
  }
  
  #hotmapbox .populationdensity .populationcenter {
    margin:20px 0 0 10px;
    width: 409px;
    height: 10px;
    /* background: url(../images/new_first/populationdensity.png)no-repeat; */
  }
  
  #hotmapbox .populationdensity .populationcenter img {
    width: 100%;
    height: 100%;
    display: block;
    padding-top: 5px;
  }
  
  #hotmapbox .populationdensity .populationb {
    display: inline-block;
    font-family:NotoSansHans-Regular;
    font-weight:400;
    color:rgba(255,255,255,1)
  }
  
  #hotmapbox .populationdensity .populationb ul li {
    float: left;
  }
  
  /*  人口密度 数字排列*/
  #hotmapbox .populationdensity .populationb ul li span {
    display: inline-block;
    width: 42px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    /* margin-left: 25px; */
  }
  
  /*  人口密度 0-5 */
  #hotmapbox .populationdensity .populationb ul li .spone {
    /* padding-left: 5px; */
  }
  #hotmapbox .populationdensity .populationb ul li .sptwo{
      margin-left: 30px;
  }
  #hotmapbox .populationdensity .populationb ul li .spthree{
    margin-left: 40px;
  }
  #hotmapbox .populationdensity .populationb ul li .spfour{
    margin-left: 40px;
  }
  
  /*  人口密度 >20 */
  #hotmapbox .populationdensity .populationb ul li .splast {
    margin-left: 40px;
}
    /* padding-right: 0;
    padding-left: 25px; */
  

/* 进度条 */
  #progressbar{
      height: 104px;
      width: 100%;
      background:rgba(247,247,247,1);
      position: absolute;
      bottom: 0;
      left: 0;
  }
  #progressbar .barinterval{
    width:1664px;
      height: 10px;
      margin-top:52px;
      margin-left: 45px;
      /* background: red; */
  }
  #progressbar .barinterval .line{
    width:1664px;
    height:1px;
    background:rgba(228,228,228,1);
    box-shadow:0px 1px 2px 0px rgba(216,215,215,0.58);
  }
  #progressbar .barinterval .timeaxis li {
    width:24px;
    height:25px;
    background:rgba(247,247,247,1);
    opacity:0.9;
    border-radius:50%;
    float: left;
    margin-left: 49px;
  }
  #progressbar .barinterval .timeaxis{
      margin:0;
      padding: 0;
      position: absolute;
      left: 23px;
      top: 40px;
 }

  #progressbar .barinterval  .timeaxis li:first-child{
      margin: 0;
  }
  /* 时间 */
  /* 进度条背景 */
  #progressbar #timebar  .colorline{
    height: 10px;
    background: #BABABA;
    /* width: 1680px; */
    position: absolute;
    top: 52px;
    margin-left: 40px;
    /* left: 40px; */
  }
  /* 显示时间框 */
  #progressbar #timebar .showtime{
    width: 66px;
    height: 30px;
    background: url(./shoutime.png) no-repeat;
    position: absolute;
    top: 10px;
    display: none;
  }
  #progressbar #timebar .showtime .showtimeinfo{
    display: inline-block;
    font-size:12px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(255,255,255,1);
    width: 100%;
    text-align: center;
  }
  /* 圆点 */
  #progressbar #timebar .timer{
        position: absolute;
        top: 12px;
        left: 15px;
        padding: 0;
        z-index: 99999;
  }
  #progressbar #timebar  .timer li{
        width: 40px;
        float: left;
        margin-left: 30px;
        text-align: center;
  }
  #progressbar #timebar  .timer li p{
        width:24px;
        height:25px;
        background:#fff;
        border-radius:50% ;
        margin-left: 8px;
        margin-bottom: 5px;
  }
  #progressbar #timebar  .timer li span{
        padding: 0 0 0 0;
        margin: 0 0 0 0;
  }
  #progressbar #timebar  .timer li:first-child{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
  }

hotmap2.js

$(function () {

    // var $p = "<p>区域框选</p>"
    // console.log($p)
    // $('.BMapLib_rectangle').html("区域框选")
    // $('.BMapLib_rectangle_hover').html($p)
   
    // 进度条点击事件
    var arr = []; //保存点击的对象索引
    var fLeft = '';//进度条开始位置
    var fright = '';//时间框显示位置
    var lastpoint //保存最后一个时间点的索引
    var time = ''//显示时间
    $(".sq").on("click", function () {
        var index = $(this).index();
        var chang = '';//进度条长度   每次点击先清空
        $('.showtime').hide();
        $('.colorline').width(chang);
        if (arr.length == 2) {
            //清空数组
            arr = [];
            //清空背景颜色
            for (var i = 1; i <= 20; i++) {
                $(".sq").find('p').css({ background: "#fff" });
            }
        }
        arr.push(index);
        arr.sort(function (num1, num2) {
            if (num1 > num2) {
                return 1;
            } else {
                return -1;
            }
        });
        var num = arr[1] - arr[0]; //两个点击数索引相减的差
        chang = num * 70//进度条
        if (arr.length > 1) {
            fLeft = arr[0] * 70 //进度条第一个点击的开始位置
            fright = arr[1] * 70//进度条的最后一个时间点的位置
            // 进度条背景
            $('.colorline').width(chang);
            $('.colorline').css("left", fLeft);
            $('.showtime').css("left", fright);
            // 显示时间
            $('.showtime').show()//时间框显示
            // 判断最后一个点击的idnex是多少，如果是24 显示"23:59:59"，<10 +"0"，
            if (arr[1] < 10) {
                time = "0" + arr[1] + ":00:00";
                $('.showtimeinfo').html(time)//显示时间
            } else if (arr[1] >= 10 && arr[1] <= 23) {
                time = arr[1] + ":00:00";
                $('.showtimeinfo').html(time)//显示时间
            } else if (arr[i] = 24) {
                time = "23:59:59";
                $('.showtimeinfo').html(time)//显示时间
            }
        }
        //第一次点击显示的背景
        $(this).find('p').css({ background: "rgba(132,197,230,1)" });
        //两次点击的区间
        for (var i = arr[0]; i < arr[1]; i++) {
            // 渲染区间内的背景颜色
            $('#sq' + (i + 1)).css({ background: "rgba(132,197,230,1)" });
        }
        lastpoint = arr[1]//保存最后一个时间点的索引
        // 渲染最后一个时间点的背景颜色
        $('#sq' + lastpoint).css({ background: 'URl("point.png")no-repeat' });
    });
    //点击进度条事件end

    //地图
    // // 编写自定义函数,创建标注
    // function addMarker(point) {
    //     var marker = new BMap.Marker(point);
    //     map.addOverlay(marker);
    // }
    // // 添加标注
    // var map = new BMap.Map("hotmap"); 
    // var content = "<table>";
    // content = content + "<tr><td> 姓名：" + jsonObject.personName + "    " + jsonObject.personLevel + "    " + jsonObject.personTag + "</td></tr>";
    // content = content + "<tr><td> 时间：" + item.dateStr + "</td></tr>";
    // content = content + "<tr><td> 地点：" + item.address + "</td></tr>";
    // content += "</table>";
    // var infowindow = new BMap.InfoWindow(content);
    // marker.addEventListener("click", function () {
    //     this.openInfoWindow(infowindow);
    // });
    // // 热力图
    // var points = [
    //     { "lng": 116.418261, "lat": 39.921984, "count": 50 },
    //     { "lng": 116.423332, "lat": 39.916532, "count": 51 },
    //     { "lng": 116.419787, "lat": 39.930658, "count": 15 },
    //     { "lng": 116.418455, "lat": 39.920921, "count": 40 },
    //     { "lng": 116.418843, "lat": 39.915516, "count": 100 },
    //     { "lng": 116.416244, "lat": 39.920215, "count": 91 },
    //     { "lng": 116.41929, "lat": 39.915908, "count": 54 },
    //     { "lng": 116.422116, "lat": 39.919658, "count": 21 },
    //     { "lng": 116.4183, "lat": 39.925015, "count": 15 },
    //     { "lng": 116.421969, "lat": 39.913527, "count": 3 },
    //     { "lng": 116.422936, "lat": 39.921854, "count": 24 },
    //     { "lng": 116.41905, "lat": 39.929217, "count": 12 },
    //     { "lng": 116.424579, "lat": 39.914987, "count": 57 },
    //     { "lng": 116.42076, "lat": 39.915251, "count": 70 },
    //     { "lng": 116.425867, "lat": 39.918989, "count": 8 }];
    // var map = new BMap.Map("hotmap");
    // map.centerAndZoom(new BMap.Point(116.404, 39.915), 15);
    // var heatmapOverlay = new BMapLib.HeatmapOverlay({ "radius": 10, "visible": true, "opacity": 70 });
    // heatmapOverlay.setDataSet({ data:points,max: 100 });//data是热力图的详细数据
    // heatmapOverlay.show();

    // var selectedObjArr = [];
    // var defaultDistance = 25000;
    // var defaultCount = 10;
    // var maxCount = defaultCount;
    // function heatPointArr(PointArr) {
    //     selectedObjArr = [];
    //     var distance;

    //     for (var i = 0; i < PointArr.length; i++) {
    //         var count = defaultCount;
    //         for (var j = 0; j < PointArr.length - 1; j++) {
    //             distance = map.getDistance(PointArr[j], PointArr[j + 1]);
    //             if (distance < defaultDistance) {
    //                 count += (defaultDistance - distance) / defaultDistance;
    //             }
    //         }
    //         if (maxCount < count) {
    //             maxCount = count;
    //         }
    //         var obj = {};
    //         obj["lng"] = PointArr[i].lng;
    //         obj["lat"] = PointArr[i].lat;
    //         obj["count"] = Math.round(count);
    //         selectedObjArr.push(obj);
    //     }
    // }

    /**
       * 图形画完执行的方法
       *
       */
    //    function overlaycomplete(e) {
    //     this.localOverlay = e.overlay;
    //     var path = e.overlay.getPath();
    //     this.localOverlayPath = JSON.stringify(path);
    //     this.getLocalCars(1);
    //     $('#localModal').modal({
    //       backdrop: 'static'
    //     });
    //   }

      var overlaycomplete = function(e){
        overlays.push(e.overlay);
    };







    var map = new BMap.Map("hotmap");          // 创建地图实例
    var point = new BMap.Point(116.418261, 39.921984);
    map.centerAndZoom(point, 15);             // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(); // 允许滚轮缩放
 
    var overlays = [];
	var overlaycomplete = function(e){
        overlays.push(e.overlay);
        var path = e.overlay.getPath();//Array<Point> 返回多边型的点数组
        for(var i=0;i<path.length;i++){
            console.log("lng:"+path[i].lng+"\n lat:"+path[i].lat);
        }
    };
    var styleOptions = {
        strokeColor:"rgba(0,0,255,1)",    //边线颜色。
        fillColor:"#fff",      //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3,       //边线的宽度，以像素为单位。
        strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
        fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
        strokeStyle: 'dashed' //边线的样式，solid或dashed。
    }
    //实例化鼠标绘制工具
    var drawingManager = new BMapLib.DrawingManager(map, {
        isOpen: false, //是否开启绘制模式
        enableDrawingTool: true, //是否显示工具栏
        drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
            offset: new BMap.Size(5, 5), //偏离值
        },
        rectangleOptions: styleOptions //矩形的样式
    });  
	 //添加鼠标绘制工具监听事件，用于获取绘制结果
    drawingManager.addEventListener('overlaycomplete', overlaycomplete);
    function clearAll() {
		for(var i = 0; i < overlays.length; i++){
            map.removeOverlay(overlays[i]);
        }
        overlays.length = 0   
    }

    $('.BMapLib_rectangle').on('click',function(){
        console.log($('.BMapLib_rectangle').prop('className'))
        console.log($('.BMapLib_rectangle_hover').prop('className'))
        // $('.BMapLib_rectangle').removeClass("BMapLib_rectangle_hover")
    })
    // $('.BMapLib_rectangle_hover').on('click',function(){
    //     console.log($('.BMapLib_rectangle_hover').prop('className'))
        
       
    // })
    


    var points = [
        { "lng": 116.418261, "lat": 39.921984, "count": 50 },
        // { "lng": 116.423332, "lat": 39.916532, "count": 51 },
        // { "lng": 116.419787, "lat": 39.930658, "count": 15 },
        // { "lng": 116.418455, "lat": 39.920921, "count": 40 },
        // { "lng": 116.418843, "lat": 39.915516, "count": 100 },
        // { "lng": 116.416244, "lat": 39.920215, "count": 91 },
        // { "lng": 116.41929, "lat": 39.915908, "count": 54 },
        // { "lng": 116.422116, "lat": 39.919658, "count": 21 },
        // { "lng": 116.4183, "lat": 39.925015, "count": 15 },
        // { "lng": 116.421969, "lat": 39.913527, "count": 3 },
        // { "lng": 116.422936, "lat": 39.921854, "count": 24 },
        // { "lng": 116.41905, "lat": 39.929217, "count": 12 },
        // { "lng": 116.424579, "lat": 39.914987, "count": 57 },
        // { "lng": 116.42076, "lat": 39.915251, "count": 70 },
        { "lng": 116.425867, "lat": 39.918989, "count": 100 }];

    if (!isSupportCanvas()) {
        alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
    }

    heatmapOverlay = new BMapLib.HeatmapOverlay({ "radius": 20 });
    map.addOverlay(heatmapOverlay);
    heatmapOverlay.setDataSet({ data: points, max: 100 });
    //是否显示热力图
    heatmapOverlay.show();

    // addDataPoint(points)

    function setGradient() {
        var gradient = {};
        var colors = document.querySelectorAll("input[type='color']");
        colors = [].slice.call(colors, 0);
        colors.forEach(function (ele) {
            gradient[ele.getAttribute("data-key")] = ele.value;
        });
        heatmapOverlay.setOptions({ "gradient": gradient });
    }

    //判断浏览区是否支持canvas
    function isSupportCanvas() {
        var elem = document.createElement('canvas');
        return !!(elem.getContext && elem.getContext('2d'));
    }
    // ///
    function addMarker(point) {
        console.log(point)
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
    }
    var abc = []
    $.each(points, function (index,item) {
       abc.push({
            lng:item.lng,
            lat:item.lat
       })
       
    })
   console.log(abc)
    for (var i = 0; i < abc.length; i++) {
        console.log(abc[i])
        var points = new BMap.Point(abc[i].lng, abc[i].lat);
        addMarker(points);
    }


    // ///
    // var customLayer = new BMap.CustomLayer({
    //     geotableId: 30960,
    //     q: '', //检索关键字  
    //     tags: '', //空格分隔的多字符串  
    //     filter: '' //过滤条件,参考http://lbsyun.baidu.com/index.php?title=lbscloud/api/geosearch  
    // });
    // map.addTileLayer(customLayer)
    // customLayer.addEventListener('onhotspotclick', callback);//单击图层事件  
    // function callback(e) {
    //     // //单击热点图层  

    //     var customPoi = e.customPoi,  //获取poi对象  
    //         str = [];
    //     str.push("address = " + customPoi.address);
    //     str.push("phoneNumber = " + customPoi.phoneNumber);
    //     var content = '<p style="width:280px;margin:0;line-height:20px;">地址：' + customPoi.address + '<br>电话：' + customPoi.phoneNumber + '</p>';
    //     var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {  //带检索的信息窗口  
    //         title: customPoi.title, //标题  
    //         width: 290, //宽度  
    //         height: 40, //高度  
    //         panel: "panel", //检索结果面板  
    //         enableAutoPan: true, //自动平移  
    //         enableSendToPhone: true, //是否显示发送到手机按钮  
    //         searchTypes: [
    //             BMAPLIB_TAB_SEARCH,   //周边检索  
    //             BMAPLIB_TAB_TO_HERE,  //到这里去  
    //             BMAPLIB_TAB_FROM_HERE //从这里出发  
    //         ]
    //     });
    //     var point = new BMap.Point(customPoi.point.lng, customPoi.point.lat);
    //     searchInfoWindow.open(point);
    // }



});

在这里插入图片描述

聰籽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义TimePicker 时间段选择控件
12-02
实现需要选择 [ 时间段 ] 的需求
进度条对话框、日期选择对话框和时间选择对话框——Android
YanMeiHe的博客
03-31 603
目的：实现常用的三种对话框——进度条、日期选择、时间选择 开发工具：Android Studio3.3.2 实现过程： 第一步：在布局文件中添加三个Button用于打开三种不同类型的对话框，并将按钮设置为水平和竖直方向都居中，然后添加两个TextView用于显示用户选择的日期和时间 要让按钮在页面居中需要在父级元素添加 android:gravity="center" 如果希...
vue项目引入百度地图BMapGL和BMap实例，以及辅助工具BMapGLLib 的引入，BMapGL鼠标绘制功能
lFFFFFFl的博客
12-29 1万+
vue项目引入百度地图BMapGL和BMap实例，以及辅助工具BMapGLLib 的引入，BMapGL鼠标绘制功能
HTML时间日期选择器
热门推荐
zhu1243961271的博客
10-22 1万+
时间日期选择器
HTML_element 、 vant 时间区间设置，日期选择限制
小歪博客
09-28 1212
element （PC端）vant （手机端）
vue实现button按钮进度条效果
m0_53273062的博客
11-28 1208
这个进度条主要通过css实现的，原理：将两个相同大小的盒子，默认是盒子的右上角和第二个盒子的左下角相连如下图，然后设定过度效果以及过度的时间。首先看html部分，我是通过div绘制按钮样式，并且通过自定义属性设置按钮的大小，也可以动态改变style样式，具体操作看vue官网。src/components/Icons.vue · 刘紫成/vue3-vite-template - Gitee.com。就是将el-icon组件进行了二次封装，下载按钮动画也在这个项目里。
C# WinForm窗体时间进度条
02-05
每过一段时间，就将进度条的Value属性增加，同时更新剩余时间的显示，这可以通过Label控件完成。 为了确保进度条和剩余时间的更新同步进行，可以使用`Control.Invoke`或`Control.BeginInvoke`方法在非UI线程中更新...
ASP.NET实现进度条效果
10-19
为了实际更新进度条，我们需要在服务器端代码中处理事件，例如按钮点击事件。例如，当用户启动一个耗时操作时，我们可以调用`SetMaxValue`来设定最大值，然后在操作的每个阶段调用`SetPorgressBar`更新进度。一旦...
jquery实现进度条状态展示
11-21
根据点击的状态，更新进度条的宽度和时间显示。 注意，这只是一个基本示例，实际项目可能需要更复杂的交互和动画效果。例如，可以添加过渡动画来平滑地改变进度条的宽度，或者在点击后触发其他业务逻辑。 总结起来...
android demo，Progress进度条,DatePicker日期选择，导航栏及按钮的处理
12-09
在Android开发中，创建用户友好的界面和交互是至关重要的，本`android demo`着重展示了如何处理Progress进度条、DatePicker日期选择器、导航栏以及按钮等常见组件的使用。下面将详细阐述这些知识点： 1. **Progress...
BMapLib-InfoBox.zip
07-13
此下载资源包含百度地图（BMap）的自定义信息窗口（InfoBox）样式的功能Demo，亲试可用。。。
易语言进度条演示
07-23
这些事件可以触发特定的代码段，例如，当用户点击进度条时，可以加速或减速任务的执行。 5. **同步与异步**：在长任务中，为了不阻塞用户界面，我们通常会使用异步编程。易语言提供了相应的函数支持，如“启动子...
QT-自定义滑动式日期选择
u013083044的博客
02-28 1532
1、使用鼠标滑动的方式选择指定的日期时间，并且获取当前选中的时间，整体样式看来十分舒服，更加适用触摸屏的方式。2、本次demo使用的开发环境是VS2017+QT5.13.2开发的方式，如果你是使用creator的IDE，那需要自己将文件拷贝到自己的工程里面了。
html日期选择限制,element-ui 日期选择器范围时间限制
weixin_29589063的博客
06-03 1405
来自https://www.cnblogs.com/xjcjcsy/p/7977966.html 侵删elementui是饿了么推出的一套基于vue2.x的一个ui框架。官方文档也很详细，这里做一个element-ui日期插件的补充。官方文档中使用picker-options属性来限制可选择的日期，这里举例子稍做补充。单个输入框的组件代码：v-model="value1"type="date"p...
Vue 实现简单的时间轴 时间进度条
m0_61570521的博客
07-13 1万+
项目需要按天播放地图等值线图功能，所以需要一个时间进度条，百度了一下发现没有自己需要的样子，于是只能简单的写一个。1、封装时间尺度组件 2、在页面使用 3、组件init方法内 通过起止时间算出中间的所有时间尺度。 附上效果图生成刻度是用的flex布局 宽度超出自动撑开 间距固定 通过取模数组下标 每5天突出刻度尺并标记刻度时间，有不懂的可以留言，看见了会接单，时间仓促，有bug请见谅。.........
Vue的时间进度条组件（基于moment）
renjnet的专栏
01-15 2255
按照客户BT的需求，找了一圈没有方便的在vue里实现的按照日/小时切换的，只好自己动手改写了一个来自 Dinert 的插件，实现了按照日/小时的时间自由切换。基本上都添加了该写的注释，方便自由添加年或者季度的其他时间轴。
QT--简单构建滚动日期时间选择器（仿网页注册页面滚动日期时间选择器、上手快、制作轻松、直接套用）
最新发布
m0_69218824的博客
04-06 2186
简易日历时间滚动选择器，可移植，方便美观
进度条事件
y4418的博客
06-19 204
1.Progress进度条组件由两个HTML元素、一些CSS宽度设置以及一些属性构建。我们不使用 HTML5  元素，确保用户可以方便的平行堆叠进度条、加上动态效果，并在共上放置文本标签。2.使用 .progress 容器来指定进度条的最大值。3.使用 .progress-bar 来表示当前的进度。4.progress-bar 要求的内嵌样式，使用全局实用CSS或自定义CSS来设置其宽度。5.progress-bar 还需要一些 role and 与属性，使其访问友好（无障碍）。把它们组...
类 BMapLib.DrawingManager___百度地图API
crazzy0727的专栏
07-03 1万+
类 BMapLib.DrawingManager 鼠标绘制管理类，实现鼠标绘制管理的入口。 实例化该类后，即可调用该类提供的open 方法开启绘制模式状态。 也可加入工具栏进行选择操作。  源文件: DrawingManager.js. 类 类 描述 BMapLib.DrawingManager(map, opts) Dra
使用CSS3创建闪亮进度条效果的代码解析
- 动画延迟：`delay()`函数控制每个阶段开始动画的时间差，使得进度条的填充有节奏感。 - `animate()`函数负责改变`<span>`的宽度，模拟进度的增加。 - 用户交互：如果存在源码展示部分，`$('.sourcespan')`监听...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值