关于JavaScript的一些练习题（十六）

第七十三题：按钮的动态交互    ele[0].checked    img.setAttribute("src","../img/dog.jpg");  //尽可能

HTML代码
    <input type="button" id="btn1" value="彼岸花">
    <input type="button" id="btn2" value="海棠花"><br><br>
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3023090957,286337210&fm=26&gp=0.jpg" alt="" class="img1" style="width: 300px;height: 280px;display: none;border: solid 1px black;">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2026931439,1183906375&fm=26&gp=0.jpg" alt="" class="img2" style="width: 300px;height: 280px;display: none;">

JavaScript代码
    var btn1 = document.getElementById("btn1")
    var btn2 = document.getElementById("btn2")
    var img1 = document.querySelector(".img1")
    var img2 = document.querySelector(".img2")
    btn1.onclick = function(){
        img1.style.display = "block";
        img2.style.display = "none";
    }
    btn2.onclick = function(){
        img2.style.display = "block";
        img1.style.display = "none";
    }

第七十四题：动态创建表格            //尽可能

HTML代码
    <div id="box"></div>

JavaScript代码
    var oBox = document.getElementById("box");
    var t = document.createElement("table");
    t.border="1px"
    oBox.appendChild(t)
    var count = 1;
    for(var i=0;i<5;i++){
        var tr = document.createElement("tr");
        for(var j=0;j<5;j++){
            var td = document.createElement("td");
            td.innerHTML = count++
            tr.appendChild(td)
        }
        t.appendChild(tr)
    }

第七十五题：动态删除一行表格    //不要求

HTML代码
  <div id="box"></div>

JavaScript代码
    var oBox = document.getElementById("box");
    var t = document.createElement("table");
    t.border="1px"
    oBox.appendChild(t)
    var count = 1;
    for(var i=0;i<5;i++){
        var tr = document.createElement("tr");
        for(var j=0;j<5;j++){
            var td = document.createElement("td");
            td.innerHTML = count++
            tr.appendChild(td)
        }
        t.appendChild(tr)
        var tel = document.createElement("td");
        tel.innerHTML = "删除"
        tr.appendChild(tel)
        tel.onclick = function(){
            this.parentNode.remove()
        }
    }

第七十六题：选项卡

HTML代码
    <ul>
        <li class="active">彼岸花</li>
        <li>海棠花</li>
        <li>月季花</li>
    </ul>
    <div>
        <span>彼岸花传说开放在天堂、地狱路上的花朵，它的话语代表着死亡之美、绝望的爱情的意思，因为彼岸花见花不见叶、见叶不见花，所以也代表着悲伤离合、悲伤的回忆的意思，它被人们称为不吉祥花，象征着灾难</span>
        <span>海棠花还有一个名字，叫做断肠花。意思是苦苦的爱恋着一个人，却终究没有结果，这种感觉就像肠断一样，断肠花的别名就是这样来的。它生长在严寒的冬季，寒风凛冽，也阻止不了它生长的脚步，它也意喻顽强不倒的品质。</span>
        <span>红月季的花语是纯洁的爱，因为它的花朵的颜色是红色，显得非常的火红、热烈，所以就象征着火热的爱恋、女子坚贞的贞洁。红色的月季被人们当做是爱情的象征，大多被用于情人节的礼物，它的蓓蕾代表着可爱。</span>
    </div>

JavaScript代码
    var ul = document.querySelector("ul");
    var li = ul.children;
    var div = document.querySelector("div")
    var span = div.children;
    for(var i=0;i<li.length;i++){
        li[i].setAttribute("index",i)
        li[i].onclick = function(){

            for(var j=0;j<li.length;j++){
                li[j].className = ""
                span[j].style.display = "none"
            }
            this.className = "active"
            var index = this.getAttribute("index")
            span[index].style.display = "block"
        }

    }