您的位置：首页 > Web前端 > JavaScript

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

2017-08-01 16:59 369 查看 
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航