夜光带你走进前端工程师（二十四 jS ）

最新推荐文章于 2020-05-11 20:11:46 发布

GeniusTeam-夜光

最新推荐文章于 2020-05-11 20:11:46 发布

阅读量169

点赞数

分类专栏： My thoughts 前端工程师 JS核心技术文章标签： js

本文链接：https://blog.csdn.net/weixin_41987706/article/details/90690650

版权

My thoughts 同时被 3 个专栏收录

911 篇文章 25 订阅

订阅专栏

前端工程师

48 篇文章 0 订阅

订阅专栏

JS核心技术

23 篇文章 1 订阅

订阅专栏

夜光序言：

只愿与雪般轻盈飘扬的潇洒，

待光华微绽我退场绝不拖沓。

正文：

jS 百度换肤效果：

入口函数

Window.οnlοad=function(){

内部放置JS

}

这个函数的意思就是说：当我们页面加载完毕之后，采取执行函数体里面的JS部分

所以，这句话也可以放在页面的顶端即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0 ; padding: 0}
        body{
            background: url("3.jpg" ) top center ;
        }
        .box{
            height:1500px;
            background: rgba(255,255,255,.3);
            text-align: center;
            padding-top: 50px;
        }
        .box img{
              cursor: pointer;   /* //小手的形状   */
         }

    </style>
<script>
     window.onload=function(){
         //要做事先找人   找事件源 JS精华
         var pic1=document.getElementById("pic1");  //运用ID
         var pic2=document.getElementById("pic2");    //运用ID

         var pic3=document.getElementById("pic3");      //运用ID

         pic1.onclick=function(){
             document.body.style.backgroundImage= "url(3.jpg )";
         };
         pic2.onclick=function(){
             document.body.style.backgroundImage="url(5.jpg)";
         };
         pic3.onclick=function(){
             document.body.style.backgroundImage="url(4.jpg)";  //这是关键，点击换肤
         }
     }
</script>
</head>
<body>
<div class="box">
    <img src="3.jpg" alt="" width="100px" id="pic1"/>
    <img src="5.jpg" alt="" width="100px" id="pic2"/>
    <img src="4.jpg" alt="" width="100px" id="pic3"/>

</div>
</body>
</html>

//通过JS id这个属性来实现换页面皮肤

//实现了点击换肤这种操作，帅气

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0 ; padding: 0}
        body{
            background: url("3.jpg" ) top center ;
        }
        .box{
            height:1500px;
            background: rgba(255,255,255,.3);
            text-align: center;
            padding-top: 50px;
        }
        .box img{
              cursor: pointer;   /* //小手的形状   */
         }
        p{
            text-align: center;
            font-size: 60px;
            font-family: 隶书;
        }
    </style>
<script>
     window.onload=function(){
         //要做事先找人   找事件源 JS精华
         var pic1=document.getElementById("pic1");
         var pic2=document.getElementById("pic2");
         var pic3=document.getElementById("pic3");
         pic1.onclick=function(){
             document.body.style.backgroundImage= "url(3.jpg )";
         };
         pic2.onclick=function(){
             document.body.style.backgroundImage="url(5.jpg)";
         };
         pic3.onclick=function(){
             document.body.style.backgroundImage="url(4.jpg)";
         }
     }
</script>
</head>
<body>
<p>三种页面皮肤夜光【贺钰】设计</p>
<div class="box">
    <img src="3.jpg" alt="" width="100px" id="pic1"/>
    <img src="5.jpg" alt="" width="100px" id="pic2"/>
    <img src="4.jpg" alt="" width="100px" id="pic3"/>
</div>
</body>
</html>

GeniusTeam-夜光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
夜光带你走进前端工程师（二十四 jS ）

夜光序言：只愿与雪般轻盈飘扬的潇洒，待光华微绽我退场绝不拖沓。正文：jS 百度换肤效果：入口函数Window.onload=function(){内部放置JS}这个函数的意思就是说：当我们页面加载完毕之后，采取执行函数体里面的JS部分所以，这句话也可以放在页...
复制链接

扫一扫