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

最新推荐文章于 2023-04-12 18:02:42 发布
最新推荐文章于 2023-04-12 18:02:42 发布
阅读量1.4k 收藏 5
点赞数 1
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangyanli0309/article/details/76546341
版权 
<!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' οnclick='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' οnclick='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>

冉然
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
购物车H5前端页面，带前计算端逻辑
07-25
购物车H5前端页面，带前计算端逻辑，实现前端展示类的全选、单选、数量加减，滑动删除展示，计算总价，小计等功能
用vuex写了一个购物车H5页面的示例代码
10-17
本篇文章主要介绍了用vuex写了一个购物车H5页面的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
h5单页面上拉刷新下拉加载
10-16
js+css，tab选项卡，每个选项可以上拉刷新数据，下拉加载更多
js实现购物车功能
06-14
原生js实现简单购物车功能，方便简单，可直接使用到web
H5多种加载效果loading，H5页面加载中动画
03-07
H5多种加载效果loading，H5页面加载中动画，炫酷的加载中动画
js实时计算价格
weixin_30662109的博客
07-14 874
//通过数量，单价的输入，实时显示总价 $("#number,#price").on("input",function(e){ 　　$("#totalPrice").val(0); 　　var number = $('#number').val(); 　　var price = $('#price').val(); 　　var totalPrice = Number(number)...
怎么用JS实现网页中的价格变动，删除和统计？
最新发布
晴天学长
04-12 213
大家好，我是晴天学长，新的一天又开始了，不管是算法还是什么的，咱们的技术还是得跟上啊！今天分享的是如何用JS去实现网页的价格自动改变和一些删除操作，需要的小伙伴请自取哦！💪💪💪（a）.html文件 （b）.js文件 （c）.css文件 （d）.imgs文件
购物车前后端html内嵌页交互的异步操作并且计算总价格
Hiber12的博客
12-22 904
一、现在每个电商网站的购物车的操作，你会发现网速变慢了，是它故意让服务变慢，减速带，避免大量的高并发把服务器打崩。 1、这里使用ajax异步操作 2、异步操作一般都是返回json，这里做的是，返回内嵌页面，刷新当前页面 3、把购物车列表的内嵌页面放到一个新的html页面中，服务器只需要返回并刷新这个内嵌页面即可！ 4、每次点击按钮，都会调用该事件checkSku(this)，该事件在主页面上 二、实现前后端交互的异步操作（导师留下的前端bug，作为后端的开发人员表示看的很头痛！！！） 执行该事件（
前端和后端两种方法实现价格的增加与减少
L__MY的博客
03-31 489
第一种方法 前端方法 实现电机事件 获取价格的值 因为文本框的值是text类型 所以要转int 用parseInt <script type="text/javascript"> function zz(){ var p = $("[name='price']").val() $("[name='price']").val(parseInt(p)+100); } </s...
加入购物车里面的商品被商家调整价格以后如何处理金额问题
Enetaunt的博客
05-31 1万+
问： 当一个商品加入购物车以后，商品价格是100元，用户放进购买车进行支付（商家刚好这时在erp系统、商城管理系统上进行调整价格为120元）。这种情况如何处理？ 答： 类似淘宝的那种形式，加入购物车是100，然后选择购物车商品跳转到订单页面（订单确认键）时候，根据商品id查询此时的商品价格，然后计算出总价生成订单id，如果这个过程中商家修改了价格，价格就会变化成修改后的价格，生成订单以后商家再修...
html+css+js购物车
09-24
购物车由html+css+jquery完成的计算购买页面，多店铺计算结果，纯移动端代码不包含PC端 。
移动端H5动态加载菜单 源码
04-21
我的博客《移动端H5动态加载菜单》代码，下载需要积分，请参考博客谨慎下载， 博客地址：https://blog.csdn.net/chengbao315/article/details/105649923
Java程序设计基础练习50题(上)
weixin_44037272的博客
06-01 1607
1 基础知识 E201_01_01温度转换 E201_01_02计算圆形面积 E201_01_03计算球的体积 E201_01_04计算三角形面积 E201_01_05鬼谷算题 E201_01_06 话费计费器 2 选择结构 E201_02_01的士计价器 E201_02_02判断闰年 E201_02_03分段函数 E201_02_04按性别计算输血量 E201_02_05购买火车票 E201_02_06阶梯电价 E201_02_07个税计算器 E201_02_08判断体型 E201_02_09奖金发放 E
npm run build报错
qq_41220477的博客
02-14 528
缺少一个 static空文件夹
java如何实现计费软件_基于jsp的网吧自动计费收费管理系统-JavaEE实现网吧自动计费收费管理系统 - java项目源码...
weixin_33226548的博客
02-26 671
基于jsp+servlet+pojo+mysql实现一个javaee/javaweb的网吧自动计费收费管理系统, 该项目可用各类java课程设计大作业中, 网吧自动计费收费管理系统的系统架构分为前后台两部分, 最终实现在线上进行网吧自动计费收费管理系统各项功能,实现了诸如用户管理, 登录注册, 权限管理等功能, 并实现对各类网吧自动计费收费管理系统相关的实体进行管理。该网吧自动计费收费管理系统为一...
vue实现购物车页面操作 商品的单选和全选以及商品单价和总价的动态变化
Kotoba209_的博客
01-08 2574
vue框架搭建，UI库使用的是iview，购物车页面使用iview的table组件，没有用到element，不知道实现起来效果怎么样，感觉iview有点坑。 准备工作： 数据源 shoppingCart：[ ]; 该数据数据结构如下 const items = { id: data.id, num: data.num, img: data.img...
使用Html+Css+JS实现商品的展示，价格计算等功能
weixin_45866961的博客
05-29 7379
源码在后面 效果展示图片 功能 调用外部数据，动态建立路径导航 调用外部数据，动态建立图片展示页面，为并未主图绑定鼠标移入、移动、移出事件，实现放大镜详情展示 3.并为其绑定左右按钮事件，进行切换 4. 为小图绑定切换事件，由小图切换主图， ...
h5 返回到之前的页面几种方法
热门推荐
冉然的博客
03-23 2万+
1、返回上一页,不刷新history.htmlwindow.history.go(-1); javascript:window.history.go(-1)2、返回上一页并刷新页面avascript:location.replace(this.href);event.returnValue=false;3、返回上一页并刷新self.location=document.referrer4、返回上一页...
cocoscreator h5游戏移动端加载页面修改
03-11
你可以通过修改 meta 标签中的 viewport 属性来适配移动端的页面，具体可以参考以下代码： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> ``` 另外，你也可以使用 CSS3 的媒体查询来适配不同的屏幕尺寸，例如： ```css @media screen and (max-width: 768px) { /* 在屏幕宽度小于等于 768px 时应用的样式 */ } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

冉然

你的鼓励对我很重要

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值