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

时间：2017-11-02 15:55:32 阅读：199 评论：0 收藏：0 [点我收藏+]

标签：styles log href lan 函数制作 get blog 函数调用

夜间模式的开启与关闭
1. 放置点击的按钮或图片。
2. 定义开关切换函数。
3. onclick函数调用。

父模板的制作

制作网站网页共有元素的父模板html，包括顶部导航，中间区块划分，底部导航，底部说明等。
汇总相关的样式形成独立的css文件。
汇总相关的js代码形成独立的js文件。

形成完整的base.html+css+js

<!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>

<!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>

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

标签：styles log href lan 函数制作 get blog 函数调用

原文地址：http://www.cnblogs.com/wangze019/p/7772155.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行