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

最新推荐文章于 2024-10-31 14:25:00 发布

转载最新推荐文章于 2024-10-31 14:25:00 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lianghaohui123/p/7774710.html

本文介绍了一个简单的夜间模式切换功能的实现方法，通过HTML中的图片点击事件触发JavaScript函数，该函数改变页面背景色和文字颜色来达到模式切换的效果。

夜间模式的开启与关闭：放置点击的按钮或图片。定义开关切换函数。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>

转载于:https://www.cnblogs.com/lianghaohui123/p/7774710.html