JavaScript(定时器，悬浮广告)

Exclusive_Cat

于 2024-09-03 19:05:15 发布

阅读量231

点赞数 5

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2302_80464795/article/details/141868896

版权

以下代码是定时器的使用方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>
    请等待三秒钟
</h1>
<script>
    function test() {
        document.write("<h1>你又浪费了三秒钟</h1>")
    }
    //设置定时器，三秒钟后调用test方法
    var id=setTimeout("test()",3000);
    clearTimeout(id);
    //根据id关闭指定定时器
</script>

</body>
</html>

setTimeout方法：

用来设置定时器，括号里，逗号前面是要调用的方法，逗号后面则是需要等待的时间单位是ms，这个方法要定义一个变量来接收。

clearTimeout方法：

关闭这个定时器使得这个定时器失效，使得持续请等待三秒钟就不会跳转到下一个网页。

在三秒钟后出现以下网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>悬浮广告</title>
</head>
<body>

<div id="pic" style="width:200px ;position: absolute;top: 300px;left:500px" >
    <img style="width: 200px" src="fjbz.jpg">
</div>

<script>
    function move() {
        //根据id找到指定的元素对象
        var pic=document.getElementById("pic");
        var t=Math.random()*(1080-200)
        t=parseInt(t);
        var l=Math.random()*(1920-300)
        l=parseInt(l);
        pic.style.top=t+"px";
        pic.style.left=l+"px";
        setTimeout("move()",1000)

    }
    move()
</script>
</body>
</html>

首先使用div标签插入一张图片，再声明move方法来使图片移动，定义pic表量来找到这个图片对象再写一个随机数，这个随机数的区间要和你电脑显示器的分辨率相近否则会移动到屏幕的外面，然后进行类型转换，将浮点类型转换为整型，这就是长了，同理再声明一次这样的变量，来当宽的范围，pic.style.top/left来修改位置，之后设置定时器来进行函数的递归，但是这仅仅是函数的声明，并不能直接调用，所以我们要在声明的下面调用一下这个方法使其运行起来。

每过1秒这个图片就会随机移动位置。

这就是在各种网站上可以看到的移动广告，利用这种技术来吸引其他人点击，来提高流量。

Exclusive_Cat

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript(定时器，悬浮广告)

首先使用div标签插入一张图片，再声明move方法来使图片移动，定义pic表量来找到这个图片对象再写一个随机数，这个随机数的区间要和你电脑显示器的分辨率相近否则会移动到屏幕的外面，然后进行类型转换，将浮点类型转换为整型，这就是长了，同理再声明一次这样的变量，来当宽的范围，pic.style.top/left来修改位置，之后设置定时器来进行函数的递归，但是这仅仅是函数的声明，并不能直接调用，所以我们要在声明的下面调用一下这个方法使其运行起来。//设置定时器，三秒钟后调用test方法。在三秒钟后出现以下网页。
复制链接

扫一扫