遮罩(让按钮在一次请求执行完才能再次请求)

  • 用到提交按钮时,有时候代码运行比较慢,如果重复点提交,可能重复请求会导致不理想的情况,为避免重复的请求以致出现问题,需要用着遮罩,达到只进行一次提交请求
    在这里插入图片描述
    效果:
    在这里插入图片描述

JSP:


<a class="btn" href="javascript:void(0);" id="submit">提交</a>

<div class="lately-buy hideview">
  <div class="load-sibin"></div>
  <div class="loading-load-lately-buy">
  //图片路径
    <img src="。。。/loadinfo.gif">
  </div>
</div>

CSS:

.loading-load-lately-buy, .loading-load-sq, .loading-login {
    position: fixed;
    display: none;
    width: 33%;
    height: 20%;
    line-height: 0.9375rem;
    text-align: center;
    border-radius: 0.2rem;
    left: 47.5%;
    top: 50%;
    z-index: 1000;
    color: #fff;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    font-size: 14px;

}
.lately-buy, .modal-load-sq, .modal-login {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    background-color: rgba(0, 0, 0, 0.25);
    background: #000;
    opacity: 0.3;
    filter: alpha(opacity=30);

}


.load-sibin {
    width: 100%;
    height: 100%;
    background:#000;
    opacity: 0.3;
    filter: alpha(opacity=30);
}

.loading-load-lately-buy, .loading-load-sq, .loading-login {
    line-height: 0.9375rem;
    text-align: center;
    color:#fff;
    font-size: 14px;
}

JS:

 $("#submit").click(function() {
  	$(".hideview").show();
    $(".loading-load-lately-buy").show();
 }
好的,这个功能可以通过 JavaScript 和 CSS 来实现。以下是代码示例: 首先,在 HTML 中添加一个包含遮罩和 loading 图片的元素,代码如下: ```html <div id="overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 999; display: none;"> <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"> <img src="loading.gif" alt="Loading..."> </div> </div> ``` 该代码会在当前页面顶层添加一个半透明的遮罩层,并在其中心显示一个 loading 图片,初始状态为隐藏。 然后,在 JavaScript 中添加按钮点击事件监听器,并在其中添加 loading 展示和数据请求逻辑,代码如下: ```javascript document.getElementById("button").addEventListener("click", function(){ // 显示 loading 和遮罩层 document.getElementById("overlay").style.display = "block"; // 发送数据请求 fetch("your_api_url") .then(response => response.json()) .then(data => { // 处理数据 // ... // 隐藏 loading 和遮罩层 document.getElementById("overlay").style.display = "none"; }) .catch(error => { console.error(error); // 隐藏 loading 和遮罩层 document.getElementById("overlay").style.display = "none"; }); }); ``` 该代码会在按钮点击时,显示 loading 和遮罩层,然后发送数据请求。当请求返回成功时,会进行数据处理,并隐藏 loading 和遮罩层。如果请求失败,则会输出错误信息,并同样隐藏 loading 和遮罩层。 请注意,您需要将 "button" 替换为您实际使用的按钮 ID,以及将 "your_api_url" 替换为您实际使用的 API 地址。 希望这能帮到您!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值