h5 购物车动态加载页面及动态计算价格js

来源：互联网发布：日志服务器端口编辑：程序博客网时间：2024/04/26 19:57

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">    <title>购买清单</title>

    <script type="text/javascript" src="../../js/jquery.min.js"></script>    <style>        .content{            width: 100Px;            height: 100px;            background: deepskyblue;        }        .right-div{            width: 100Px;            height: 100px;            background: deepskyblue;            text-align: center;        }    </style></head><body style="background: gainsboro"><script>    //全选    function checkAll() {        //用getElementsByName作为标示        var names=document.getElementsByName('gonggaoid');        var singAll=document.getElementById('singAll');        var len=names.length;        var  sum = 0;        for(var i=0;i<len;i++){            if(singAll.checked){                names[i].checked=true;            }            if(!singAll.checked){                names[i].checked=false;            }        }        dataCal();    }//单选    function dataCal(){        var sum=0;        var obj=document.getElementsByName("priceid");        var names=document.getElementsByName('gonggaoid');//取得页面所有的items复选框对象        for(var i=0;i<names.length;i++)        {            if(names[i].checked){                sum= sum + parseFloat(obj[i].innerText);            }        }        checkOne();        document.getElementById("Allcount").innerHTML = sum+".0  元";    }//全选    function checkOne() {        //每个checkbox        var names=document.getElementsByName('gonggaoid');        //全选的按钮        var all = document.getElementById('singAll');        var i=0;        for (i;i<names.length;i++){            if(!names[i].checked){                all.checked = false;                break;            }        }        if(i == names.length)        {            all.checked = true;        }    }    function Success() {        alert("时间到了");    }</script><script>    var test = function () {        var _course_ids = new Array();        _course_ids.push("1");        _course_ids.push("2");        var _param = new Object();        _param["course_ids"] = _course_ids;        _param["token"] = "19931701234085720161129143619";        console.log(JSON.stringify(_param))        $.ajax({            type: "post",            url: "http://*******************",            data: {"param" : JSON.stringify(_param)},            dataType: "json",            success: function (data) {                console.log(data);                var _size = data.courseDOs.length;                document.write("<table style='text-align: center  ;font-size: 16px;border-collapse: collapse;width: 100%;align=center;position: relative;top: 64px' >")                document.write("<caption style='font-size: 18px ;height: 40px ;color: dodgerblue;font-family: 楷体'> 购买清单 ")                document.write("</caption>");                document.write("<tr style='font-size: 15px;color: dodgerblue;line-height: 30px ;border: 1px solid gainsboro; border-radius:5px 5px 0 0;' >")                document.write("<th>");                document.write("<input type='checkbox' id='singAll' onclick='checkAll()'style='text-align: left ;'> 全选             " );                document.write("</th>");                document.write("<th style='text-align: left'>");                document.write("商品详情" );                document.write("</th>")                document.write("</tr>")                document.write("<tr style='height: 12px'>")                document.write("<td></td>")                document.write("<td></td>")                document.write("</tr>")                for(var _index = 0;_index < _size;_index++){                    document.write("<tr style='border: 1px solid gainsboro;height: 150px'>");                    document.write("<td>");                    document.write("<input type='checkbox' name='gonggaoid' onclick='dataCal()'>" );                    document.write("  <img style='vertical-align: middle 'id='img_" + data.courseDOs[_index].id + "' src='http:/************"+ data.courseDOs[_index].pictureUrl + "' width=100 height=\"100\" /> ")                    document.write("</td>");                    document.write("<td>");                    document.write("<table>")                    document.write("<tr style='border: 1px solid gainsboro'>");                    document.write("<td style='font-size: 10px ;line-height: 25px'>"+"商品名称："+data.courseDOs[_index].courseTitle+"</td>")                    document.write("</tr>");                    document.write("<tr>");                    document.write("<td style='font-size: 10px;line-height: 25px'>"+"商品的时间："+data.courseDOs[_index].uploadTime+"</td>")                    document.write("</tr>");                    document.write("<tr>");                    document.write("<td style='font-size: 10px;line-height: 25px'>"+"价格："+"<span name='priceid'>"+ data.courseDOs[_index].price+"</span>"+".0元"+"</td>")                    document.write("</tr>");                    document.write("</table>");                    document.write("</td>");                    document.write("<tr style='height: 10px'>")                    document.write("<td></td>")                    document.write("<td></td>")                    document.write("</tr>")                    document.write("</tr>");//                    document.write("<tr>"+"<td>" + "<div class='content'>" + "</div>"+" </td>" +"</tr>")//                    document.write("<td>" + "<div class='right-div'>" + "</div>"+" </td>")//                    document.write("<img style='vertical-align: middle 'id='img_" + data.courseDOs[_index].id + "' src='"+ data.courseDOs[_index].pictureUrl + "' width='100' height=\"100\" /> " + data.courseDOs[_index].courseTitle +data.courseDOs[_index].uploadTime )//                    $(".content").append("<img style='vertical-align: middle 'id='img_" + data.courseDOs[_index].id + "' src='"+ data.courseDOs[_index].pictureUrl + "' width='100' height=\"100\" /> "   );//                    $(".right-div").append( data.courseDOs[_index].courseTitle+"<br/>"+ data.courseDOs[_index].uploadTime+"<br>"+ data.courseDOs[_index].price+"<p></p>");//                    //$("#xxx").attr('src',data.courseDOs[_index].pictureUrl);                }                document.write("<tr style='height: 15px'>")                document.write("<td></td>")                document.write("<td></td> ")                document.write("</tr>")                document.write("<tr style='border: 1px solid gainsboro ;collapse: '2''>")                document.write("<td></td>")                document.write("<td style='font-size: 10px ;height: 50px'> 合计：<span style='color: dodgerblue;padding: 20px' id='Allcount' >0.0  元</span>" +"     "+                    "<button style='width: 60px; height: 35px; border-radius: 5px; font-size: 14px; color: #fff; background-color: dodgerblue; border: 0' id='alipay'>结算</button></td>")                document.write("</tr>");                document.write("</table>");                $('#alipay').on('click', function(e){                    setTimeout("Success();",5000);                });            }        });    };    test();</script></body></html>

阅读全文

0 0