我的博客^-^ ^-^

来源：互联网发布：淘宝首页设计思路讲解编辑：程序博客网时间：2024/06/01 20:08
第一次写博客，感觉好新奇！！！！
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="js/jquery-3.2.1.min.js"></script></head><style>#d1 {margin: 60px auto;width: 801px;height: 680px;/*border: 1px solid cornflowerblue;*/}#d2 {height: 60px;width: 799px;background-color: rgba(156, 160, 160, 0.6);border: 1px solid red;}#d3 {height: 540px;width: 799px;border: 1px solid red;}span {display: inline-block;text-align: center;}ul {margin: 0px;list-style-type: none;}li {float: left;margin-left: -40px;display: inline-block;height: 90px;width: 799px;text-align: center;border: 1px solid blue;}li div {float: left;height: 90px;width: 30px;text-align: center;line-height: 90px;border: 1px solid blue;}</style><body><div id="d1"><div id="d2"><span style="margin-top: 20px;"><input type="checkbox" id="getAll"/>全选</span><span style="width: 350px;margin-top: 20px;">商品</span><span style="width: 80px;margin-top: 20px;">单价</span><span style="width: 100px;margin-top: 20px;">数量</span><span style="width: 80px;margin-top: 20px;">小计</span><span style="width: 80px;margin-top: 20px;">操作</span></div><!--在这里添加商品信息--><div id="d3"><ul id="uls"><!--这里--></ul></div><input type="button" value="添加一行" id="addgoods" /><input type="button" value="全部删除" id="deleAll" /><span style="width: 500px;">合计：<input type="text" value="0" id="total"/>元<input type="button" value="结算" id="account"/></span></div></body><script>$(function() {var types = 0; //循环json里的数组//添加一行数据$("#addgoods").click(function() {if($("ul").children().length < 5) {$.ajax({url: "goods.json",dateType: "json",type: "get",timeout: 100,success: function(req){var messall = req.goods;var pris = req.prices;//用单引号，必须都在一行保证字符转拼接var mode = '<li><div style="height: 90px;width: 80px;">' +'<input type="checkbox" class="check" /></div><div style="height:90px;width: 320px;" class="clothes">' + messall[types].name + '</div><div style="height:90px;width:90px;" class="price">' + pris[types].price + '</div><div style="height: 90px;width: 110px;"><input type="button" value="-" class="reduses"/><input type="text" style="width: 30px;" value="0" class="txt"/><input type="button" value="+" class="adds"/></div><div style="height: 90px;width: 90px;color: red;" class="subtotal">0</div><div style="height: 90px;width: 96px;"><input type="button" value="删除" class="del"/></div></li>';//$("#mode").hide(5000);$("#uls").append(mode);if(types == 4) {types = 0;} else {types++;}}});} else {alert("商品过多，装不下了！");}});//删除全部$("#deleAll").click(function(){$("#uls").empty();});//全选//var flag = true;//$("#getAll").click(function() {//if(flag) {//$(".check").attr("checked","checked");//flag = false;//} else {//$(".check").removeAttr("checked");//flag = true;//}//});//        全选        $("#getAll").click(            function () {                if($(this).is(':checked')) {                    $(".check").each(function () {                        if(!$(this).is(':checked')){                            this.checked=true                        }                    })                }                else {                    $(".check").each(function () {                        if($(this).is(':checked')){                            this.checked=false                        }                    })                }             }        );//$(".reduses").click(function(){//alert(1)//j--;//alert($(".txt").val(j));////});//减少$("ul").on("click", ".reduses", function() { //给动态元素绑定事件var j = $(this).parent().children(".txt").val();j--;if(j >= 0) {$(this).parent().children(".txt").val(j);var pri = $(this).parent().parent().children(".price").text()$(this).parent().parent().children(".subtotal").text(j * pri);} else {j = 0;}});//增加$("ul").on("click", ".adds", function() { //给动态元素绑定事件var k = $(this).parent().children(".txt").val();k++;//alert(k)if(k <= 10) {$(this).parent().children(".txt").val(k);//subtotal price//$(".subtotal").text(k*$(".preice").text());var pri = $(this).parent().parent().children(".price").text()$(this).parent().parent().children(".subtotal").text(k * pri);} else {k = 10;}});//删除一个$("ul").on("click", ".del", function() { //给动态元素绑定事件$(this).parent().parent().remove();});//结算$("#account").click(function() {//var acc = $(".subtotal").text();var ull = $("ul").children()var tot = 0;for(var i = 0; i < ull.length; i++) {tot = tot + parseFloat(ull.eq(i).children(".subtotal").text());}$("#total").val(tot);});});</script></html>
阅读全文
0 0