dom实例

一，制作一个随着时间转换而转换的桌面

原理是if语句判断时间从而改变输出图片的src路径和div里面的文字。

<img src="img/10.jpg" title="猫咪老师"/>
    <div >
        
    </div>
    <script>
        var div = document.getElementsByTagName("div");
        var img = document.getElementsByTagName("img")
        var day = new Date();
        var h = day.getHours();
        if(h < 12){
            div[0].innerHTML = "上午好";
            img[0].src = "img/12.jpg" ;
        }
        else if(h < 18){
            div[0].innerHTML = "下午好";
            img[0].src = "img/10.jpg" ;
        }
        else{
            div[0].innerHTML = "晚上好";
            img[0].src = "img/13.jpg" ;
        }
　　</script>

效果图；

 二，使用按钮来切换图片

原理是使用dom改变img标签的中的src路径，进行输出。

<button id="a1">猫咪</button>
    
    <button class="a2">屈原</button>
    
    <br>
    
    <img src="img/10.jpg" title="猫咪老师"/>
    <div >
<script>
        var mao1 = document.getElementById("a1");
        
        var mao2 = document.getElementsByClassName("a2");
        
        var img = document.getElementsByTagName("img");
        
        mao2[0].onclick = function(){
            img[0].src = "img/19.gif";
            img[0].title = "小提琴"; 
             
        }
        
        mao1.onclick = function(){
            img[0].src = "img/20.gif";
            img[0].title = "喵五郎";
        }
        </script>

效果图：