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

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

时间:2017-11-02 22:03:07      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:type   网站   round   fish   lin   按钮   点击   代码   相关   

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

父模板的制作:制作网站网页共有元素的父模板html,包括顶部导航,中间区块划分,底部导航,底部说明等;

汇总相关的样式形成独立的css文件;

汇总相关的js代码形成独立的js文件;

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

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function  mySwitch() {
            var oBody=document.getElementById("myBody");
            var oOnoff=document.getElementById("myOnOff");
            if (oOnoff.src.match("bulbon")){
                oOnoff.src="http://www.jelly-fish.co.kr/img/main/logo01.png";
                oBody.style.background="black";
                oBody.style.color="white";

            }else{
                oOnoff.src="http://www.jelly-fish.co.kr/img/main/logo01.png";
                oBody.style.background="white";
                oBody.style.color="black"
            }

        }
    </script>
</head>
<body id="myBody">
<img id ="myOnOff" onclick="mySwitch()" src="http://www.jelly-fish.co.kr/img/main/logo01.png" >
<script>
    document.write(Date())
</script>
</body>
</html>

 

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

标签:type   网站   round   fish   lin   按钮   点击   代码   相关   

原文地址:http://www.cnblogs.com/lwn-blog/p/7774652.html

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