用js完成页面定时弹出广告

用js完成页面定时弹出广告
第一步:在页面指定位置隐藏一个广告图片(使用display属性的none值)
第二步:确定事件(onload)并为其绑定一个函数
第三步:书写这个函数(设置一个显示图片的定时操作)
第四步:书写定时器中的函数(获取图片的位置并设置属性style的display值为block)
第五步:清除显示图片的定时操作()
第六步:书写隐藏图片的定时操作
第七步:书写定时器中的函数(获取广告图片的位置属性style的display值none)
第八步:清除隐藏图片的定时操作()

需要用到的js事件
onload()此事件只能写一次并且放在body标签中。
setInterval(code(),毫秒时间);此事件设置循环事件
clearInterval(time);此事件清除循环事件;
实现代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用js实现图片定时弹出和定时消失</title>

</head>
<body onload="init()">
    <img src="D:/img/1.jpg" width="100%" height="100%" style="display:none" id="img1">
</body>
</html>
<script type="text/javascript">
    function init(){
        time = setInterval("clock()",3000);
    }

    function clock(){
        var img1 = document.getElementById('img1');
        img1.style.display="block";
        clearInterval(time);
       time = setInterval("clock1()",3000);
     }
     function clock1(){
         var img1 = document.getElementById('img1');
        img1.style.display="none";
         clearInterval(time);
     }

    </script>

结果:
在打开浏览器3秒后在指定位置弹出图片,显示图片3秒后会自定消失掉。
开始页面图片不显示
3秒后图片自动显示
等待3秒后会自动消失

猜你喜欢

转载自blog.csdn.net/qq_41485882/article/details/82493036