Examples dom

First, make a transition over time conversion table

The principle is to determine the time to change the output image src path div and the text inside the if statement.

<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>

FIG effect;

 

 

 Second, use the button to switch the picture

Principle is to use the tag img src dom change path, and outputs.

<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 = "Meow Goro"; 
        
        </ Script>}

Renderings: