点击按钮后,弹出个框,显示查询支付状况中…,三秒后,提示为未查询到支付账单,请支付,主要的逻辑是这样的,至于中间可以加一些后端请求的代码进去,这里就省略了。
html代码为:
<button data-v-b863db80="" type="button" class="el-button btn-info el-button--button" style="margin-top: 2%;" onClick="">
<span>支付成功请点击.... </span>
</button>
js代码:
function showPaymentStatus() {
var modal = document.createElement('div');
modal.style.position = 'fixed';
modal.style.width = '300px';
modal.style.height = '100px';
modal.style.top = '50%';
modal.style.left = '50%';
modal.style.transform = 'translate(-50%, -50%)';
modal.style.backgroundColor = 'white';
modal.style.borderRadius = '5px';
modal.style.display = 'flex';
modal.style.justifyContent = 'center';
modal.style.alignItems = 'center';
modal.style.boxShadow = '0px 0px 10px rgba(0, 0, 0, 0.5)';
var message = document.createElement('p');
message.innerText = '查询支付状况中';
message.style.color = '#333';
var dotWrapper = document.createElement('div');
dotWrapper.style.display = 'flex';
dotWrapper.style.marginTop = '-9px';
dotWrapper.style.marginLeft = '10px';
for (var i = 0; i < 3; i++) {
var dot = document.createElement('div');
dot.style.backgroundColor = '#ccc';
dot.style.width = '10px';
dot.style.height = '10px';
dot.style.borderRadius = '50%';
dot.style.marginRight = '5px';
dot.style.animation = 'dot-loading 0.6s ' + i * 0.2 + 's infinite';
dot.style.animationTimingFunction = 'linear';
dotWrapper.appendChild(dot);
}
modal.appendChild(message);
modal.appendChild(dotWrapper);
document.body.appendChild(modal);
// 随机2到5秒后显示未查询到支付账单
var delay = Math.floor(Math.random() * 4) + 2;
setTimeout(function() {
message.innerText = '未查询到支付账单,请支付';
dotWrapper.style.display = 'none';
setTimeout(function() {
modal.remove();
}, 3000);
}, delay * 1000);
}
css动画加载代码:
@keyframes dot-loading {
0% {
transform: scale(1);
}
50% {
transform: scale(0.7); /* 缩小70% */
}
100% {
transform: scale(1);
}
}
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容