2019-08-26_Work_Day26

work01-縮略圖
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>work01-縮略圖</title>
    <style>
        #b_img,#s_img{
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="b_img">
        <img src="../img/b-1.jpg">
    </div>
    <div id="s_img"></div>
    <script>
        let bImgList = ['b-1', 'b-2', 'b-3']
        let sImgList = ['s-1', 's-2', 's-3']
        let sImg = document.querySelector('#s_img')
        let str = ''
        for (let i = 0; i < sImgList.length; i += 1) {
            str += `<img src="../img/${sImgList[i]}.jpg">`
        }
        sImg.innerHTML = str

        let bBtn = document.querySelector('#b_img>img')
        let sBtn = document.querySelectorAll('#s_img>img')
        for (let i = 0; i < sBtn.length; i++) {
            sBtn[i].addEventListener('mouseover', ()=>{
                bBtn.src = `../img/${bImgList[i]}.jpg`
            })
        }
    </script>
</body>

</html>
work02-按鈕點擊事件
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>work02-按鈕點擊事件</title>
    <style>
        .btn {
            margin: 200px auto;
            text-align: center;
        }

        button {
            width: 150px;
            height: 50px;
            margin: 0 auto;
            cursor: pointer;
            background-color: red;
            font: bold 24px/32px "Arial";
        }
    </style>
</head>

<body>
    <div class="btn"></div>
    <script>
        let div = document.querySelector('.btn')
        let num = 5

        let str = ''
        for (let i = 0; i < num; i+= 1) {
            str += `<button><input type="checkbox">${String.fromCharCode(65 + i)}</button>`
        }
        div.innerHTML = str

        let btnList = document.querySelectorAll('button')
        for (let btn of btnList) {
            let ck = btn.querySelector('input[type=checkbox]')
            btn.addEventListener('click', () => {
                if (ck.checked){
                    ck.checked = false
                    btn.style.backgroundColor = 'red'
                }else{
                    ck.checked = true
                    btn.style.backgroundColor = 'lightgreen'
                }
            })
        }
    </script>
</body>

</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容