关于计算器，全选全不选试题

HTMl部分：

<body>
    <h1>计算器</h1>
    <div class="wra">
        <div class="xianshi">0</div>
        <div class="jp">
            <div class="fl">C</div>
            <div class="fl">+</div>
            <div class="fl">-</div>
            <div class="fl">*</div>
            <div class="fl">/</div>
            <div class="fl">1</div>
            <div class="fl">2</div>
            <div class="fl">3</div>
            <div class="fl">4</div>
            <div class="fl">5</div>
            <div class="fl">6</div>
            <div class="fl">7</div>
            <div class="fl">8</div>
            <div class="fl">9</div>
            <div class="fl">0</div>
            <div class="fl">=</div>
        </div>
    </div>
    <h1>全选</h1>
    <div class="tab">
        <div class="trs">
            <div class="tds"><input type="checkbox" id="qx">全选</div>
            <div class="tds">姓名</div>
            <div class="tds">操作</div>
        </div>
        <div class="trs">
            <div class="tds"><input type="checkbox" class="xz"></div>
            <div class="tds edit">张三</div>
            <div class="tds"><button class="del">删除</button></div>
        </div>
        <div class="trs">
            <div class="tds"><input type="checkbox" class="xz"></div>
            <div class="tds edit">李四</div>
            <div class="tds"><button class="del">删除</button></div>
        </div>
    </div>
    <button id="add">添加</button>

　　2 css部分

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body{
    padding-left: 100px;
}
.wra{
    width: 170px;
}
.fl{
    float: left;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border: 1px solid red;
    margin: 10px 10px;
}
.jp:after{
    display: block;
    content: ' ';
    clear: both;
}
.xianshi{
    text-align: right;
}

/*全选样式*/
.trs:after{
    display: block;
    content: ' ';
    clear: both;
}
.tds{
    float: left;
    width: 100px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #000;
    text-align: center;
}

/* #qx:checked{
    background-color: red;
    width: 200px;
} */

.edit input{
    width: 100%;
    height: 25px;
    line-height: 25px;
}

　　3 js部分

// 全选
$('#qx').click(function(){
    var iso = $(this).is(':checked');//点击之后的状态
    if(iso){
        $('.xz').prop('checked',true);
    }else{
        $('.xz').prop('checked',false);
    }
});
// 动态事件
$('body').on('click','.xz',function(){
    var ij = $('.xz').length;
    //记录被选中个数
    var count = 0;
    for(i = 0; i< ij; i++){
        if($('.xz').eq(i).is(':checked')){
            count++;
        }
    }
    // 判断是否都被选中
    if(count == ij){
        $('#qx').prop('checked',true);
    }else{
        $('#qx').prop('checked',false);
    }
});
// 添加
$('#add').click(function(){
    $('.tab').append('<div class="trs"><div class="tds"><input type="checkbox" class="xz"></div><div class="tds">李四</div><div class="tds"><button class="del">删除</button></div></div>');
});
// 删除
$('body').on('click','.del',function(){
    $(this).parents('.trs').remove();
});

// 编辑
$('body').on('click','.edit',function(){
    var text = $(this).text();
    $(this).html('<input type="text" value='+text+'>');
    $(this).children().focus();
});
$('body').on('click','.edit input',function(){
    return false;
});
$('body').on('blur','.edit input',function(){
    var val = $(this).val();
    $(this).parent().text(val);
})
//二维码
var qrcod = '1234567890abcdefjhigklmnopqrstyvwxyz';
var len = qrcod.length;
var arr = qrcod.split("");
var qr = "";
for(i = 0; i< 4; i++){
    var j = parseInt(Math.random()*len);
    qr += arr[j];
}
console.log(qr);







// 计算器
var su = 0;
$('.fl').click(function(){
    // $(this)指当前元素
    var th = $(this).text();
    if(th == 'C'){
        $('.xianshi').text(0);
    }else if(th == '='){
        var jg = $('.xianshi').text();
        // eval将字符串按照js代码执行
        su = eval(jg);
        $('.xianshi').text(su);
    }else{
        // isNaN()判断是否非数字值
        if(su == 0 && !isNaN(th)){
            su = th;
        }else if(isNaN(th)){
            // 字符串.substr(start,length)截取字符串
            var zh = su.substr(su.length-1,1);
            if(isNaN(zh)){
                su = su.substr(0,su.length-1)+th
            }else{
                su = su+th;
            }
        }else{
            su = su+th;
        }
        $('.xianshi').text(su);
    }
});

关于计算器，全选全不选试题

猜你喜欢