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);
}
});
