zoukankan      html  css  js  c++  java
  • JavaScript-06-Dom操作

    1.上下切换图片

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>上下切换图片</title>
    </head>
    <body>
    <img name="icon" src="image/icon_01.png">
    <p></p>
    <button>上一张</button>
    <button>下一张</button>
    
    <script>
        // 1.全局的变量
        var maxIndex = 9;
        var minIndex = 1;
        var currentIndex = minIndex;
    
        // 2.拿到要操作的标签
        var img = document.getElementsByName('icon')[0];
        var pre = document.getElementsByTagName('button')[0];
        var next = document.getElementsByTagName('button')[1];
    
        // 3.监听按钮的点击
        // 3.1 上一张
        pre.onclick = function () {
            if (currentIndex == minIndex){ // 边界处理
                currentIndex = maxIndex;
            }else{ // 正常情况
                currentIndex -=1;
            }
    
            // 改变src
            img.src = 'image/icon_0' + currentIndex + '.png';
            console.log(img.src);
        };
    
        // 3.2 下一张
        next.onclick = function () {
            if (currentIndex == maxIndex) {
                currentIndex = minIndex;
            }else  {
                currentIndex +=1;
            }
            // 改变src
            img.src = 'image/icon_0' + currentIndex + '.png';
            console.log(img.src);
        }
    </script>
    </body>
    </html>

    2.定时器操作

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定时器</title>
        <style>
            body{
                background-color: black;
                text-align: center;
                margin-top: 100px;
            }
            div{
                color: red;
                font-size: 150px;
            }
            img{
                display: none;
            }
    
            p{
                display: none;
                color: red;
                font-size: 100px;
            }
        </style>
    </head>
    <body>
        <img id="icon" src="./image/flower.gif" alt="">
        <p id="word">我对你的爱滔滔不绝..</p>
        <div id="number">4</div>
        <script type="text/javascript" >
            //1.拿到要操作的标签
            var img = document.getElementById('icon');
            var word = document.getElementById('word');
            var number = document.getElementById('number');
            //2.设置定时器
            var timer = setInterval(function () {
                //改变倒计时数字
                number.innerText -=1;
                //判断
                if (number.innerText == 0){
                    // 清除定时器
                    clearInterval(this.timer);
                    //显示
                    word.style.display = 'block';
                    img.style.display = 'inline-block';
                    //隐藏number
                    number.style.display = 'none';
    
                }
    
            },1000)
        </script>
    </body>
    </html>
  • 相关阅读:
    LeetCode 623. Add One Row to Tree
    LeetCode 894. All Possible Full Binary Trees
    LeetCode 988. Smallest String Starting From Leaf
    LeetCode 979. Distribute Coins in Binary Tree
    LeetCode 814. Binary Tree Pruning
    LeetCode 951. Flip Equivalent Binary Trees
    LeetCode 426. Convert Binary Search Tree to Sorted Doubly Linked List
    LeetCode 889. Construct Binary Tree from Preorder and Postorder Traversal
    LeetCode 687. Longest Univalue Path
    LeetCode 428. Serialize and Deserialize N-ary Tree
  • 原文地址:https://www.cnblogs.com/StevenHuSir/p/10203144.html
Copyright © 2011-2022 走看看