1class LoginComponent { 2 constructor(containerId, params) { 3 this.ele = document.getElementsByClassName(containerId)[0] 4 this.params = params 5 console.log(this.ele, 'this.ele') 6 if(!this.ele) { 7 throw new Error(`Container with ID "${containerId}" not found.`); 8 } else { 9 const html = ` 10 <div class="time-box"> 11 <div class="top flex j-c_s-b"> 12 <div> 13 <div class="rest">ä»æ¥é¢åæ¶é´ä» å©</div> 14 <div class="flex a-i_c count_d"> 15 <div class="hours_box"> 16 <span></span> 17 <span></span> 18 </div> 19 <div class="dots">:</div> 20 <div class="minutes_box"> 21 <span></span> 22 <span></span> 23 </div> 24 <div class="dots">:</div> 25 <div class="seconds_box"> 26 <span></span> 27 <span></span> 28 </div> 29 </div> 30 <div class="flex a-i_c"> 31 <div class="t_tx">æ¶</div> 32 <div class="t_tx">å</div> 33 <div class="t_tx">ç§</div> 34 </div> 35 </div> 36 <img src="https://www.chinaacca.org/answer/images/PAYNsaNS65d5c3ad2db4f.jpg" alt="" class="bks"> 37 </div> 38 <div class="b_infos"> 39 <div class="kc">é¢åCFAè¯å¬è¯¾ç¨</div> 40 <div class="form"> 41 <div class="flex form-input a-i_c"> 42 <img src="https://www.cfa.cn/answer/images/pe.png" alt=""> 43 <input id="mobile" type="number" placeholder="请è¾å ¥ææºå· (å¿ å¡«)" autocomplete="off"> 44 </div> 45 <div class="flex a-i_c form_tips"> 46 <img src="https://www.cfa.cn/answer/images/gx_1.png" alt="" data-checked="false" class="isChecked"> 47 <div>èªå¨è¾å ¥åå²ä¿¡æ¯</div> 48 <div class="be"><a href="">ã个人信æ¯ææäºéç§æ¿çã</a></div> 49 </div> 50 <div class="sub_btn"></div> 51 </div> 52 <div class="box-xs"> 53 <div class="txt">ææ°åä¸å®¢æ·</div> 54 <div class="box-xs_wrapper"> 55 <div class="box-xs_list" style="transform: translateY(-129px);"> 56 <div class="box-xs_items flex a-i_c j-c_s-b" '=""> 57 <div class=" flex a-i_c "> 58 <img src="/static/cms/images/voice.png" alt=""> 59 <div>ç¨æ·163</div> 60 </div> 61 <div>112****290</div> 62 <div>1天å</div> 63 </div> 64 65 <div class="box-xs_items flex a-i_c j-c_s-b" '=""> 66 <div class=" flex a-i_c "> 67 <img src="/static/cms/images/voice.png" alt=""> 68 <div>**AoZ</div> 69 </div> 70 <div>130****8017</div> 71 <div>1 天å</div> 72 </div> 73 74 <div class="box-xs_items flex a-i_c j-c_s-b" '=""> 75 <div class=" flex a-i_c "> 76 <img src="/static/cms/images/voice.png" alt=""> 77 <div>ç¨æ·651</div> 78 </div> 79 <div>127****21</div> 80 <div>2024-11-19</div> 81 </div> 82 83 <div class="box-xs_items flex a-i_c j-c_s-b" '=""> 84 <div class=" flex a-i_c "> 85 <img src="/static/cms/images/voice.png" alt=""> 86 <div>ç¨æ·349</div> 87 </div> 88 <div>130****9630</div> 89 <div>2024-11-15</div> 90 </div> 91 92 <div class="box-xs_items flex a-i_c j-c_s-b" '=""> 93 <div class=" flex a-i_c "> 94 <img src="/static/cms/images/voice.png" alt=""> 95 <div>ç¨æ·232</div> 96 </div> 97 <div>130****3420</div> 98 <div>ä¸ä¸ªæå</div> 99 </div> 100 101 <div class="box-xs_items flex a-i_c j-c_s-b" '=""> 102 <div class=" flex a-i_c "> 103 <img src="/static/cms/images/voice.png" alt=""> 104 <div>ç¨æ·801</div> 105 </div> 106 <div>112****310</div> 107 <div>ä¸ä¸ªæå</div> 108 </div> 109 110 <div class="box-xs_items flex a-i_c j-c_s-b" '=""> 111 <div class=" flex a-i_c "> 112 <img src="/static/cms/images/voice.png" alt=""> 113 <div>ç¨æ·101</div> 114 </div> 115 <div>130****7983</div> 116 <div>2024-10-15</div> 117 </div> 118 119 <div class="box-xs_items flex a-i_c j-c_s-b" '=""> 120 <div class=" flex a-i_c "> 121 <img src="/static/cms/images/voice.png" alt=""> 122 <div>**dAB</div> 123 </div> 124 <div>130****2737</div> 125 <div>2024-10-10</div> 126 </div> 127 128 <div class="box-xs_items flex a-i_c j-c_s-b" '=""> 129 <div class=" flex a-i_c "> 130 <img src="/static/cms/images/voice.png" alt=""> 131 <div>ç¨æ·987</div> 132 </div> 133 <div>130****6344</div> 134 <div>2024-09-13</div> 135 </div> 136 137 <div class="box-xs_items flex a-i_c j-c_s-b" '=""> 138 <div class=" flex a-i_c "> 139 <img src="/static/cms/images/voice.png" alt=""> 140 <div>ç¨æ·279</div> 141 </div> 142 <div>130****8868</div> 143 <div>2024-08-21</div> 144 </div> 145 </div> 146 </div> 147 </div> 148 </div> 149 150 <div class="login-mark"> 151 <div class="login-container"> 152 <div class="error-tip">æ示</div> 153 <div class="error-info">请è¾å ¥æ£ç¡®ææºå· </div> 154 <div class="submit-ok">ç¡®å®</div> 155 </div> 156 </div> 157 </div> 158 ` 159 this.ele.innerHTML = html 160 161 this.init(); 162 } 163 } 164 // åå§å 165 init () { 166 var box = document.getElementsByClassName('time-box')[0] 167 var title = document.getElementsByClassName('kc')[0] 168 this.loginbtn = document.getElementsByClassName('sub_btn')[0] 169 this.submitOk = document.getElementsByClassName('submit-ok')[0] 170 this.mobileInput = document.getElementById('mobile'); 171 this.checkedBtn = document.getElementsByClassName('isChecked')[0] 172 var beLink = document.querySelector('.form .be a') 173 174 title.innerText = this.params.title; 175 this.loginbtn.innerText = this.params.loginBtnText; 176 this.loginbtn.style.background = this.params.loginBtnBg; 177 beLink.innerText = this.params.aText; 178 beLink.href = this.params.authLink; 179 this.submitOk.style.color = this.params.tipColor; 180 this.submitOk.style.border = this.params.tipBorder; 181 182 this.getCountdown() 183 this.bindEvent() 184 this.scrollAnimate() 185 } 186 187 bindEvent() { 188 this.loginbtn.addEventListener('click', this.validatePhone.b
188ind(this), false) 189 this.submitOk.addEventListener('click', this.closeModal.bind(this), false) 190 this.checkedBtn.addEventListener('click', this.isCheckedFunc.bind(this), false) 191 } 192 193 isCheckedFunc() { 194 const checked = this.checkedBtn.dataset.checked; 195 if(checked === 'false') { 196 this.checkedBtn.src = 'https://www.cfa.cn/answer/images/gx.png'; 197 this.checkedBtn.dataset.checked = 'true'; 198 } else if(checked === 'true') { 199 this.checkedBtn.src = 'https://www.cfa.cn/answer/images/gx_1.png'; 200 this.checkedBtn.dataset.checked = 'false'; 201 } 202 } 203 204 sendBdForm(phone) { 205 var _this = this; 206 $.ajax({ 207 type: 'post', // ç¨getæ¹å¼ä¼ è¾ 208 url: 'https://bd.gaodun.cn/json.html', 209 data: { 210 form_id: this.params.form_id, //表åid 211 [this.params.phoneFiled]: phone, 212 source: window.location.href, 213 }, 214 dataType: 'jsonp', 215 success: function (res) { 216 if (res.code === 200) { 217 // å ³éèå±å°è¾å ¥æ¡çå¼ç½®ä¸ºç©º 218 _this.mobileInput.value = '' 219 _this.handleOpenModal('é¢åæåï¼') 220 221 } 222 } 223 }) 224 } 225 226 validatePhone () { 227 var reg = /^(0|86|17951)?(13[0-9]|15[012356789]|16[0-9]|17[0-9]|18[0-9]|14[0-9]|19[0-9])[0-9]{8}$/; 228 var checked = this.checkedBtn.dataset.checked; 229 const phone = this.mobileInput.value; 230 const _phone = phone.replace(/\s+/g, ""); 231 if (!reg.test(_phone)) { 232 this.handleOpenModal('请æ£ç¡®è¾å ¥ææºå·') 233 } else if(checked === 'false') { 234 this.handleOpenModal('请å¾éåè®®') 235 } else { 236 this.sendBdForm(phone) 237 } 238 } 239 240 closeModal() { 241 $('.login-mark').hide(); 242 } 243 244 handleOpenModal(errorTip) { 245 $('.login-mark').show(); 246 $('.error-info').text(errorTip) 247 } 248 // è·ååè®¡æ¶ 249 getCountdown () { 250 const now = new Date(); 251 252 // 设置ä»å¤©ç»æçæ¶é´ï¼ä»å¤©ç23:59:59ï¼ 253 const endOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59); 254 255 // 计ç®æ¶é´å·®ï¼æ¯«ç§ï¼ 256 const timeDifference = endOfDay - now; 257 258 // å°æ¶é´å·®è½¬æ¢ä¸ºæ¶ãåãç§ 259 const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString().padStart(2, '0'); 260 const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60)).toString().padStart(2, '0'); 261 const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000).toString().padStart(2, '0'); 262 // æ´æ°å计æ¶æ¾ç¤º 263 // document.getElementById('countdown').textContent = `${hours}:${minutes}:${seconds}`; 264 const cutDownBox = document.getElementsByClassName('count_d')[0]; 265 const hours_box = document.getElementsByClassName('hours_box')[0]; 266 const minutes_box = document.getElementsByClassName('minutes_box')[0]; 267 const seconds_box = document.getElementsByClassName('seconds_box')[0]; 268 269 hours_box.children[0].innerText = [...hours][0] 270 hours_box.children[1].innerText = [...hours][1] 271 272 minutes_box.children[0].innerText = [...minutes][0] 273 minutes_box.children[1].innerText = [...minutes][1] 274 275 seconds_box.children[0].innerText = [...seconds][0] 276 seconds_box.children[1].innerText = [...seconds][1] 277 // æ¯ç§æ´æ°ä¸æ¬¡åè®¡æ¶ 278 if (timeDifference > 0) { 279 setInterval(this.getCountdown, 1000); 280 } else { 281 hours_box.children[0].innerText = 0 282 hours_box.children[1].innerText = 0 283 284 minutes_box.children[0].innerText = 0 285 minutes_box.children[1].innerText = 0 286 287 seconds_box.children[0].innerText = 0 288 seconds_box.children[1].innerText = 0 289 } 290 } 291 292 scrollAnimate() { 293 const elements = $('.box-xs_wrapper .box-xs_list'); 294 let step = 0; 295 const scrollHeight = elements[0].scrollHeight; 296 const containerHeight = elements[0].clientHeight; 297 console.log(scrollHeight, containerHeight) 298 299 function scrollVerticle () { 300 step += 1; 301 elements.css('transform', 'translateY(-' + step + 'px)'); 302 if (step >= (scrollHeight - containerHeight)) { 303 step = 0; 304 } 305 } 306 setInterval(scrollVerticle, 80); // éå½è°ç¨æ»å¨å½æ° 307 } 308 309} 310
311// new LoginComponent('login_container_cu', { 312// isCurrentDayTime: true, // æ¯å¦å½åä¸å¤©åè®¡æ¶ 313// title: 'é¢åACCAè¯å¬è¯¾ç¨', 314// loginBtnText: 'ç«å³é¢çº¦é¢å', // ç»å½æé®çæå 315// authLink: 'https://i.kuaiji.com/privacy', // ç»å½éç§æ¿çé¾æ¥ 316// aText: 'ã个人信æ¯ææäºéç§æ¿çã', // ç»å½éç§æ¿çæåæè¿° 317// loginBtnBg: 'linear-gradient(180deg, #387ffc 0%, #75a8ff 100%)', // ç»å½æé®ççèæ¯é¢è² 318// form_id: '1205', // 表å ID 319// loginForm: '', // çä¿¡ç¾å 320// phoneFiled: 'filed7070', // ææºå·å段 321// tipColor: '#28abdc', // æ示æ¡é¢è² 322// tipBorder: '1px solid #28abdc' // æ示æ¡è¾¹æ¡é¢è² 323// })
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.