1.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>夜晚模式</title> <script> function mySwitch() { var oBody = document.getElementById("mybody"); var oOnoff = document.getElementById("myonoff"); if (oOnoff.src.match("bulbon")) { oOnoff.src = "http://www.runoob.com/images/pic_bulboff.gif"; oBody.style.background = "black"; oBody.style.color = "yellow" } else { oOnoff.src = "http://www.runoob.com/images/pic_bulbon.gif"; oBody.style.background = "white"; oBody.style.color = "black" } } </script> </head> <body id="mybody"> <img id="myonoff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px"> <script> document.write(Date()) </script> </body> </html>
2,html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>base</title> <link rel="stylesheet" href="../static/css/13.css" type="text/css"> <script src="../static/JS/b.js"></script> </head> <body id="myBody"> <nav> <img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="50px"> <a href="http://localhost:63342/denglu1.1/templates/shouye.html?_ijt=qijfc55i74avkg8umf7nn7oqt7">首页</a> <a href="http://localhost:63342/denglu1.1/templates/denglu1.1.html?_ijt=7qkhljvviqhhrvp78f6nv1jtqn">谢娜</a> <a href="http://localhost:63342/denglu1.1/templates/%E6%B3%A8%E5%86%8C.html?_ijt=bpr6ikepnp2sh7actb82n1m3dt">照片</a> </nav> <div class="area"> </div> <div class="img"> <a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E8%B0%A2%E5%A8%9C%E7%85%A7%E7%89%87&hs=2&pn=2&spn=0&di=201792667560&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=1700013275%2C2707464521&os=212143778%2C3969242451&simid=3030103568%2C3593025267&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=star&bdtype=0&oriquery=%E8%B0%A2%E5%A8%9C%E7%85%A7%E7%89%87&objurl=http%3A%2F%2F08.imgmini.eastday.com%2Fmobile%2F20161229%2F20161229095440_3868fdb5ac69a50dd044a49c734d0dc9_2.jpeg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bzivx_z%26e3BvvAzdH3FjgpAzdH3Fz5g2ytAzdH3Fda8mAzdH3F8ddlAzdH3Fda989b_z%26e3Bip4s&gsm=0"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509632960399&di=07fd323383d15c14bba1f93e266bfbe3&imgtype=0&src=http%3A%2F%2F08.imgmini.eastday.com%2Fmobile%2F20161229%2F20161229095440_3868fdb5ac69a50dd044a49c734d0dc9_2.jpeg"> </a> <br> <br> </body> </html>
css
.img { border: 1px solid #fff9e9; width: 300px; margin: 5px; float: left; } div.img img { width: 100%; height: auto; } div.desc { text-align: center; padding: 10px; } div.img:hover { border: 1px solid #000000; } .area { height: 400px; } .area1 { height: 200px; }
js
function mySwitch() { var oBody = document.getElementById("myBody"); var oOnoff = document.getElementById("myOnOff"); if (oOnoff.src.match(4034066)) { oOnoff.src = "http://www.runoob.com/images/pic_bulbon.gif"; oBody.style.background = "black"; oBody.style.color = "yellow"; } else { oOnoff.src = "http://www.runoob.com/images/pic_bulbon.gif"; oBody.style.background = "white"; oBody.style.color = "black"; } }