Web API 实用案例

最新推荐文章于 2024-09-29 14:01:54 发布

WangZhang_521

最新推荐文章于 2024-09-29 14:01:54 发布

阅读量2.4k

点赞数

分类专栏： Web API 文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/WangZhang_521/article/details/123552231

版权

本文详细探讨了JavaScript中的Web API应用，从window对象到setTimeout()定时器，再到广告自动消失的实现，深入讲解js执行机制、location对象的用法，如5秒后跳转页面、search参数和hash处理，以及history对象在轮播图和页面刷新中的应用。此外，还介绍了本地存储的使用和自定义属性的设定，为前端开发者提供了实用案例。

摘要由CSDN通过智能技术生成

01-window对象

<!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>window对象</title>
    <style>
        div {
    
            height: 3000px;
        }
    </style>
</head>

<body>
    <div>

    </div>
    <script>
        //window可以省略
        window.document.querySelector('div');
        window.addEventListener('scroll', function() {
    
                // alert(1)
            })
            // window.alert(2);
        window.prompt;
        console.log(window);
    </script>
</body>

</html>

02-延迟函数setTimeout()定时器

<!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>延迟函数setTimeout()定时器</title>
</head>

<body>
    <button>解除定时器</button>
    <script>
        let btn = document.querySelector('button');
        let timer = setTimeout(function() {
    
                console.log(111);
            }, 3000)
            //仅仅执行一次
        btn.addEventListener('click', function() {
    
            clearTimeout(timer)
        })
    </script>
</body>

</html>

03-自动消失的广告案例

<!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>
        img {
    
            position: absolute;
            left: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <img src="images/ad.png" alt="">
    <script>
        let img = document.querySelector('img');
        setTimeout(function() {
    
            img.style.display = 'none';
        }, 5000)
    </script>
</body>

</html>

效果展示

在这里插入图片描述

04-递归函数

<!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>
</head>

<body>
    <script>
        // 递归函数：自己调用自己就是递归函数
        // 递归函数容易造成死递归，需要加个退出的条件
        let num = 0;

        function fn() {
    
            num++;
            console.log(11);;
            //在函数里面，自己调用自己
            if (num >= 100) {
    
                return;
            }
            fn()
        }
        fn();
    </script>
</body>

</html>

05-利用递归实现setInterval

<!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>
</head>

<body>
    <div></div>
    <script

最低0.47元/天解锁文章