JS中的函数

最新推荐文章于 2023-02-02 08:45:17 发布
最新推荐文章于 2023-02-02 08:45:17 发布
阅读量240 收藏
点赞数
文章标签： 前端 javascript html css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52484792/article/details/124869748
版权

函数

1.函数实际上就是可以作为一个逻辑单元对待的代码块

2.作用：使代码更加简洁，提高重用性

3.地位：每一个项目中的代码，大约95%在函数里

4.函数的定义（重点）

function 函数名（[x,y,z]）{return  表达式}

函数名：在同一个页面中函数名必须唯一，参数部分选填，参数用逗号隔开，最多可以添加255个，return选填

关于return    

没有return  函数只代表一些列的逻辑运算

有return的  函数返回一个特定值，此时函数可以作为一个值参与到运算中

return后则结束函数

5.函数的调用（重点） ：函数定义后不会自动执行，需要在特定的位置调用

6.函数的参数

实参：在调用函数时小括号里的内容

形参：形式参数，就是函数名后小括号里的内容

传参：将实参传递给形参，用形参表示实参

agruments：函数的参数就是作为一个数组返回的

练习

函数实现小球变色移动

代码如下所示：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=/, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes roll {
            from {
                transform: rotate(0);
                filter: hue-rotate(0deg);
            }
            to {
                transform: rotate(360deg);
                filter: hue-rotate(360deg);
            }
        }
        
        * {
            margin: 0;
            padding: 0;
        }
        
        .wrap {
            width: 100vw;
            height: 100vh;
            position: relative;
            overflow: hidden;
            background-color: #111;
        }
        
        .ball {
            width: 40px;
            height: 40px;
            /* background-color: pink; */
            border-radius: 50%;
            position: absolute;
            top: 130px;
            left: 0;
            animation: roll 2s linear infinite;
        }
        
        .ball div {
            width: 96%;
            height: 96%;
            background-color: #111;
            border-radius: 50%;
            filter: blur(5px);
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="ball">
            <div></div>
        </div>
        <div class="ball">
            <div></div>
        </div>
        <div class="ball">
            <div></div>
        </div>
        <div class="ball">
            <div></div>
        </div>
        <div class="ball">
            <div></div>
        </div>
        <div class="ball">
            <div></div>
        </div>
        <div class="ball">
            <div></div>
        </div>
        <div class="ball">
            <div></div>
        </div>
        <div class="ball">
            <div></div>
        </div>
        <div class="ball">
            <div></div>
        </div>
        <div class="ball">
            <div></div>
        </div>
        <div class="ball">
            <div></div>
        </div>
        <div class="ball">
            <div></div>
        </div>
        <div class="ball">
            <div></div>
        </div>
        <div class="ball">
            <div></div>
        </div>
        <div class="ball">
            <div></div>
        </div>
        <div class="ball">
            <div></div>
        </div>
        <div class="ball">
            <div></div>
        </div>
        <div class="ball">
            <div></div>
        </div>
        <div class="ball">
            <div></div>
        </div>
    </div>

</body>
<script>
    var dBalls = document.querySelectorAll('.ball');
    var timer = null;
    // 获取浏览器窗口的宽度和高度
    var sw = window.innerWidth;
    var sh = window.innerHeight;


    var vx = 0;
    var vy = 0;


    // 自执行函数
    (function() {
        for (var i = 0; i < dBalls.length; i++) {
            var ball = dBalls[i];
            // 为小球添加随机速度 
            ball.vx = Math.random() > 0.5 ? rand(1, 3) : -rand(1, 3);
            ball.vy = Math.random() > 0.5 ? rand(1, 3) : -rand(1, 3);
            // 设置随机起点
            ball.style.left = rand(0, sw - ball.offsetWidth) + 'px';
            ball.style.top = rand(0, sh - ball.offsetHeight) + 'px';
            // 随机大小
            var w = rand(60, 100);

            ball.style.width = w + 'px';
            ball.style.height = w + 'px';
            // 设置随机颜色

            ball.style.backgroundColor = randColor();
        }

    })()

    // 小球移动
    function move(dBall) {
        // 每一次时间间隔，让dBall进行一次单位移动
        // dBall的新位置 = dBall的当前位置 + 速度
        // offsetLeft 距离定位父级的左侧偏移量（只读）
        // offsetTop 距离定位父级的顶部偏移量（只读）

        // 边界处理
        var l = dBall.offsetLeft + dBall.vx;
        var t = dBall.offsetTop + dBall.vy;
        // 边界处理
        if (l > sw - dBall.offsetWidth) {
            l = sw - dBall.offsetWidth;
            dBall.vx = -dBall.vx;
        } else if (l < 0) {
            l = 0;
            dBall.vx = -dBall.vx;
        }
        if (t > sh - dBall.offsetHeight) {
            t = sh - dBall.offsetHeight;
            dBall.vy = -dBall.vy;
        } else if (t < 0) {
            t = 0;
            dBall.vy = -dBall.vy;
        }

        dBall.style.left = l + 'px';
        dBall.style.top = t + 'px';
    }


    //开启定时器
    timer = setInterval(function() {
        for (var i = 0; i < dBalls.length; i++) {
            var ball = dBalls[i];
            move(ball);
        }
    }, 30)

    function rand(min, max) {
        return Math.round(Math.random() * (max - min) + min);
    }

    function randColor() {
        return `rgb(${rand(0,255)},${rand(0,255)},${rand(0,255)})`;
    }

    // function colorRotate() {
    //     return randColor().rotate(360 + 'deg');
    // }
</script>

</html>

小选有在认真学前端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js函数调用时括号分析
weixin_44164982的博客
08-14 906
1.函数调用时多个括号情况分析 2.JavaScript 函数调用时带括号和不带括号的区别
javascript中函数和方法的区别
01-08
对于 js 来说，函数就是把任意一段代码放在一个 盒子 里面 在我想要让这段代码执行的时候，直接执行这个 盒子 里面的代码就行 javascript权威指南解释： 函数（function）: 函数是带有名称（na
javascript 匿名函数的理解，js括号中括function 如(function(){})
chimeiyan8610的博客
03-21 177
代码如下: (function(){ //这里忽略jQuery所有实现 })(); (function(){ //这里忽略jQuery所有实现 })(); 与 +function(){ //这里忽略jQuery所有实现 }(); 一样 　　半年前初次接触jQuery的时...
js中括号“()“的使用和函数的一些使用方式
ruancexiaoming的博客
08-07 3721
四种用法提高优先级函数的定义立即执行函数表达式执行单个或多个表达式并返回最后一个表达式的值条件表达式函数的四种调用方法 提高优先级 例如：(1+2)*3 函数的定义 例如：function(形参列表){} 立即执行函数表达式 例如：(function fun(a,b){})(1,2) 常用的匿名函数 1)可以使用多种运算符开头但一般用！ ！function(形参列表){}(实参列表) 2)使用()将函数及函数后的括号包裹 (function(){}()); 执行单个或多个表达式并返回最后一个表达式的值 例如
关于JS 函数 的 " 括号 "
lzgy的博客
11-07 928
函数后有无括号 通俗点说 : 1, 有括号, 函数会立即执行, 然后返回结果; 2, 无括号, 会将函数 作为"对象"赋值给你的变量 . 写个简单的小例子: //结果: function test() { return 11; } var a = test; var b = test(); console.l...
JS中的大括号用法
tk_zhang的专栏
08-17 332
从 JavaScript 1.2 开始，您可以用对象初始化程序创建对象，另外，您可以首先创建一个构造函数并用 new 运算符来创建该对象的实例。使用对象初始化程序　　除了用构造函数来创建对象，您可以用对象初始化程序创建对象，对象初始化程序（Object initializer）技术是从 C++ 中引用来的，它的用法如下：objectName = {property1:value1, propert...
javascript中函数的写法实例代码详解
10-17
主要介绍了javascript中函数的写法 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Javascript中的数学函数
10-30
Javascript中的数学函数
JavaScript中的Function函数
10-23
JavaScript中的Function函数是编程语言的核心组成部分，用于封装可重复使用的代码段。JavaScript的函数具有多种用途，包括事件驱动、作为类构造器、闭包以及在DOM操作中的选择器功能。以下将详细介绍JavaScript中的...
JavaScript中的函数嵌套使用
10-24
例如，在`hypotenuse`函数中定义了`square`函数，`square`函数仅在`hypotenuse`的范围内可见，外部无法直接访问。这种方式创建的内部函数被称为闭包，它们可以访问并操作外部函数的作用域，但外部函数无法直接修改...
js中function(){}中小括号中的内容到底是什么
zwy122的博客
10-12 7733
var btn1=document.getElementById("btn1"); btn1.onclick=function(a){ alert(a); }      头一次注意到原生js中后面括号中的内容容易搞混，其实内容和可以传一个变量，而同时也是一个事件对象，所以上面的一个测试代码会在点击事件触发后弹出[object MouseEvent]这个事件对象的名称。
js中关于函数的理解
qq_52479463的博客
02-02 320
本文书写了一下我理解的js的函数一些知识点，如有错误，还请见谅
‘，’之后要留空格，如 Function(x, y, z)
dengjuanshou7445的博客
08-03 178
‘，’之后要留空格，如 Function(x, y, z)。如果‘;’不是一行的结束 符号，其后要留空格，如 for (initialization; condition; update)。 1 #include <iostream> 2 3 /* run this program using the console pauser or add you...
JS中函数传参是按值传递的(详解)
weixin_60285052的博客
03-17 561
函数传参 实参有两种类型 一种原始数据类型 一种复杂数据类型即对象 1.原始数据类型传参时 传递的是原始数据的真实值 即内存栈中的真实值 复制一份 传给形参 2.对象作为实参传给形参时 传递的是对象引用的副本 首先我们需要知道 对象是种复杂数据类型 也叫引用数据类型 它存储在内存堆里 当我们创建一个对象时 内存堆里会存储对象 此外 在内存栈中 会存储一份该对象在内存堆中地址 举个例子： let obj1=new object();//当我们写在这一段代码时 在内存堆中 会进行两步操作：...
JavaScript基础之方法 形参以及arguments属性
u011863822的博客
10-31 2218
方法的定义很常见，由两种一个是常规写法，还有要给是函数表达式。 function test(){ #执行程序 } #函数表达式 var test1=function(){ #执行程序 } 形参 JavaScript方法自然也可以进行参数，也就是在方法中先来一个形参进行占位。 function test(a,b){ # 执行程序 } js中形参，不像是java中那样形参中直接定义其必须传输的数据类型。 test(1,2) test("a","b") 调用都可以运行，甚
JS函数的参数
Sea_water778的博客
10-04 481
1.1形参和实参 在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用函数时，同样也需要传递相应的参数，这些参数被称为实参。 参数 说明 形参 形式上的参数 函数定义的时候 传递的参数 当前并不知道是什么 实参 实际上的参数 函数调用的时候传递的参数 实参是传递给形参的 参数的作用；在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去 代码 1.我们可以利用函数的参数实现函数重复不同的代码 function 函数名(形参1，形参2
javaScript中函数是什么？
weixin_46593168的博客
07-05 392
函数：存放一段可执行代码的盒子。 函数调用后如果没有返回值，返回值默认为undefined 函数的分类： 无参无返回值 //求1~20的和 function fn() { var sum = 0; for (var i = 1; i <= 20; i++) { sum += i; } console.log(sum); } fn() 无参有返回值 var a = 1
JavaScript函数
weixin_55017780的博客
08-26 415
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 函数的定义： JavaScript函数是包裹在花括号中的代码块，花括号前面加了关键词function，当我们调用该函数时就会执行代码。 如图所示 注意！对于JavaScript来说，对于大小写非常的敏感，所以我们的关键词function必须要小写，并且必须以与函数名称相同的大小写来调用函数。 实例 通过手动点击按钮来调动函数 实现效果如下 带参数的函数 带参数的意义就是函数可以发送任意多的参数，参数由“，...
Javascript函数形参与实参
热门推荐
liu_shi_jun的专栏
07-20 1万+
形参，是在定义函数时使用的参数，目的是用来接收调用该函数时传进来的实际参数。 实参：是在调用时传递给函数的参数 例如function myfun(a,b,c){ ... } myfun(1,2,3);这里a,b,c就是形参。1,2,3为实参。 形参和实参是不同的变量，他们在内存中处于不同的位置，形参在函数运行结束时将被释放。主要有两点需要注意的1 . 如果实参是引用类型（objec
js中 函数有哪些方法
最新发布
07-25
在 JavaScript 中，函数是一种特殊的对象，因此它们也可以拥有一些方法。以下是一些常用的函数方法： 1. call(thisArg, arg1, arg2, ...): 调用函数，并指定函数内部的 this 值为 thisArg。后续参数为传递给函数的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值