Web前端之实现原生消息确认弹窗、页面交互、模态框、createElement、querySelector、switch、remove

MENUHtmlJavaScriptStyleHtmldivdivinputclassinputMessagevaluetypetextplaceholder请输入提示内容/span/span/div!-- 绑事件的第一种方式 --!-- button onclickbtnMR()消息提示/button --!-- // 绑事件的第二种方式 --button消息提示/buttonspan/span/divdivclassmaskonclickoffWindow(2)/divJavaScriptletspandocument.getElementsByTagName(span);// 绑事件的第二种方式letbtndocument.getElementsByTagName(button)[0];// 绑事件的第一种方式// function btnMR() {// let inputMessage document.getElementsByClassName(inputMessage)[0].value.trim();// if (inputMessage ) {// span[0].innerText 请输入提示内容;// span[0].style.cssText color: red; font-size: 12px;// setTimeout(function() {// span[0].innerText ;// }, 1500);// }// messagePrompt(inputMessage || 世界你好);// };// 绑事件的第二种方式btn.onclickfunction(){letinputMessagedocument.getElementsByClassName(inputMessage)[0].value.trim();if(inputMessage){span[0].innerText请输入提示内容;span[0].style.cssTextcolor: red; font-size: 12px;setTimeout(function(){span[0].innerText;},1500);}messagePrompt(inputMessage||世界你好);}// 处理消息提示functionmessagePrompt(text世界你好){letbodydocument.getElementsByTagName(body)[0];letmaskdocument.querySelector(.mask);letdivdocument.createElement(div);div.innerHTMLdiv classtitle${text}/divdiv classcancel_determine_boxspan classcancel onclickoffWindow(0)取消/spanspan classdetermine onclickoffWindow(1)确定/span/div;div.classNamemessage_prompt_box;div.style.displayblock;mask.style.displayblock;body.appendChild(div);lettitledocument.getElementsByClassName(title)[0];title.style.textAligncenter;if(title.offsetHeight20)title.style.textAlignleft;}// 取消/确定/关闭functionoffWindow(t){letmessagePromptBoxdocument.getElementsByClassName(message_prompt_box)[0];letmaskdocument.querySelector(.mask);messagePromptBox.remove();mask.style.displaynone;lettextValnull;switch(t){case0:textVal已取消;break;case1:textVal已确定;break;default:textVal已关闭;}span[span.length-1].innerTexttextVal;span[span.length-1].style.fontSize16PX;setTimeout((){span[span.length-1].innerText;},6000);}Style.message_prompt_box{position:fixed;z-index:999;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#EEEEEE;width:210px;padding:10px;box-sizing:border-box;border-radius:6px;color:#333333;font-family:MS UI Gothic 10px;display:none;}.cancel_determine_box{display:flex;justify-content:space-around;align-items:center;padding-top:10px;margin-top:10px;border-top:1px solid #FFFFFF;}.cancel, .determine{font-size:20px;cursor:pointer;}.cancel{color:#888888;}.determine{color:blue;}.mask{width:100%;height:100%;background-color:rgba(10,10,10,.7);position:absolute;z-index:666;left:0;top:0;display:none;}