标签: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>
效果图:
标签:eth if语句 pre html innerhtml 制作 mic tle 语句
原文地址:https://www.cnblogs.com/niuyaomin/p/11760733.html