JS（七）封闭函数和常用内置函数及js调试程序的方法

最新推荐文章于 2022-07-20 16:40:08 发布

码界索隆

最新推荐文章于 2022-07-20 16:40:08 发布

阅读量234

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/COOL66BOY/article/details/123388126

版权

文章目录

封闭函数
- 封闭函数的好处
常用内置对象
- 练习
- - 通过页面地址栏参数改变页面状态
  - 自定义随机数
js调试程序的方法

封闭函数

封闭函数是JavaScript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。

一般定义的函数和执行函数：

        function main(){
            alert('ok');
        }

        main();//弹出ok

封闭函数：

        (function main(){
            alert('ok');
        })();//弹出ok

还可以在函数定义前加上“ ~ ” 或 “ ！ ”等符号来定义匿名函数：

        ~function main(){
            alert('ok!')
        }();//弹出ok！

        !function main(){
            alert('hello!')
        }();//弹出hello!

封闭函数的好处

封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和数量，可以避免命名冲突，在页面上引入多个js文件时，用这种方法添加js文件比较安全。

注：在封闭函数前加一个分号可以避免js压缩时出错

常用内置对象

document
document.getElementById //通过id获取元素
document.getElementsByTagName //通过标签名获取元素
document.referrer //获取上一个跳转页面的地址（需要服务器环境）
location
window.location.href //获取或者重定url地址
window.location.search //获取地址参数部分
window.location.hash //获取页面锚点或这叫哈希值
Math
Math.random //获取0~1的随机数，不包括1；
Math.floor //向下取整
Math.ceil //|向上取整

练习

通过页面地址栏参数改变页面状态

待跳转页面html：

<!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>
    <script>
        window.onload = function(){
            var sBody = document.getElementsByTagName('body');
            var sData = window.location.search;
            var iNum = sData.split('=')[1];
            if(iNum == 1){
                sBody[0].style.backgroundColor = 'pink';
            }
            else if(iNum == 2){
                sBody[0].style.backgroundColor = 'gold';
            }
            else if(iNum == 3){
                sBody[0].style.backgroundColor = 'lightblue';
            }
        }
    </script>
</head>
<body>
    <h1>这是测试页面</h1>
</body>
</html>

效果图：
在这里插入图片描述

用来跳转页面html：

<!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>
    <script>
        // url='http://127.0.0.1:5500/js?aa=2'
        // alert(window.location.search);//弹出?aa=2
    </script>
</head>
<body>
    <a href="test2.html">这是链接测试页面的</a>
    <a href="test2.html?aa=1">这是链接测试页面粉色页的</a>
    <a href="test2.html?aa=2">这是链接测试页面金色的</a>
    <a href="test2.html?aa=3">这是链接测试页面亮蓝色页的</a>
</body>
</html>

效果图：
在这里插入图片描述

自定义随机数

<!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>
    <script>
        var iNum1 = 10;
        var iNum2 = 20;
        var iRandom_Num1 = 1;
        var iRandom_Num2 = 1;
        for(var i=0;i<20;i++){
            iRandom_Num1 = iNum1 * Math.random();
            console.log(Math.floor(iRandom_Num1));//0-10,不含十，要想含十可以后面加个1；
        }
        for(var i=0;i<20;i++){
            iRandom_Num2 = iNum2 * Math.random();
            console.log(Math.floor(iRandom_Num2));//0-20；
        }
    </script>
</head>
<body>
    
</body>
</html>

注：例子结果不含十或二十，原因是随机数不包括1，想要有10或20 出现，可以在出来的结果后面加上一个1

js调试程序的方法

alert():弹出时会卡住，不会执行之后的代码，在点击后才会向下执行。
console.log():可以在调试工具里的console页面看到结果，执行后不会阻止程序向下运行。
document.title= ‘值’:在页面标题上显示。

码界索隆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS（七）封闭函数和常用内置函数及js调试程序的方法

文章目录封闭函数封闭函数的好处常用内置对象练习通过页面地址栏参数改变页面状态自定义随机数js调试程序的方法封闭函数封闭函数是JavaScript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。一般定义的函数和执行函数： function main(){ alert('ok'); } main();//弹出ok封闭函数： (function main(){ a
复制链接

扫一扫