夜间模式的开启与关闭
- 放置点击的按钮或图片。
- 定义开关切换函数。
- onclick函数调用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1103</title> <script> function mySwitch() { var mysty=document.getElementById("on_off"); if(mysty.src.match("../static/image/day.PNG")){ mysty.src="../static/image/night.PNG"; document.getElementById("myBody").style.background="black"; document.getElementById("myBody").style.color="white" } else{ mysty.src="../static/image/day.PNG"; document.getElementById("myBody").style.background="white"; document.getElementById("myBody").style.color="black" } } </script> </head> <body id="myBody"> <img id="on_off" onclick="mySwitch()" src="../static/image/day.PNG" width="50px"> <script> document.write(Date()); </script> </body> </html>
父模版的制作
<!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="white"; }else { oOnOff.src="http://www.runoob.com/images/pic_bulbon.gif"; oBody.style.background="white"; oBody.style.color="blue"; } } </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<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> <script src="../static/js/base.js"></script> <link type="text/css" rel="stylesheet" href="../static/css/styles.css"> </head> <body> <nav> <img id="myOnOff" onclick="mySwitch()" src="https://tva4.sinaimg.cn/crop.0.0.1242.1242.180/bde8475djw8f1hu7mrcy2j20yi0yiabl.jpg" width="30px"> <a href="http://localhost:63342/guanli/templates/base.html?_ijt=q62n14skoqnec43tobo0psd0i3">首页</a> <a href="http://localhost:63342/guanli/templates/zhuce.html?_ijt=cipfjfad2e7o54e0s796j1pe0c">注册</a> <a href="http://localhost:63342/guanli/templates/denglu.html?_ijt=9gs2lnbhs2sh1no40cv5e982b9">登录</a> </nav> <div class="area"> </div> <div class="img"> <div> <a href="base.html"><img src="http://www.zcool.com.cn/community/037471d55de8fc900000171405bc2ee.jpg" height="160px" width="240px"></a> </div> </div> </body> </html>