谁知道这个效果怎么实现!!求告知

选择后效果如图所示：（微信小程序）,求各位告知！谢谢各位！感激不尽

DMEO如下，有帮助麻烦点个采纳【本回答右上角】，谢谢~~

demo.js

Page({
  data: {
    hours:[11,12,13,14,15],
    counter:0,
    startIndex:-1,
    endIndex:-1
  }, 
 setClick(e){
   var ds=e.target.dataset;
   this.data[this.data.counter==0?'startIndex':'endIndex']=ds.index;
   this.data.counter++;
   console.log(JSON.stringify(this.data))
   if(this.data.counter>2){//点2次后重置
     this.data.counter=1;
     this.data.startIndex=ds.index;
     this.data.endIndex=-1;
   }
   this.setData({counter:this.data.counter,startIndex:this.data.startIndex,endIndex:this.data.endIndex})
 }
 
})
 

demo.wxss

page{background:#eee}
.container{background:#fff;border-radius:15px;padding:10px;max-width:90%;margin:20px auto;display:flex;}
.container .item{border-radius: 15px;line-height:40px;font-size:18px;padding:15px;height:40px}
.container .active{background:#5bcaff;line-height:15px}
.container .active::after{content:'开始';display: block;margin-top:10px;text-align:center;}
.container .end::after{content:'结束';}

demo.wxml

<view class="container">
     <view class="item{{startIndex==index?' active':''}}{{endIndex==index?' active end':''}}" data-index="{{index}}" wx:for="{{hours}}" bindtap="setClick">{{item}}点</view>
  </view>

Css
:checked
更换背景色

index.wxml

<view class="page" style="background-color:{{pageBackgroundColor}}; border-radius: {{pageBorderRadius}}" >
<button bindtap="changeColor" hover-class="none">点击修改背景颜色</button>
</view>

index.js

Page({
  data: {
    // 自定义CSS样式对象
    pageBackgroundColor:'#FFFFFF',
    pageBorderRadius:'0px'
  },
  onLoad: function () {},
  // 改变背景颜色
  changeColor: function() {
    var bgColor = this.data.pageBackgroundColor == 'red' ? '#FFFFFF' : 'red';
   var borderRadius = this.data.pageBorderRadius == '5px' ? '0px' : '5px';
    // 设置背景颜色数据
    this.setData( {
      pageBackgroundColor: bgColor,
      pageBorderRadius: borderRadius
    } );
  }
})

自己测试吧