原生jqury 根据点击事件判断宝箱开启状态

宝箱状态做缓存
配合转盘的点击次数
window 方法是跟原生那边的交互

HTML

<div class="boxDiv">
            <!-- <img src="./images/taizi.png" alt="taizi" class="taiziImg" /> -->
            <div class="boxTxt">
              再抽奖
              <span class="reward">0</span>
              次可获得额外奖励
            </div>
            <div class="boxList flex">
              <div class="boxLi">
                <img
                  src="./images/wdk3.png"
                  alt="dk"
                  class="boxLiImg boxLiImgwqi1"
                  onclick="wqitime(1)"
                />
                <!-- 开启宝箱 -->
                <img
                  src="./images/dk3.png"
                  alt="dk"
                  class="boxLiImg boxLiImgqi1"
                  style="display: none"
                  onclick="qitime(1)"
                />
                <img
                  src="./images/ydk.png"
                  alt="dk"
                  class="boxLiImg boxLiImg1"
                  style="display: none"
                />
                <!-- 后台返回的开启次数 -->
                <div class="boxLiTxt">
                  <span class="box1">0</span>
                  次
                </div>
                <div class="rangeBox show1">
                  <div class="rangeNum">
                    <span class="box1min">0</span>
                    ~
                    <span class="box1max">0</span>
                  </div>
                  时间币
                </div>
              </div>
              <div class="boxLi">
                <img
                  src="./images/wdk2.png"
                  alt="dk"
                  class="boxLiImg boxLiImgwqi2"
                  onclick="wqitime(2)"
                />
                <img
                  src="./images/dk2.png"
                  alt="dk"
                  class="boxLiImg boxLiImgqi2"
                  style="display: none"
                  onclick="qitime(2)"
                />
                <img
                  src="./images/ydk.png"
                  alt="dk"
                  class="boxLiImg boxLiImg2"
                  style="display: none"
                />
                <div class="boxLiTxt">
                  <span class="box2">0</span>
                  次
                </div>
                <div class="rangeBox show2">
                  <div class="rangeNum">
                    <span class="box2min">0</span>
                    ~
                    <span class="box2max">0</span>
                  </div>
                  时间币
                </div>
              </div>
              <div class="boxLi">
                <img
                  src="./images/wdk1.png"
                  alt="dk"
                  class="boxLiImg boxLiImgwqi3"
                  onclick="wqitime(3)"
                />
                <img
                  src="./images/dk1.png"
                  alt="dk"
                  class="boxLiImg boxLiImgqi3"
                  style="display: none"
                  onclick="qitime(3)"
                />
                <img
                  src="./images/ydk.png"
                  alt="dk"
                  class="boxLiImg boxLiImg3"
                  style="display: none"
                />
                <div class="boxLiTxt">
                  <span class="box3">0</span>
                  次
                </div>
                <div class="rangeBox show3">
                  <div class="rangeNum">
                    <span class="box3min">0</span>
                    ~
                    <span class="box3max">0</span>
                  </div>
                  时间币
                </div>
              </div>
            </div>

CSS

.boxDiv {
  width: 100%;
  height: 240px;
  margin-top: -20px;
  background: url(http://oss.timemoney.taola123.cn/front/images/taizi.png)
    no-repeat;
  background-size: 100% auto;
  padding-top: 40px;
}

.boxTxt {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  color: #2a2a2a;
  letter-spacing: 0;
  text-align: center;
  font-weight: 500;
}
.reward {
  color: #ff0000;
}
/* 宝箱样式 */
.boxList {
  justify-content: space-around;
  padding: 0 20px;
}
.boxLi {
  width: 33.33333%;
  position: relative;
}

.boxLiImg {
  display: block;
  width: 60px;
  height: 62px;
  margin: 0 auto;
}
.rangeBox {
  /* width: 50px; */
  height: 32px;
  border-radius: 10px;
  background: #ffffff;
  color: #ff3c29;
  font-size: 10px;
  text-align: center;
  position: absolute;
  padding: 6px 4px 2px;
  top: -20px;
  right: 10px;
  border: 1px solid #ff3c29;
  display: none;
}
.rangeBox::after {
  content: '';
  border-top: 7px solid #fff;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  position: absolute;
  bottom: -7px;
  left: 40%;
}
.boxLiTxt {
  font-size: 16px;
  color: #da0000;
  letter-spacing: 0;
  text-align: center;
  width: 100%;
}
.progress {
  width: 80%;
  height: 6px;
  background: #e3e3e3;
  border-radius: 0;
  box-shadow: none;
  margin: 8px auto 0;
  overflow: visible;
  position: relative;
}
.jindu {
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
  left: 10%;
  top: -6px;
  z-index: 99999;
}
.jindu1 {
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
  left: 46%;
  top: -6px;
  z-index: 99999;
}
.jindu2 {
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
  left: 82%;
  top: -6px;
  z-index: 99999;
}
.progress .progress-bar {
  box-shadow: none;
  border-radius: 0;
  position: relative;
  -webkit-animation: animate-positive 2s;
  animation: animate-positive 2s;
  height: 6px;
  background: #ff0000;
}

.progress .progress-value {
  width: 24px;
  height: 16px;
  line-height: 16px;
  border-radius: 3px;
  background: #ff9400;
  /* box-shadow: 0 5px 5px rgba(0, 0, 0, 0.4); */
  font-size: 8px;
  font-weight: 400;
  color: #fff;
  text-align: center;
  position: absolute;
  bottom: -24px;
  right: -8px;
}
.progress .progress-value:after {
  content: '';
  border-bottom: 7px solid #ff9400;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  position: absolute;
  top: -7px;
  left: 26%;
}

.progress.green .progress-bar:after {
  border: 5px solid #ff9400;
}
@-webkit-keyframes animate-positive {
  0% {
    width: 0;
  }
}
@keyframes animate-positive {
  0% {
    width: 0;
  }
}

JS

// 增加的内容
function wqitime(id) {
  $('.show' + id).show();
  setTimeout(function () {
    $('.show' + id).hide();
  }, 1000);
}
// 开启宝箱
function qitime(id) {
  $('.boxLiImg' + id).show();
  $('.boxLiImgwqi' + id).hide();
  $('.boxLiImgqi' + id).hide();
  foowwLocalStorage.set('box' + id + 'State', 1, dateOver);
  var message = {
    boxType: 'box' + id,
    type: 5,
    coin: 0,
  };
  window.jsinterface.reward(JSON.stringify(message));
}

// 根据点击次数判断头部展示的次数以及宝箱是否开启
function boxOpenNum(id) {
  /* boxLiImg1 boxLiImgwqi1 boxLiImgqi1 */
  if (id) {
    var width = ['10%', '46%', '100%'];
    $('.progress-bar').css('width', width[id - 1]);
    if (id == 3) $('.boxTxt').hide();
    for (let i = id; i > 0; i--) {
      var boxState = foowwLocalStorage.get('box' + i + 'State');
      boxState ? imgState('', i) : imgState('qi', i);
    }
  } else {
    for (let i = 3; i > 0; i--) {
      imgState('wqi', i);
    }
  }
}

function imgState(state, id) {
  $('.boxLiImg' + state + id)
    .show()
    .siblings('img')
    .hide();
}