HTMLcssjs的简单练习

Posted 2020-11-23 静静地开始

制造一个计算机

html

    <div>
        <div class="qpw">0</div>
        <table class="bk" border="1" cellspacing="0" cellpadding="0">
            <tr>
                <td class="kuang fl">清零</td>
                <td class="fl kuang">退格</td>
                <td class="fl kuang">开机</td>
                <td class="fl kuang">/</td>
            </tr>
            <tr>
                <td class="kuang fl">7</td>
                <td class="fl kuang">8</td>
                <td class="fl kuang">9</td>
                <td class="fl kuang">*</td>
            </tr>
            <tr>
                <td class="kuang fl">4</td>
                <td class="fl kuang">5</td>
                <td class="fl kuang">6</td>
                <td class="fl kuang">-</td>
            </tr>
            <tr>
                <td class="fl kuang">1</td>
                <td class="fl kuang">2</td>
                <td class="fl kuang">3</td>
                <td class="fl kuang">+</td>
            </tr>
            <tr>
                <td class="kuang fl">0</td>
                <td class="fl kuang">.</td>
                <td class="fl kuang">+/-</td>
                <td class="fl kuang">=</td>
            </tr>
        </table>
    </div>

　　

css

.qpw{
    border: 1px solid #000;
    width: 408px;
    height: 70px;
    font-size: 40px;
    text-align: right;
    line-height: 100px;
}
.kuang {
    width: 100px;
    height: 100px;

}

　　

js

var su = 0;
$(‘.fl‘).click(function () {
    var th = $(this).text();
    if(th==‘c‘){
        $(‘.qpw‘).text(0);
    }else if(th==‘=‘){
        var bk=$(‘.qpw‘).text();
        su=eval(bk);
        $(‘.qpw‘).text(su);
    }else{
        if(su==0 &&!isNaN(th)){
            su=th;
        }else if(isNaN(th)){
            var zh=su.substr(su.legth-1,1);
            if(isNaN(zh)){
                su=su.substr(0,su.legth-1)+th
            }else{
                su=su+th;
            }
        }else{
            su=su+th;
        }
        $(‘.qpw‘).text(su);
    }
})

　　

 

全选

html

    <table id="check">
        <tr>
            <td id="qx"><input type="checkbox" onchange="testChange()" id="contro">全选</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
    </table>
    <table id="tbody">
        <tr>
            <td><input type="checkbox" name="box"></td>
            <td>张三</td>
            <td>男</td>
            <td>28</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="box"></td>
            <td>打飞机</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="box"></td>
            <td>李四</td>
            <td>不详</td>
            <td>？？？</td>
        </tr>
    </table>

　　

 

 js

function testChange() {
    var con = document.getElementById("contro");
    var boxz = document.getElementsByName("box");
    for (var i = 0; i < boxs.length; i++) {
        boxs[i].checked = con.checked;

　

 

删除

js

$(‘body‘).on(‘click‘, ‘.del‘, function () {
    $(this).parents(‘trs‘).remove();
})

　　

编辑

$(‘body‘).on(‘click‘, ‘.edit input‘, function () {
    var text = $(this).text();
    $(this).html(‘<input type="text" value=‘ + text + ‘>‘);
    $(this).children().focus();
});
$(‘body‘).on(‘click‘, ‘input‘, function () {
    return false;
});
$(‘body‘).on(‘blur‘, ‘input‘, function () {
    var val = $(this).val();
    $(this).parent().text(val);
})

　　

 

二维码

 

var qrcod=‘1234567890asdfghjklqwertyuiopzxcvbnm‘
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)