函数的调用以及作用域与实现简易版轮播图

最新推荐文章于 2024-09-17 11:42:54 发布

一杯茶一包烟慢慢摸鱼混一天

最新推荐文章于 2024-09-17 11:42:54 发布

阅读量126

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_53414977/article/details/130092950

版权

一：函数的一些小总结

1：函数分为：

自定义函数（自己定义的）
系统函数（js默认提供的函数，例如：parseInt(),parseFloat(),toFixed(),Number()
,Boolean(),String()…）

2函数的注意事项：

函数要使用关键字 function 后面加上空格和typeof var 等关键字一样都要后面加空格使用

3命名规范：

function 后面跟的是函数的名字：命名规则和变量一样，
1. 以大小写字母，$,_和数字的组成不能以数字开头
2. 区分大小写，建议使用小驼峰命名法
3. 不要使用关键字作为函数
4. function 函数名(形式参数1,形式参数2,形式参数3。。。。)
5. {} 小括号里面可以加形参也可以不加，也可以加多个形参
形参对应的是实际参数，调用的时候顺序和形参保持一致

如下：

如果不使用形式参数 可以使用关键字 arguments 
        function getMax(){
            console.log(arguments[0],arguments[1],arguments[2],arguments[3]);
         }
         getMax(1,2,3,4)

4.匿名函数

匿名函数：指的是没有函数名的函数。
匿名函数使用变量接收叫做函数表达式

var getMax = function (){
          console.log(1);

5.js预解析

js预解析的过程
我们js在执行代码之前，会进行一个操作，这个操作叫做预解析
预解析会扫描整个js文件，做两件事
第一件：如果看到var定义的变量，就会先赋值为undefined （变量提升）
第二件：如果看到function关键字，就会把整个函数放在js的最顶部（证明一点：在js中函数是一等公民）
后面就开始正常执行js代码，比如：变量赋值

二：arugments对象

在javascript函数体内，标识符arguments具有特殊含义。
Arugments对象就像数组，注意这里只是像但本质上并不是一个数组。【类数组】
arguments的length属性
利用arugments对象像数组的特性获取实参
function getMax(){
arguments.length 表示arguments对象中的形式参数的个数
console.log(arguments.length);
length的作用是用来帮助我们循环arguments里面内容用的
for(var i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
代码如下：

   		 function getMax(){
   		 var num = arguments[0];
         for(var i=1;i<arguments.length;i++){
            if(num<arguments[i]){
                num = arguments[i];
            }
        }  return num;
        }
        var max = getMax(7,10,40,20,50,100);
    alert(max);

三：变量的作用域

1.什么是作用域？

作用的范围有大有小范围大的可以管理管理范围小但是范围小不能管理范围大的
全局作用域 和 局部作用域
举个简单的例子，学校里的系或者班级与学校的关系，一个学校有好多个系，每个系里面又有好多班级，就跟作用域类似

2.局部变量

在JavaScript函数内部声明的变量(使用var声明的)是局部变量，所以只能在函数内部访问它（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
注意：只要函数运行完毕，局部变量就会被销毁回收。
在函数内部定义的变量才叫做局部变量
只有在函数内部才能访问到

3全局变量

在函数外面写的变量就是全局变量

四：函数的调用

在元素上添加onclick属性属性后面跟字符串字符串里面写的方法名加()
表示点击的时候执行该方法

<body>
    <button onclick="onclickFn()">点击此处</button>
    <script>
        function onclickFn(){
            window.alert("鉴定完毕，面前的人是个大帅锅");
        } 
    </script>
</body>

五：简易版轮播图

1.代码如下：

这个可以直接实验，图片是网络地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 350px;
            height: 200px;
        }

        li {
            display: none;
            list-style: none;
        }

        img {
            width: 650px;
            display: block;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681318800&t=37a2bda61cf565686d39521c3c58cd2f"
                alt="">
        </li>
        <li>
            <img src="https://img0.baidu.com/it/u=1684532727,1424929765&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1681318800&t=50301360a9bd698d5f29da34ffb5cbb0"
                alt="">
        </li>
        <li>
            <img src="https://img1.baidu.com/it/u=4049022245,514596079&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1681318800&t=2b375ed6d93d638d1be405d04eb8c7f2"
                alt="">
        </li>
    </ul>
    <script>
        var len = 0;
        document.getElementsByTagName("li")[0].style.display = "block";
        setInterval(function () {
            if (len < document.getElementsByTagName("li").length - 1) {
                len++;
            }
            else {
                len = 0;
            }
            for (var i = 0; i < document.getElementsByTagName("li").length; i++) {
                document.getElementsByTagName("li")[i].style.display = "none";
            }
            document.getElementsByTagName("li")[len].style.display = "block";
        }, 1000)

    </script>
</body>

</html>

2.div调用js函数

1js代码如下：

 var arr = ["../img/tuijian.png", "../img/lbt2.jpg", "../img/lbt3.jpg"]
        var num = 0;
        setInterval(function () {
            num++;
            if (num == 3) {
                num = 0;
            }
            document.getElementById("tupian").src = arr[num];
        }, 3000)

调用很简单，只需要一个值即可`document.getElementById (“tupian”)
2.html代码如下：

<div class="lbt" onclick="">
        <ul>
            <li><img id="tupian" src="../img/tuijian.png" alt=""></li>
        </ul>
    </div>

html里面也需要<img id=“tupian” src=“…/img/tuijian.png”
3.css部分如下：

.lbt {
    width: 100%;
    height: 420px;
    >ul{
        list-style: none;
        >li{
            >img{
                width: 100%;
            }
        }
    }
}