码迷,mamicode.com
首页 > 其他好文 > 详细

dom实例

时间:2019-10-29 20:11:21      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:eth   if语句   pre   html   innerhtml   制作   mic   tle   语句   

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

原理是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>

效果图:

技术图片

 

dom实例

标签:eth   if语句   pre   html   innerhtml   制作   mic   tle   语句   

原文地址:https://www.cnblogs.com/niuyaomin/p/11760733.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!