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，网上有没有视频教程啊