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

1、夜间模式的开启与关闭

（1）放置点击的按钮或图片。

（2）定义开关切换函数。

（3）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>

 

2、父模板的制作

（1）制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。

（2）汇总相关的样式形成独立的css文件。

（3）汇总相关的js代码形成独立的js文件。

（4）形成完整的base.html+css+js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到登录界面，请登录</title>
    <script type="text/javascript" src="../js/sdda.js"></script>
    <link rel="stylesheet" href="../css/denglu.css">
</head>
<body>
<p id="meto">中国标准时间</p>
<script>document.getElementById("meto").innerHTML = Date()</script>
<div id="container"  align="center">
    <div id="header"><h2 align="center">登录界面</h2></div>
    <div id="content" >
 
            <p align="center">用户名：<input id="uname" type="text" placeholder="请输入账号">
 
            </p>
            <p align="center"> 密码&nbsp：<input id="upass" type="password" name="psw" placeholder="请输入密码"></p>
            <br>
            <div id="error_box"><br>
            </div>
            <input type="radio" value="stu">用户
            <input type="radio" value="tea">会员
            <br>
 
            <input type="checkbox" value="true">记住密码 <a href="">登录遇到问题</a><br>
            <button onclick="fnLogin()">登录</button>
            &nbsp&nbsp&nbsp
            <button ><a href="zhece.html">注册</a>
                </button>
 
 
 
    </div>
    <div id="footer"><h3 align="center">版权@hir</h3></div>
</div>
</body>
</html>

 

posted @ 2017-11-02 17:36  018林彬  阅读(257)  评论(0)  编辑  收藏  举报