js对话框,我想做一个购物车结算功能,在结算的时候会花上几秒钟时间...
发布网友
发布时间:2022-04-26 23:54
我来回答
共3个回答
热心网友
时间:2022-04-22 16:43
稍等一下,我贴个demo代码给你
这个是HTML页面
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<script type="text/javascript" src="
<style type="text/css">
body{ font-size:14px;}
.btn{background: #f22d00;color: #fff;display: inline-block;width: 120px;height: 50px;line-height: 50px;text-align: center;font-family: 'Lantinghei SC','Microsoft Yahei';font-size: 20px;-webkit-border-radius: 2px;-moz-border-radius: 2px;-ms-border-radius: 2px;border-radius: 2px;text-decoration: none;cursor: pointer;}
.mask{background: #000;opacity: 0.5;height: 50px;width: 120px;position: absolute;left: 8px;top: 8px;color: #fff;line-height: 50px;text-align: center;font-weight: bold;}
.mask img{vertical-align: -3px;margin-right:5px}
</style>
</head>
<body>
<div class="file-box">
<form method="post" id="demo_form">
<a href="javascript:;" class="btn" id="J_Go"><span>结 算</span></a>
</form>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#J_Go').click(function(){
// 修改结算按钮的背景颜色
$('#J_Go').css('background', '#ccc');
// 添加遮罩效果
var html = '<span class="mask">';
html += '<img src="loading.gif">请稍候...</san>';
$('#demo_form').append(html);
// 提交表单
var url = 'test.php';
$.post(url, {}, function(r){
if(r.status == 1){
// 提交表单后返回成功,则去除遮罩
$('.mask').remove();
// 修改结算按钮颜色
$('#J_Go').css('background', '#f22d00');
}else{
alert(r.info);
}
}, 'json');
});
return false;
});
</script>
</html>
这个是PHP页面
<?php
$info['status'] = 1;
$info['info'] = '操作成功!';
exit(json_encode($info));
?>
这是效果图示
本想上传个附件的,一个完整的实例Demo的,但是现在才*,不支持上传附件。
若有任何疑问,欢迎追问!
热心网友
时间:2022-04-22 18:01
用ajax来做吧,结算结束把成功状态传回来之后关闭提示。
热心网友
时间:2022-04-22 19:36
用query 功能,调用追问我一点也不会jquery,网上有没有视频教程啊