夜间模式的开启与关闭，父模板的制作 





 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>开关实现</title>
 6     <script type="text/javascript" src="../static/js/cao.js"></script>
 7     <script>
 8            function mySwitch() {
 9                var oBody=document.getElementById("mybody");
10                var oOnOff=document.getElementById("myOnOff");
11                if (oOnOff.src.match("b9999_")){
12                    oOnOff.src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1509520370&di=f7ae57dab90eab30c78e8f4733607b02&src=http://pic29.photophoto.cn/20131121/0017029581107509_b.jpg"      ;
13                    oBody.style.background="black"
14                    oBody.style.color="white";
15                }else {
16 
17                    oOnOff.src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509532539555&di=5c7e5df90fa122e5a6dcae2de5fb45d5&imgtype=0&src=http%3A%2F%2Fwww.jbhdq.com%2Fuploadfile%2F2016%2F0617%2F20160617103213932.jpg";
18                    oBody.style.background="yellow"
19                    oBody.style.color="black";
20                }
21            }
22     </script>
23 </head>
24 <body id="mybody">
25 
26 <nav style="color: aliceblue">
27     <img src=m/uploads/allimg/120327/2041"http://www.leimost.co552945-8.jpg"
28          style="width: 50px">
29     <img id="myOnOff" onclick="mySwitch()" width="40px"
30          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509532539555&di=5c7e5df90fa122e5a6dcae2de5fb45d5&imgtype=0&src=http%3A%2F%2Fwww.jbhdq.com%2Fuploadfile%2F2016%2F0617%2F20160617103213932.jpg">
31 
32     <input align="center" type="text" placeholder="hahahahaha" style="width: 200px">
33     <button type="submit" style="background-color: brown">搜索</button>
34 </nav>
35 <div id="footer"><h3 align="center">版权所有@</h3></div>
36 </body>
37 </html>






 


 






2.父模板的制作




 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>开关实现</title>
 6     <script type="text/javascript" src="../static/js/cao.js"></script>
 7     <script>
 8            function mySwitch() {
 9                var oBody=document.getElementById("mybody");
10                var oOnOff=document.getElementById("myOnOff");
11                if (oOnOff.src.match("b9999_")){
12                    oOnOff.src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1509520370&di=f7ae57dab90eab30c78e8f4733607b02&src=http://pic29.photophoto.cn/20131121/0017029581107509_b.jpg"      ;
13                    oBody.style.background="black"
14                    oBody.style.color="white";
15                }else {
16 
17                    oOnOff.src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509532539555&di=5c7e5df90fa122e5a6dcae2de5fb45d5&imgtype=0&src=http%3A%2F%2Fwww.jbhdq.com%2Fuploadfile%2F2016%2F0617%2F20160617103213932.jpg";
18                    oBody.style.background="yellow"
19                    oBody.style.color="black";
20                }
21            }
22     </script>
23 </head>
24 <body id="mybody">
25 <nav style="color: aliceblue">
26     <img src=m/uploads/allimg/120327/2041"http://www.leimost.co552945-8.jpg"
27          style="width: 50px">
28     <img id="myOnOff" onclick="mySwitch()" width="40px"
29          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509532539555&di=5c7e5df90fa122e5a6dcae2de5fb45d5&imgtype=0&src=http%3A%2F%2Fwww.jbhdq.com%2Fuploadfile%2F2016%2F0617%2F20160617103213932.jpg">
30     <input align="center" type="text" placeholder="hahahahaha" style="width: 200px">
31     <button type="submit" style="background-color: brown">搜索</button>
32 </nav>
33 <div class="main" style="width: 300px;margin-left: auto;margin-right: auto">
34     <div id="header"><h2 align="center">登陆界面</h2></div>
35     <div class="content">
36         <p align="center">用户&nbsp：<input id="uname" type="text" name="user" placeholder="请输入账号"></p>
37         <p align="center"> 密码&nbsp：<input id="upass" type="password" name="psw" placeholder="请输入密码"></p>
38         <br>
39         <div id="error_box"><br>
40         </div>
41         <br>
42         <input type="checkbox" value="true" id="dd">记住密码 <br>
43 
44         <p align="center">
45             <button onclick="fnLogin()">登录</button>
46         </p>
47         <a href="register.html">
48             <p align="center">
49                 <button onclick="fnLogin()">注册</button>
50             </p>
51         </a>
52     </div>
53     <div id="footer"><h3 align="center">版权所有@</h3></div>
54 </body>
55 </html>






 


 


 




 






            

            
posted @ 
2017-11-02 19:55 
013洪辉 
阅读(179) 
评论(0) 
编辑 
收藏 
举报