类和浮动模块

最新推荐文章于 2023-03-23 11:46:06 发布

cwd_python

最新推荐文章于 2023-03-23 11:46:06 发布

阅读量348

点赞数

本文链接：https://blog.csdn.net/qq_41781877/article/details/79874634

版权

关于js中创建类的模式

function Student(name,age){
            this.name = name;
            this.age = age;
        }
        Student.prototype.study = function(aa){
            window.alert(this.name + '正在学' + aa);
        };
        Student.prototype.watchAv = function(){
            if(this.age >= 18){
                window.alert(this.name + '正在看片');
            }else {
                window.alert(this.name + '只能看动漫那');
            }
        };
        var stu1 = new Student('A', 18);
        var stu2 = new Student('B',8);
        stu1.study('1111');
        stu2.study('2222')
        stu1.watchAv();
        stu2.watchAv();

for循环的用法

for (var i = 0;i<10;i += 1) ｛｝

在css类样式里面有浮动设置，表示该模块可以在别的模块之上，可以理解为广告模块的样子

position: fixed 表示一直跟随屏幕
position: absolute;表示绝对定位 在屏幕起点位置 然后自己设置高度和宽 该类就一直在最上面

最后来个完整的摸你购物车

<!DOCTYPE html>
<html><!--js变jq用$ jq变js用get或者 【】-->
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{margin: 0;padding: 0;}
            body{
                width: 960px;
                margin: 20px auto;
            }
            #cart{
                margin: 0 auto;
            }
            #cart-header{
                height: 40px;
                background-color:lightgray ;
            }
            #cart-header div{/*行高和类里高度一样表示锤子居中*/
                line-height: 40px;
            }
            .left{/*所有用到浮动的单独设置*/
                float: left;
            }
            .right{
                float: right;
            }
            .w120{
                width: 120px;
            }
            .w200{
                width: 250px;
            }
            .center{
                text-align: center;
            }
            .w20{
                width: 20px;
            }
            .w100{
                width: 100px;
            }
            .clear{
                clear: both;
            }
            #cart-items>div{
                height: :100px;
                text-align: center;
            }
            #cart-items>div>div{
                line-height: 100px;
            }
            .w200 span{
                display: inline-block;
                line-height: 16px !important;
            }
            .samll-button{
                display: inline-block;
                border: none;
                width: 20px;
            }
            .top{
                margin-top: 20px;
            }
            .big-button{
                display: inline-block;
                width: 120px;
                height: 40px;
                background-color: red;
                color: white;
                font-size: 22px;
                border: none;
            }
            #totalCount,#totalPrice{
                color: red;
            }
            #totalPrice{
                font:bolder 20px arial ;
                display: inline-block;
                width: 120px;
            }
            a{
                text-decoration: none;
            }
            a:link,a:visited,a:active{
                color: gray;
            }
            .bot{
                border-bottom: 1px solid gainsboro;
            }
            .cc{
                font-size: 10px;
            }
        </style>
    </head>
    <body>
        <div id="cart">
            <div id="cart-header">
                <div class="left w120 center" style="text-align: left;">
                    <input id="selectAll" type="checkbox">
                    <label for="selectAll">全选</label>
                </div>
                <div class="left w200 center">商品</div>
                <div class="left w120 center">单价</div>
                <div class="left w120 center">数量</div>
                <div class="left w120 center">小计</div>
                <div class="left w120 center">操作</div>
            </div>
            <div id="cart-items">
                <div class="clear bot">
                    <div class="w20 left">
                        <input name="selectOne" type="checkbox">
                    </div>
                    <div class="w100 left top">
                        <a href="" >
                            <img src="img/1.jpg">
                        </a>
                    </div>
                    <div class="w200 left">
                        <span class="cc">海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂</span>
                    </div>
                    <div class="w120 left">&yen;<span class="a">138.00</span></div>
                    <div class="w120 left">
                        <button class="samll-button">-</button>
                        <input class="b" size="2" value="1">
                        <button class="samll-button">+</button>
                    </div>
                    <div class="w120 left">&yen;<span>138.00</span></div>
                    <div class="w120 left">
                        <a href="javascript:void(0);">删除</a>
                    </div>
                </div>
                <div class="clear bot">
                    <div class="w20 left">
                        <input name="selectOne" type="checkbox">
                    </div>
                    <div class="w100 left top">
                        <a href="">
                            <img src="img/2.jpg">
                        </a>
                    </div>
                    <div class="w200 left">
                        <span class="cc">HLA海澜之家长袖衬衫男牛津纺休闲干净透气HNEAJ1E048A浅灰</span>
                    </div>
                    <div class="w120 left">&yen;<span class="a">128.00</span></div>
                    <div class="w120 left">
                        <button class="samll-button">-</button>
                        <input class="b" size="2" value="1">
                        <button class="samll-button">+</button>
                    </div>
                    <div class="w120 left">&yen;<span>128.00</span></div>
                    <div class="w120 left">
                        <a href="javascript:void(0);">删除</a>
                    </div>
                </div>
                <div class="clear bot">
                    <div class="w20 left">
                        <input name="selectOne" type="checkbox">
                    </div>
                    <div class="w100 left top">
                        <a href="">
                            <img src="img/3.jpg">
                        </a>
                    </div>
                    <div class="w200 left">
                        <span class="cc">HLA海澜之家牛津纺清新休闲衬衫2018春季新品质感柔软长袖衬衫男</span>
                    </div>
                    <div class="w120 left">&yen;<span class="a">99.09</span></div>
                    <div class="w120 left">
                        <button class="samll-button">-</button>
                        <input class="b" type="text" size="2" value="1">
                        <button class="samll-button">+</button>
                    </div>
                    <div class="w120 left">&yen;99.00</div>
                    <div class="w120 left">
                        <a href="javascript:void(0);">删除</a>
                    </div>
                </div>
            </div>
            <div id="cart-footer" class="clear">
                <div class="clear left">
                    <a id="clearSelected" href="javascript:void(0);">删除选中商品</a>
                </div>
                <div class="right">
                    <span>总共选中了<span id="totalCount">0</span>件商品</span>
                    <span>总计: <span id="totalPrice">&yen;0.00</span></span>
                    <button class="big-button">去结算</button>
                </div>
            </div>
        </div>
        <script src="js/jquery.min.js"></script>
        <!--$函数的作用：
        1.如果$函数的参数是一个函数那么该函数绑定文档加载完成后要执行的回调函数
        2.如果$函数的参数是一个选择器的字符串那么$函数会返回对应的元素（jQure对象）
        3.如果$函数的参数一个标签字符串那么$函数会创建该函数并返回（jQure对象）
        4.如果$函数的参数一个原生的js元素对象那么$函数会将它转变成jqur对象-->
        <script>
            //发生$函数冲突的时候如果先是别的再是jqure用jqure。noconflict
            //如果是先jqur 就直接写jqur（function）可以不用写函数名如“$”来避免冲突 因为本来名字就是jqure
            $(function(){
                //this到底是什么要看他具体的上下文环境
                //简单地说函数中的this指的是谁调用了这个函数或者谁引发了这个函数的执行
                $('#selectAll').on('change',function(){
                    //获取时间元的两种方式：evt.target||this
                    //这里拿到的是原生的js对象
                    if($(this).prop('checked')){
                        $('.bot input[type = "checkbox"]').prop('checked',true)
                        ctotal()
                    }else{
                        $('.bot input[type = "checkbox"]').prop('checked',false)
                        $('#totalCount').text('0')
                        $('#totalPrice').html('&yen;' +  '0.00') 
                    }
                })
                $('.bot button').on('click',function(){
                    $(this).parent().parent().find('input').prop('checked',true)
                    if($(this).text() == '-'){
                        var bu = parseInt($(this).next().val())
                        if(bu > 1){
                            bu -= 1
                            $(this).next().val(bu)
                        }else{
                            alert('最少为1')
                        }
                    }else{
                        var bu = parseInt($(this).prev().val())
                        if(bu < 200){

                            bu += 1
                            $(this).prev().val(bu)
                        }else{
                            alert('最大为200')
                        }
                    }
                    var a = parseFloat($(this).parent().prev().find('span').text())
                    $(this).parent().next().html('&yen;' + (a * bu).toFixed(2))                    
                    ctotal()
                })
                $('input[name="selectOne"]').on('change',function(){
                    ctotal()
                    if($('#selectAll').prop('checked')){
                        $('#selectAll').prop('checked', false)
                    }
                })
                $('.bot a').on('click',function(){
                    if(window.confirm('你确定吗？')){
                        $(this).parent().parent().remove()
                        ctotal()
                    }
                })
                $('#clearSelected').on('click',function(){
                    if(window.confirm('确定吗')){
                    $('.bot').each(function(){
                        if($('input[name=selectOne]').prop('checked')){
                            $(this).remove()
                            ctotal()
                        }
                    })
                    }
                })
                $('.b').on('change',function(){
                    $(this).parent().parent().find('input').prop('checked',true)
                    var con = $(this).val()
                    if(con != parseInt(con) || con < 1 || con > 200){
                        alert('无效数字')
                        con = 1
                        $(this).val(con)
                    }
                    var a = parseFloat($(this).parent().prev().find('span').text())
                    $(this).parent().next().html('&yen;' + (con * a).toFixed(2))
                    ctotal()
                })
                //改上下文环境（with（doctoment）｛里面默认doc.｝）
                function ctotal(){
                    var a = $('.bot .a')
                    var b = $('.bot .b')
                    var c = $('input[name="selectOne"]')
                    var maxnum = 0
                    var fixnum = 0
                    for (var i = 0;i < a.length;i += 1) {
                        if($(c[i]).prop('checked')){
                            var aa = parseFloat($(a[i]).text())
                            var bb = parseFloat($(b[i]).val())
                            maxnum += bb
                            fixnum += aa * bb
                        }
                    }
                    $('#totalCount').text(maxnum) 
                    $('#totalPrice').html('&yen;' +  fixnum.toFixed(2))
                }
            })
        </script>
    </body>
</html>

cwd_python

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
类和浮动模块

关于js中创建类的模式function Student(name,age){ this.name = name; this.age = age; } Student.prototype.study = function(aa){ window.alert(this.name + '正在学' ...
复制链接

扫一扫