夜間模式的開啓與關閉，父模板的製做

時間 2019-11-16

原文原文鏈接

1.夜間模式的開啓與關閉css

放置點擊的按鈕或圖片。
定義開關切換函數。
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>

2.父模板的製做html

製做網站網頁共有元素的父模板html，包括頂部導航，中間區塊劃分，底部導航，底部說明等。
彙總相關的樣式造成獨立的css文件。
彙總相關的js代碼造成獨立的js文件。
造成完整的base.html+css+js

htmlweb

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>夜間模式</title>

<link rel="stylesheet" type="text/css" href="../static/css/wang.css">
     <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>
<script>
    document.write(Date())
</script>
<nav>
 <a href="http://www.gzcc.cn/">首頁</a>
 <input type="text" ></input>
 <button type="submit">搜索</button>
 <a href="">登陸</a>
 <a href="">註冊</a>
</nav>
<p align="right"><img id="myOnOff" onclick="mySwitch()" src="http://www.runoob.com/images/pic_bulbon.gif" width="40px"></p>



<body id="myBody">



<div class="recommond">
    <div class="img">
        <a href="http://www.jianshu.com/"><img src="http://cdn2.jianshu.io/assets/web/logo-58fd04f6f0de908401aa561cda6a0688.png"></a>
        <div class="desc"><a href="http://www.jianshu.com/">簡書</a></div>
    </div>


</div>
</body>



</html>

css函數

img {
    width: 180px;
}
div.img{
border:1px solid #cccccc;
     float: left;
      margin: 5px;
      width:180px;
    height: 200px;
  }
 div.img img{
     width:100%;
     height:100%;
 }
 div.desc{
     text-align: center;
     padding: 5px;
 }
 div.img:hover{
      border:1px solid #000000;
 }

js網站

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";
    }

}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。