分别使用JQ和JS实现定时弹窗

来源：互联网发布：sql 时间戳转换成时间编辑：程序博客网时间：2024/05/21 16:21

使用JQ实现定时弹窗：
1、书写步骤：

第一步：引入jQuery相关的文件

第二步：书写页面加载函数

第三步：在页面加载函数中，获取显示广告图片的元素。

第四步：设置定时操作(显示广告图片的函数)

第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show())

第六步：清除显示广告图片的定时操作

第七步：设置定时操作(隐藏广告图片的函数)

第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide())

第九步：清除隐藏广告图片的定时操作

2、代码实现

<script type="text/javascript">    $(function(){        time = setInterval("showAd()" , 3000);    })    function showAd(){        $("#img1").fadeIn(3000);        //fadeIn是图片出现的效果 fadeIn为淡入淡出效果        clearInterval(time);        time = setInterval("showhideAd()",3000);    }    function showhideAd() {        $("#img1").slideUp(3000);        clearInterval(time);    }</script>

使用JS实现弹窗效果

1.实现步骤

第一步：在页面的指定位置，隐藏一个广告图片（使用display的none的属性）

第二步：确定事件（onload）并为其绑定一个函数

第三步：书写这个函数让其显示的定时操作

第四步：书写定时器中的函数（获取广告图片的位置并设置属性style的display值block）

第五步：清除显示图片的定时操作

第六步：书写隐藏图片的定时操作

第七步：书写定时器中的函数（获取广告图片的位置并设置属性style的display值none）

第八步：清除隐藏图片的定时操作

2.代码实现

//页面的指定位置，隐藏一个图片<body onload="init()">    <img src="#图片位置" width="100%" style="display: none" id="img2"></body><script type="text/javascript">    function init(){        time = setInterval("showAd()",3000);    }    function showAd() {        var adEle = document.getElementById("#img2");        adEle.style.display:"block";        clearInterval(time);        time = setInterval("hidden()",3000);    }    function hidden() {        var adEle = document.getElementById("#img2");        adEle.style.display:"none";        clearInterval(time);    }

不管是JS还是JQ实现弹窗广告，实现的步骤都差不多。JS是使用引入的方法进行弹窗的实现，而JQ是事先把图片隐藏在所要显示的位置上，通过改变display的属性，来实现弹窗。

阅读全文

0 0