夜间模式的开启与关闭,父模板的制作
- 夜间模式的开启与关闭
- 放置点击的按钮或图片。
- 定义开关切换函数。
- onclick函数调用。
<!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="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>
- 父模板的制作
- 制作网站网页共有元素的父模板html,包括顶部导航,中间区块划分,底部导航,底部说明等。
- 汇总相关的样式形成独立的css文件。
- 汇总相关的js代码形成独立的js文件。
- 形成完整的base.html+css+js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>base</title> <base href="http://www.gzcc.cn/2016/images/banner.png" target> <link rel="stylesheet" type="text/css" href="../static/css/base.css"> </head> <nav> <img src="http://www.gzcc.cn/2016/images/banner.png" width="1000px"><br> <a href="http://www.gzcc.cn/">首页</a> <input type="text"name="search"> <button type="submit">搜索</button> <a href="http://www.gzcc.cn/html/yonghufenglei/xuesheng/">学生</a> <a href="http://www.gzcc.cn/html/yonghufenglei/jiaoshi/">教师</a> <a href="http://www.gzcc.cn/html/yonghufenglei/xiaoyou/">校友</a> </nav> <body id="myBody"> <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="black"; } }</script> <img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px"> <script>document.write(Date())</script> <div class="area"> </div> <div> Copyright@ 2017-1102 个人版权,版权所有 作者:杨碧茜 </div> </body> </html>