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

原生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"><imgsrc="./images/wdk3.png"alt="dk"class="boxLiImg boxLiImgwqi1"onclick="wqitime(1)"/><!-- 开启宝箱 --><imgsrc="./images/dk3.png"alt="dk"class="boxLiImg boxLiImgqi1"style="display: none"onclick="qitime(1)"/><imgsrc="./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"><imgsrc="./images/wdk2.png"alt="dk"class="boxLiImg boxLiImgwqi2"onclick="wqitime(2)"/><imgsrc="./images/dk2.png"alt="dk"class="boxLiImg boxLiImgqi2"style="display: none"onclick="qitime(2)"/><imgsrc="./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"><imgsrc="./images/wdk1.png"alt="dk"class="boxLiImg boxLiImgwqi3"onclick="wqitime(3)"/><imgsrc="./images/dk1.png"alt="dk"class="boxLiImg boxLiImgqi3"style="display: none"onclick="qitime(3)"/><imgsrc="./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(.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-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,};ward(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 = ('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();
}