织梦搭建本地网站,互联网推广员是做什么,赣州网络公司排名,wordpress主题调度业务场景#xff1a;需要使用写一个html文件#xff0c;实现输入数字#xff0c;保存调接口。 1、使用 JS原生写法#xff0c; fetchAPI调接口#xff0c;使用 alert 方法弹框会阻塞线程#xff0c;所以写了一个弹框。 !DOCTYPE html
html langen需要使用写一个html文件实现输入数字保存调接口。 1、使用 JS原生写法 fetchAPI调接口使用 alert 方法弹框会阻塞线程所以写了一个弹框。 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {/* 清空上下边距*/margin: 0;padding: 0;}.container {display: flex;justify-content: center;align-items: center;height: 80vh;}.form-group {padding: 20px;border-radius: 10px;width: 200px;display: flex;flex-direction: column;align-items: center;/* background-color: lightblue; */}.name {width: 200px;text-align: left;font-size: 16px;font-weight: 400;font-family: MicrosoftYaHei;}input {margin-top: 10px;padding: 5px;font-size: 14px;width: 185px;outline: none;/* 去掉焦点边框 */}button {padding: 8px 15px;font-size: 16px;line-height: 16px;background-color: #0C52C3;color: white;border: none;border-radius: 6px;cursor: pointer;margin-top: 20px;:hover {background-color: #5586d5;}}#tip-box {position: fixed;top: 15%;left: 50%;transform: translate(-50%, -50%);width: 400px;border: 1px solid #ccc;border-radius: 15px;box-shadow: 0 0 10px rgba(0, 0, 0, .2);padding: 10px 20px;background-color: #fff;z-index: 99999;text-align: left;animation: tip-show .3s forwards;}.tip-header {font-size: 16px;font-weight: bold;color: #333;padding: 9px 6px 3px;}.close-btn {float: right;margin: 10px;}/* .close-btn:hover {background-color: #ccc;} */.tip-content {font-size: 14px;color: #333;padding: 8px 6px;}keyframes tip-show {0% {opacity: 0;}100% {opacity: 1;}}keyframes tip-hide {0% {opacity: 1;}100% {opacity: 0;}}/stylescript srcjquery.min.js/script/headbodydiv classcontainerdiv classform-groupdiv classname请输入累计热量(GJ)/divinput typenumber name idinput classform-control value min0 step0.01 requiredrequiredtitle placeholder0.00 requiredrequired onblurhandleInputChange(event)onkeydownhandlekeyDown(event) /button classbtn btn-primary onclickhandleButtonClick()保存/button/divdiv idtip-box styledisplay: none; onclickhideTip()div classtip-header提示/divdiv classtip-content提示内容/divbutton classclose-btn onclickhideTip()确定/button/div/divscriptlet url http://1x.1x.6.1xxx:12xxx;let api /base/xxxxxDXZZConfig;function handleInputChange(event) {event.target.value Number(event.target.value).toFixed(2);}function handlekeyDown(event) {console.log(event);if (event.keyCode 69) {event.preventDefault();}}function handleButtonClick() {let value input.value;console.log(value);if (!value) {showTip(请输入有效的数值);return;}let data { value };// 使用 URLSearchParams 将数据对象转换为查询字符串let params new URLSearchParams(data).toString();let requestUrl ${url}${api}?${params};let options { method: GET }try {fetch(requestUrl, options).then(res res.json()).then(json {console.log(json);if (json.code 0) {showTip(保存成功);} else {showTip(json.msg);}input.value null;}).catch(error {showTip(请求失败请稍后再试);console.error(Fetch Error:, error);input.value null;});} catch (error) {showTip(请求失败请稍后再试);console.error(Fetch Error:, error);input.value null;}}var tipBox document.querySelector(#tip-box);var closeBtn tipBox.querySelector(.close-btn);function showTip(message) {tipBox.querySelector(.tip-content).innerHTML message;tipBox.style.display block;}function hideTip() {tipBox.style.animation tip-hide .3s forwards;setTimeout(function () {tipBox.style.display none;tipBox.style.animation ;}, 300);}/script
/body/html 2、使用jQuery先 npm install jquery然后引入 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title表底录入/titlestyle* {/* 清空上下边距*/margin: 0;padding: 0;}.container {display: flex;justify-content: center;align-items: center;height: 80vh;}.form-group {padding: 20px;border-radius: 10px;width: 200px;display: flex;flex-direction: column;align-items: center;/* background-color: lightblue; */}.name {width: 200px;text-align: left;font-size: 16px;font-weight: 400;font-family: MicrosoftYaHei;color: #333;}input {margin-top: 10px;padding: 5px;font-size: 14px;width: 185px;outline: none;/* 去掉焦点边框 */color: #333;}button {padding: 8px 15px;font-size: 16px;line-height: 16px;background-color: #0C52C3;color: white;border: none;border-radius: 6px;cursor: pointer;margin-top: 20px;:hover {background-color: #5586d5;}}#tip-box {position: fixed;top: 15%;left: 50%;transform: translate(-50%, -50%);width: 400px;border: 1px solid #ccc;border-radius: 15px;box-shadow: 0 0 10px rgba(0, 0, 0, .2);padding: 10px 20px;background-color: #fff;z-index: 99999;text-align: left;animation: tip-show .3s forwards;}.tip-header {font-size: 16px;font-weight: bold;color: #333;padding: 9px 6px 3px;}.close-btn {float: right;margin: 10px;}.tip-content {font-size: 14px;color: #333;padding: 8px 6px;}/stylescript src./node_modules/jquery/dist/jquery.min.js/script/headbodydiv classcontainerdiv classform-groupdiv classname请输入累计热量(GJ)/divinput typenumber name idinput classform-control value min0 step0.01 requiredrequiredtitle placeholder0.00 requiredrequired onblurhandleInputChange(event)onkeydownhandlekeyDown(event) /button classbtn btn-submit保存/button/divdiv idtip-box styledisplay: none;div classtip-header提示/divdiv classtip-content提示内容/divbutton classclose-btn确定/button/div/divscriptlet url http://1x.1x.6.1xxx:12xxx;let api /base/xxxxxDXZZConfig;function handleInputChange(event) {event.target.value Number(event.target.value).toFixed(2);}function handlekeyDown(event) {// 阻止键盘输入e的情况if (event.keyCode 69) {event.preventDefault();}}// 点击保存$(.btn-submit).click(function () {let value input.value;console.log(value);if (!value) {$(.tip-content).html(请输入有效的数值)$(#tip-box).show();return;}let requestUrl ${url}${api};$.ajax({type: GET,url: requestUrl,data: { value },success: function (res) {console.log(res);if (res.code 0) {$(.tip-content).html(保存成功);$(#tip-box).show();} else {$(.tip-content).html(res.msg);$(#tip-box).show();}input.value null;},error: function (xhr, status, error) {console.error(请求失败: status - error);input.value null;}})})$(.close-btn).click(function () {$(#tip-box).hide()})$(#tip-box).click(function () {$(#tip-box).hide()})/script
/body/html
