码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-11-04 19:35:33      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:base   ora   width   密码   html   底部   link   styles   href   


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

function mySwitch() {
    var myele=document.getElementById("on_off")
    if(myele.src.match("u=1878009223,3806655311&fm=200&gp=0"))
    {
        myele.src="http://img4.imgtn.bdimg.com/it/u=217976653,3967921437&fm=27&gp=0.jpg"
        document.getElementById("myBody").style.background="gray"
        document.getElementById("demo").style.color="white"


    }else{
        myele.src="http://img2.imgtn.bdimg.com/it/u=1878009223,3806655311&fm=200&gp=0.jpg";
        document.getElementById("myBody").style.background="white"
        document.getElementById("demo").style.color="gray"
    }

}

父模板的制作

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

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link  rel="stylesheet" type="text/css" href="../static/css/nino.css">
    <script src="../static/js/aiba.js"></script>
</head>
<body id="myBody">
<div id="container">
<nav class="header">
    <ul>
    <img id="on_off" onclick="mySwitch()" src="http://img2.imgtn.bdimg.com/it/u=1878009223,3806655311&fm=200&gp=0.jpg" width="50px">
    <li><a href="{{ url_for(‘base‘) }}">首页</a></li>
    <li><input type="text" class="text" placeholder="搜索">
    <input type="submit" value="搜索"data-disable-with="搜索"></li>
    <li><a href="{{ url_for(‘sign_in‘) }}">登录</a></li>
    <li><a href="{{ url_for(‘sign_up‘) }}">注册</a></li>
        </ul>
</nav>
    <div class="im">
            <a href="https://baike.baidu.com/item/ARASHI/4106370?fr=aladdin">
                <img src="http://p3.so.qhimgs1.com/bdr/_240_/t0109ab8c105af58973.jpg">
            </a>
            <div class="desc"><a href="https://baike.baidu.com/item/ARASHI/4106370?fr=aladdin">ARASHI</a></div>
        </div>
        <div class="im">
            <a href="https://baike.baidu.com/item/ARASHI/4106370?fr=aladdin">
                <img src="http://p0.so.qhimgs1.com/bdr/_240_/t010b57c4173029c22c.jpg">
            </a>
            <div class="desc"><a href="https://baike.baidu.com/item/ARASHI/4106370?fr=aladdin">ARASHI</a></div>
    </div>

 <div id="footer">
    <p>you are my soul soul 18週年おめでとう</p></div>
    </div>
</body>
</html>
 #footer {
 position:fixed;
bottom:0px;
left:600px;
}
.text{
    width: 80px;
    height: 30px;
    margin-bottom: 0;
    vertical-align: middle;
}
#footer p{
    font-size: 15px;
    color: black;
    text-decoration: none;
        }
 .header ul{
     width: 1300px;
     margin: 20px auto 0px auto;
 }
.header ul li{
    float: left;
}
.header ul li a{
    margin: 10px 100px;
    width: 100px;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    text-align: center;

        }
function myLogin() {
            var oUname=document.getElementById("uname");
            var oPass=document.getElementById("upass");
            var oPas=document.getElementById("upas");
            var oError=document.getElementById("error_box");
            oError.innerHTML="<br>";
            if(oUname.value.length<6||oUname.value.length>20){
                oError.innerHTML=‘请输入6-20位的用户名‘;
                isError=false;
             return;

            }
            if(oUname.value.charCodeAt(0)>=48&&oUname.value.charCodeAt(0)<=57){
                oError.innerHTML=‘首字母不能为数字‘;

             return;
            }else{
                for(var i=0;i<oUname.value.length;i++){
                    if((oUname.value.charCodeAt(i)>122||oUname.value.charCodeAt(i)<97)&&(oUname.value.charCodeAt(i)>57&&oUname.value.charCodeAt(i)<48)){
                        oError.innerHTML=‘只能输入字母或数字‘;
                        isNotError=false;
                        return;
                    }
                }
            }
            if(oPass.value.length<6||oPass.value.length>20){
                oError.innerHTML=‘请输入6-20位的密码‘;
            return;

            }else  if(oPass.value != oPas.value){
                oError.innerHTML=‘密码输入不正确‘;
                return;
            }


        }
function mySwitch() {
    var myele=document.getElementById("on_off")
    if(myele.src.match("u=1878009223,3806655311&fm=200&gp=0"))
    {
        myele.src="http://img4.imgtn.bdimg.com/it/u=217976653,3967921437&fm=27&gp=0.jpg"
        document.getElementById("myBody").style.background="gray"
        document.getElementById("demo").style.color="white"


    }else{
        myele.src="http://img2.imgtn.bdimg.com/it/u=1878009223,3806655311&fm=200&gp=0.jpg";
        document.getElementById("myBody").style.background="white"
        document.getElementById("demo").style.color="gray"
    }

}

 

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

标签:base   ora   width   密码   html   底部   link   styles   href   

原文地址:http://www.cnblogs.com/arashinoj/p/7777398.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!