函数简介、函数封装练习、匿名函数

函数简介

<script>
/*
把一段具有一定功能的代码封装，在使用的时候方便运行在代码上下文的各个地方

函数的分类
    自定义函数
        函数名,函数名区分大小写，函数的命名规则和变量的命名规则相同
        function 函数名(参数1,参数2...){
            函数中的操作代码
            return 返回值
        }
        函数在定义的时候，所有的参数都是形参
        在函数调用的时候，所有的参数都是实参
    库函数


当函数定义的时候，写在函数内部的代码不会立即执行，只有当函数调用的时候，函数中的代码才会执行
*/
// alert('函数');
// 执行函数，调用函数
// show();
// show();
// show();
// show();
let n=0;

function show(){
    n++;
    console.log('龙游浅水遭虾戏'+n);

}
// 有参数的函数
function sum(m,n){
    console.log(m+n);
}
sum(5,6);

sum('葡萄美酒','夜光杯');
/*
函数的返回值
return 关键字，用来返回一个值
1.返回值可以是任意类型
2.写在 return 后面的代码，不会被执行
3.如果一个函数没有return, 则默认返回值是 undefined
4.如果想要返回多个值，可以通过 返回数组或对象的形式返回数据
*/
// 没有参数，没有返回值
function abc(){
    console.log('画虎画皮难画骨');
    wp.style=`
        width:200px;
        height:200px;
        background:#04be02;
    `;
}
abc();
// 没有参数，有返回值
function run(){
    let m=10;
    let n=20;
    return m+n; // break
    console.log('你永远看不见我');
}
// 函数的返回值，最好赋值在一个变量上
let hh = run();
console.log(run(),hh);

// 函数可以返回任意类型的数据
// 有参数，有返回值
function anyFun(m,n,c){
    return[m,n,c]; // 返回一个数组
}
let arr=anyFun('程咬金','程咬银','程咬铜');
console.log(arr);

// 返回一个元素对象
function $(id){
    return document.getElementById(id);
}
$('wp').onclick=function(){
    alert('函数真好用')
}
function rand(m,n){
    return Math.floor(Math.random()*(n-m+1)+m);
}
let arr1=rand(30,60);
console.log(arr1);

// 没有返回值，返回的是underfined
function noReturn(){
    console.log('加油奥利给');
    return false;
}
let str=noReturn();
console.log( str );

// 返回多个值
function anyReturn(){
    let user='魏忠贤';
    let arr=['李莲英','郑和','王振','赵高'];
    let num=9000;
    return [user,arr,num];
}
console.log(anyReturn());
</script>

函数封装练习

<script>
    /*
    1.判断一个数是不是偶数
    2.生成一个随机颜色
    3.求任意一个数组中的最大数
    */
    function even(m) {
        if (m % 2 == 0) {
            console.log(m + '是偶数');
        } else {
            console.log(m + '不是偶数');
        }
    }
    let m1 = even(15);

    function col() {
        let r = Math.floor(Math.random() * 256);
        let g = Math.floor(Math.random() * 256);
        let b = Math.floor(Math.random() * 256);
        let col1 = `rgb(${r},${g},${b})`;
        return col1;
    };
    console.log(col()); 
    wp.style.background=col();

    function maxNumer(arr){
        // let max=arr[0];
        // for(i=0;i<arr.length;i++){
        //     if(arr[i]>max){
        //         max=arr[i];
        //     }
        // }
        // return console.log('最大数为'+max);

        return Math.max.apply(null,arr);
    }
    console.log(maxNumer([1,2,3,4]));
</script>

函数封装

<script>
/*
封装一个获取元素的函数，可以传入id、类名、元素名、根据传入不同的内容，返回不同的元素
传入id可以以 #开头  #wp
传入类名可以以 .开头  .abc
传入标签名 直接写标签名即可
*/
function $(ele){
    //如果传入的选择器不合法
    if(ele==''||ele==undefined|| typeof ele=="number"|| typeof ele=="object"){
        return;
    }
    // 获取传入选择器的首字符
    let first = ele.charAt();
    if(first=='#'){
        /*
        getElementByid 方法的参数不需要#,因此需要把#去掉
        */
        return document.getElementById(ele.slice(1));
    }else if(first=='.'){
        return document.getElementsByClassName(ele.slice(1));
    }else{
        return document.getElementsByTagName(ele);
    }
};
// $('#wp'); // id=wp的元素
// $('.wp'); 
// $('li');// 获取所有li标签

// $();
$('#wp').innerHTML='春有百花秋有月夏有凉风冬有雪';
console.log($('.abc')); 

console.log($('li')); 
let arr=$('li');
for(i=0;i<arr.length;i++){
    arr[i].innerHTML='便是人间好时节';
}
console.log($('')); 
</script>

匿名函数

<script>
/*
函数可以根据自身特点进行分类
1.具名函数: 具有名字的函数
2.匿名函数: 没有名字的函数
*/
// 在点击事件中使用匿名函数
$('#btn').onclick=function(){
    alert('宋江')
};
// 声明匿名函数
let show=function(){
    console.log('及时雨宋江');
};

// 调用匿名函数
show();
let aa = 20;
console.log( aa );

let timmer;
let num=10;
timmer=setInterval(function(){
    num--;
    $('#time').innerHTML=num;
    if(num<=0){
        clearInterval(timmer);
    }
},1000);
/* 
立即执行函数，使用匿名函数的原理
作用是使函数立即执行，并且创建一个单独的作用域，函数外面的变量不能污染函数内部变量，即是函数内部的变量不受外部影响
常用来开发插件
*/
(function(){
    console.log('李师师');
}) ();

(function(str){
    console.log('燕青'+str);
}) ('李师师');

let n=10;

(function(){
    n=2; // 没有声明变量的关键字,他就是一个全局变量
})();
console.log(n);
</script>