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

夜光序言：

小时候，微笑是一种心情，长大后，微笑是一种表情。

正文：

<script>
    function fn(a,b){
        console.log(fn.length);   //得到的是函数的形参的个数
        console.log(arguments);   //输出[1,2]
        console.log(arguments.length);
        if(fn.length==arguments.length)
        {
            console.log(a+b);
        }
        else
        {
            console.log("sorry,形参实参个数不匹配");
        }
    }
    fn(1,2);
</script>

//输出因为实参形参个数相互一致所以输出3

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

console.error("sorry,形参实参个数不匹配");

//以形参为准

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

函数传参显示盒子

夜光

Var a=10,b=20;

[var a=10;

Var b=20;]

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

鼠标展示CSS部分

夜光

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box{
            height: 70px;
            width: 360px;
            padding-top: 360px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }
    </style>

</head>
<body>
<div id="box">

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

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

鼠标展示JS部分

夜光

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        #box{
            height: 70px;
            width: 360px;
            padding-top: 360px;
            border: 1px solid #ccc;
            margin: 100px auto;
            overflow: hidden;
            background: url(韩信萌.jpeg) no-repeat;
        }
        #box ul{
            overflow: hidden;
            border-top: 1px solid #ccc;
        }
        #box li{
            float: left;
        }
    </style>
    <script>
      /* window.onload =function(){
        var a2=document.getElementById("a2");
        var box=document.getElementById("box");
        a2.οnmοuseοver=function(){
              box.style.backgroundImage = "url(韩信特效01%20尺寸缩小.jpg)";
        }
        }*/
        window.onload=function(){
        var box=document.getElementById("box");
        function fn(ad,bg){
            var target=document.getElementById(ad);
            target.onmouseover=function(){
                box.style.backgroundImage = bg;
            }
        }
        fn("a1","url(嬴政01%20尺寸降低.jpg)"); //实参
        fn("a2","url(韩信特效01%20尺寸缩小.jpg)"); //实参
        fn("a3","url(大小姐01%20%20尺寸降低.jpg.jpg)"); //实参
        fn("a4","url(韩信萌.jpeg.jpg)"); //实参
        fn("a5","url(守约01.jpeg)");     //实参
      }
    </script>

</head>
<body>
<div id="box">
              <ul>
                  <li id="a1"><img src="嬴政01%20尺寸降低.jpg" alt="" width="72px" height="72px"/> </li>
                  <li id="a2"><img src="韩信特效01%20尺寸缩小.jpg" alt="" width="72px" height="72px"/> </li>
                  <li id="a3"><img src="大小姐01%20%20尺寸降低.jpg" alt="" width="72px" height="72px"/> </li>
                  <li id="a4"><img src="韩信萌.jpeg" alt="" width="72px" height="72px"/> </li>
                  <li id="a5"><img src="守约01.jpeg" alt="" width="72px" height="72px"/> </li>
              </ul>
</div>
</body>
</html>

// 这些代码看几十遍融会贯通

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

夜光序言：

小时候，微笑是一种心情，长大后，微笑是一种表情。

正文：

函数传参显示盒子

夜光

鼠标展示CSS部分

夜光

鼠标展示JS部分

夜光

相关推荐

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