js中定时器的使用

时间：2022-09-10 20:17:17

1.setInterval

<!DOCTYPE html>

<html>

<head>

    <title>json</title>

<script type="text/javascript">

    function show(){

        alert("a");

    }

    //每隔1s执行一次函数

    setInterval(show, 1000);

</script>

</head>

<body>

</body>

</html>

2.setTimeout

<!DOCTYPE html>

<html>

<head>

    <title>json</title>

<script type="text/javascript">

    function show(){

        alert("a");

    }

    //1s之后执行该函数且只执行一次

    setTimeout(show, 1000);

</script>

</head>

<body>

</body>

</html>

2.clearInterval

<!DOCTYPE html>

<html>

<head>

    <title>json</title>

</head>

<body>

    <button type="button" id="open">开启</button>

    <button type="button" id="close">关闭</button>

    <script type="text/javascript">

    function show(){

        alert("a");

    }

    var oBtn1 = document.getElementById('open');

    var oBtn2 = document.getElementById('close');

    var timer = null;

    oBtn1.onclick=function (){

        timer = setInterval(show, 1000);

    }

    oBtn2.onclick = function (){

        clearInterval(timer);

    }

</script>

</body>

</html>

3.演示提示框的实现

<!DOCTYPE html>

<html>

<head>

    <title>json</title>

    <style type="text/css">

    #div1{

        width: 29px;

        height: 30px;

        background-color: red;

    }

    #div2{

        width: 100px;

        height: 100px;

        background-color: blue;

        margin-left: 50px;

        display: none;

    }

    </style>

</head>

<body>

    <div id="div1"></div>

    <div id="div2"></div>

    <script type="text/javascript">

        var oDiv1 = document.getElementById('div1');

        var oDiv2 = document.getElementById('div2');

        var timer = null;

        oDiv1.onmouseover = oDiv2.onmouseover =  function (){

            clearTimeout(timer);

            oDiv2.style.display = 'block';

        }

        oDiv1.onmouseout =  oDiv2.onmouseout =function (){

            timer = setTimeout(function(){

                oDiv2.style.display = 'none';

            }, 700);

        }

    </script>

</body>

</html>

4.无缝滚动

<!DOCTYPE html>

<html>

<head>

    <title>json</title>

    <style type="text/css">

    *{margin: 0;padding: 0}

    #div1{

        height: 108px;

        margin: 100px auto;

        /*相对定位的作用是为了让ul能够以包含它的div为参考标准*/

        position: relative;

        overflow: hidden; /*将多余的四张图片遮住*/

    }

    #div1 ul{

        position: absolute;

        left: 0px;

        top: 0px;

    }

    #div1 ul li{

        list-style: none;

        float: left;

        height: 108px;

        width: 178px;

    }

    </style>

</head>

<body>

    <div id="div1">

        <ul>

            <li><img src="img/1.jpg"  alt=""></li>

            <li><img src="img/2.jpg"  alt=""></li>

            <li><img src="img/3.jpg"  alt=""></li>

            <li><img src="img/4.jpg"  alt=""></li>

        </ul>

    </div>

    <script type="text/javascript">

    var oDiv = document.getElementById('div1');

    var oUl = oDiv.getElementsByTagName('ul')[0];

    //让4张图片变成8张图片

    oUl.innerHTML += oUl.innerHTML;

    // 给ul设置宽度以防止其父标签宽度太小将图片压下来

    oUl.style.width = oUl.offsetWidth + 'px';

    //div的宽度设置为ul的一般这样能实现滚动效果

    oDiv.style.width = oUl.offsetWidth/2 + 'px';

    setInterval(function(){

        if(oUl.offsetLeft < - oUl.offsetWidth/2)

            oUl.style.left = '0px';

        oUl.style.left = oUl.offsetLeft - 5 +'px';

    }, 50);

    </script>

</body>

</html>

js中定时器的使用

js中定时器的使用的更多相关文章

  1. 关于js中定时器的返回值问题

    在js中,我们常常会用到定时器来处理各种各样的问题,当我们需要清除定时器的时候,我们常常会定义一个值来接受定时器的返回值,然后再把定义好的这个值写到清除定时器的括弧后面,如: var times = ...

  2. js中定时器调用函数时为什么会有引号

    之前在学习的时候并没有发现的细节,关于js中,定时器的问题 这里我们写两个延时器 setTimeout(func, 0); setTimeout("func()", 0);定时器中 ...

  3. JS中定时器的返回数值ID值

    定时器会返回一个数字值id,可以由clearInterval(id)或clearTimeout(id)来实现对对应定时器的清除. setInterval()/setTimeout()BOM中的Wind ...

  4. js中定时器相关

    每三秒(3000 毫秒)弹出 "Hello" : setInterval(function(){ alert("Hello"); }, 3000); setIn ...

  5. js中定时器

    周期性定时器:周期性的执行某段代码 window.setInterval()      window.clearInterval() 示例: document.it = setInterval(fun ...

  6. js中定时器2

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. js中定时器使用方法经验总结

    前言,最近在做一个音频播放项目的时候,碰到播放时间精度的问题,捣鼓了几天,最终巧妙的运用定时器去降低了错误发生频率 正题,下面是对定时器的使用总结,如有错误之处,请读者加以纠正. 延迟执行(1次) s ...

  8. js中定时器之一

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. 关于js中两种定时器的设置及清除

    1.JS中的定时器有两种: window.setTimeout([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法 ...

随机推荐

  1. vue中，class、内联style绑定、computed属性

    1.绑定Class ①对象语法 <li :class="{ 'active': activeIdx==0 }" @click="fnClickTab(0)&quot ...

  2. 爬虫神器xpath的用法（一）

    1.如果你没有安装lxml,请运行pip install lxml或者easy_install lxml安装,如果在安装过程中失败的话, 是因为lxml需要依赖某些库文件,具体可以问下度娘,这里不再赘 ...

  3. SqlSever基础 substring 从指定位置开始，截取指定长度的字符串

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  4. 转&colon;PHP超时处理全面总结

    原文来自于:http://wulijun.github.io/2012/08/08/php-timeout-summary.html 概述 在PHP开发工作里非常多使用到超时处理的场合,我说几个场景: ...

  5. Windows下Vundle插件BundleSearch命令出现错误解决方案

    纯粹参考他人博文,已证明解决方案正确,转载时请注明参考链接!!! 参考链接: http://www.tuicool.com/articles/e2aiEn 在Windows下使用Vim时,用Vundl ...

  6. jsp中forward和redirect的区别（转）

    一.调用方式 我们知道,在servlet中调用转发.重定向的语句如下: request.getRequestDispatcher("new.jsp").forward(reques ...

  7. 关于hibernate的缓存使用（转）

    原文链接:http://blog.csdn.net/woshichenxu/article/details/586361#t0 1.     关于hibernate缓存的问题: 1.1.1.      ...

  8. java异常拾遗

    概述 当方法内部发生一项错误时,该方法会创建一个对象传递给运行时系统(runtime system),这个对象被称为异常对象,包含错误的类型.发生位置,程序状态等一系列信息. 当一个方法抛出异常时,运 ...

  9. SpringMVC中post请求参数注解&commat;requestBody使用问题

    一.httpClient发送Post 原文https://www.cnblogs.com/Vdiao/p/5339487.html public static String httpPostWithJ ...

  10. nodejs &plus; express &plus; express-session &plus; redis

    nodejs + express + express-session + redis 标题似乎又是不太对,大家领会精神哈 Express 安装express-generator,然后用它来创建一个工程 ...

相关文章