# 警告框封裝 * 調用方法 ~~~ $(document).ready(function(){ signBody() signLists() }); ~~~ * 簽到 ~~~ function signBody(){ let html = `<div class="signPage" id="signAlert">` + `<div class="signBody" id="signBody">` + `<img src="html/style/img/user/sign.png">` + `<div class="signTop">` + `<img src="html/style/img/user/signlogo.png" >` + `<div class="signwram">已連續簽到<label id="totalDay"></label>天</div>` + `</div>` + `<div class="signCont" id="signCont"></div>` + `<div class="signBtn">` + `<a class="nocheck" id="nocheck" onclick='nocheck()'>立即簽到</a>` + `<a class="check" id="check">今日已簽到</a>` + `<span>連續簽到贏大獎 漏簽重置簽到獎勵</span>` + `</div>` + `</div>` + `</div>` $('body').append(html) // 渲染簽到列表數據 signLists() // 點擊空白處隱藏彈框 hideSign() // 插入樣式 signCss() } ~~~ * 簽到樣式 ~~~ // 簽到列表1-6天 function signStyle(o){ let html1 = '' // console.log(o.status) html1 = `<div class="signItem check${o.status}" onclick=sign(this)> <span>第${o.daily}天</span> <img src="html/style/img/user/nosign.png" > <label>${o.score} 積分</label> </div>` return html1 } // 簽到列表7天 function signStyle2(o){ let html2 = '' html2 = `<div class="signItems check${o.status}"> <div class="signCol"> <span>第${o.daily}天</span> <label>${o.score}積分</label> </div> <img src="html/style/img/user/gift.png" class="gift"> </div>` return html2 } ~~~ * 簽到列表API ~~~ function signLists(){ let data = {} data.u_id = u_id//傳入u_id net('sign/list',data,'signList')//簽到列表API } function signList(o){ console.log(o) if(o.succeed == 0){ warmFalse(o.msg) }else{ let html = '' for(let i in o.list){ if(i==o.list.length-1){ html = html+signStyle2(o.list[i]) }else{ html = html+signStyle(o.list[i]) } } $('#totalDay').html(o.now) $('#signCont').html(html) // $('#signCont').append(html) signCss() if(o.is_sign == 0){ $('#nocheck').show() $('#check').hide() }else{ $('.signItem').removeAttr('onclick') $('#nocheck').hide() $('#check').show() } } } ~~~ * 點擊列表簽到 ~~~ function sign(which){ let data = {} data.u_id = u_id net('sign/sign',data,'signNow') } function signNow(o){ // console.log(o) if(o.succeed == 0){ warmFalse(o.msg) }else{ signLists() } } ~~~ * 點擊立即簽到 ~~~ function nocheck(){ let data = {} data.u_id = u_id net('sign/sign',data,'signNow') } ~~~ * 點擊空白處隱藏簽到框 ~~~ function hideSign(){ $("#signAlert").bind("click", function(){ // $("#signAlert").hide(); $("#signAlert").remove() }) $("#signBody").bind("click", function(){ $("#signAlert").show(); event.stopPropagation(); }) } ~~~ * 簽到框css ~~~ function signCss(){ $('.signPage').css({ 'position': 'absolute','width': '100%','height': '100%','position': 'fixed','top': '0','left': '0','right': '0','bottom': '0', 'overflow': 'auto','background-color': 'rgb(0,0,0,.4)','z-index': '40' }) $('.signBody').css({ 'position': 'fixed','top': '50%','left': '50%','width': '480px','height': '570px','margin-left': '-240px','margin-top': '-285px', 'background-color': '#fff','border-radius': '10px','z-index': '60','box-shadow': '0 0 5px 4px rgba(202,131,69,0.25)' }) $('.signBody>img').css({ 'position': 'absolute','top': '-60px','left': '50%','width': '152px','height': '118px','margin-left': '-76px','display': 'block' }) $('.signTop').css({ 'width': '100%','height': '229px','background': "url('html/style/img/user/signbg.png')",'display': 'flex', 'justify-content': 'center','align-items': 'center','flex-direction': 'column' }) $('.signTop img').css({ 'height': '61px','display': 'block' }) $('.signwram').css({ 'width': '160px','height': '40px','line-height': '40px','text-align': 'center','margin-top': '10px', 'background': 'linear-gradient(96deg,rgba(252,100,40,.69),#f44f29)','border-radius': '20px','font-size': '16px','opacity': '0.5','color': '#fff' }) $('.signwram label').css({ 'margin-left': '5px','color': '#fff63f' }) $('.signCont').css({ 'padding': '20px 30px','display': 'flex','flex-wrap': 'wrap','justify-content': 'space-between' }) $('.signItem').css({ 'position': 'relative','width': '90px','height': '90px','margin-bottom': '15px','display': 'flex','flex-direction': 'column','justify-items': 'center', 'justify-content': 'space-between','padding':' 8px 25px','box-sizing': 'border-box','background-color': '#f5f7fb','border-radius': '5px','cursor': 'pointer' }) $('.signItem span').css({ 'color': '#333','font-size': '14px' }) $('.signItem img').css({ 'display': 'block','width': '37px','height': '37px','border-radius': '50%' }) $('.signItem label').css({ 'color': '#999','font-size': '12px' }) $('.signItems').css({ 'width': '200px','display': 'flex','height': '90px','margin-bottom': '15px','justify-content': 'space-between','align-items': 'center','padding': '8px 25px', 'box-sizing': 'border-box','border-radius': '5px','cursor': 'pointer','background-color': '#f5f7fb','position': 'relative' }) $('.signCol').css({ 'display': 'flex','flex-direction': 'column','justify-content': 'space-around','align-items': 'center','flex': '1','text-align': 'center' }) $('.signCol span').css({ 'color': '#333','font-size': '14px' }) $('.signCol label').css({ 'margin-top': '10px','color': '#999','font-size': '12px' }) $('.gift').css({ 'width': '68px','height': '72px','display': 'block' }) $('.signBtn').css({ 'display': 'flex','flex-direction': 'column','align-items': 'center' }) $('.signBtn a').css({ 'display': 'block','width': '250px','height': '40px','line-height': '40px','font-size': '16px','box-shadow': '0 2px 9px 0 rgba(214,184,150,.5)', 'border-radius': '20px','cursor': 'pointer','text-align': 'center','border': 'solid 1px #f39800' }) $('.signBtn .nocheck').css({ 'background': 'linear-gradient(307deg,#fbb323,#f57c0f)','color':'#fff' }) $('.signBtn .check').css({ 'color': '#f7a51c','background-color': '#fff' }) $('.signBtn span').css({ 'font-size': '12px','color':' #999','margin-top': '10px' }) // 已簽到 $('.signCont .check1').css({ 'background-color':'#f7a51c' }) $('.signCont .check1 span').css({ 'color': '#fff' }) $('.signCont .check1 label').css({ 'color': '#fff' }) $('#nocheck').css({ 'display': 'none' }) $('#check').css({ 'display': 'none' }) } ~~~