JavaScript浅显易懂(十)——onclick练习

ゝ一纸荒年。 2023-02-16 04:15 92阅读 0赞

## 不多说先上代码  很简单  适合新手练习 ##

HTML

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
    
        <title>Title</title>
        <style>
            *{
                //清除默认样式
                margin: 0;
                padding: 0;
            }
            #outer{
                width: 500px;
                margin: 50px auto;
                padding: 10px;
                background-color: yellowgreen;
                /*设置文本居中*/
                text-align: center;
            }
            #outer1{
                width: 500px;
                margin: 50px auto;
                padding: 100px;
                background-color: yellowgreen;
                /*设置文本居中*/
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <p id="info">一共5张图片,当前第1张</p>
            <img src="img/1.jpg" alt="冰棍">
            <button id="prev">上一张</button>
            <button id="next">下一张</button>
        </div>
        <div id="outer1">
            <button id="btn">电我</button>
            <ul id="city">
                <li id="li">dd</li>
                <li>ss</li>
                <li>gf</li>
                <li>gg</li>
            </ul>
        </div>
        <script type="text/javascript" src="script.js"></script>
    </body>
    </html>

Javascript

这里用数组存储img的src   通过改变src实现更换图片

/*
     * 切换图片改 src
     *
     */
    
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");
    var img = document.getElementsByTagName("img")[0];
    var info = document.getElementById("info");
    
    //设置提示文字
    
    //计数器
    var index = 0;
    
    //创建数组存路径
    var imgArray = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
    
    prev.onclick = function () {
        index--;
        if (index < 0 ) {
            index = imgArray.length - 1;
        }
        img.src = imgArray[index];
    
        info.innerHTML = "共"+(imgArray.length)+"张图片，当前第"+(index+1)+"张图片";
    
    };
    
    next.onclick = function () {
        // alert("下一张");
        index++;
        if (index > imgArray.length - 1 ) {
            index = 0;
        }
        img.src = imgArray[index];
        info.innerHTML = "共" + (imgArray.length) + "张图片，当前第" + (index+1) + "张图片";
    };
    
    /*
    * childNodes 属性会获取包括文本节点在内的所有子节点
    * 根据DOM标签 标签间的换行空白也会当为文本节点
    * 注意  IE8以下不会把空白当成文本节点
    * */
    
    var btn = document.getElementById("btn");
    var city = document.getElementById("city");
    
    var cns = city.childNodes;
    /*
    * children属性可以获取所有子节点 不包括空白文本节点
    * */
    var cns2 = city.children;
    
    alert(cns2.length);

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz_size_16_color_FFFFFF_t_70 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200607231243874.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200607231248401.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200607231252787.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2020060723125868.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200607231304290.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzk5NzQz,size_16,color_FFFFFF,t_70