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中定时器的使用的更多相关文章

  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. powerdesigner设置表主键列为自动增长

    powerdesigner 版本12.5 创建表就不说了.下面开始介绍设置自动增长列. 1 在表视图的列上创建.双击表视图,打开table properties ———>columens ,双击 ...

  2. [转]Ionic – Mobile UI Framework for PhoneGap/Cordova Developers

    本文转自:http://devgirl.org/2014/01/20/ionic-mobile-ui-framework-for-phonegapcordova-developers/ Ionic i ...

  3. WEB安全--业务安全漏洞

    0x00 索引说明 在OWASP的分享,关于业务安全的漏洞检测模型. 0x01 身份认证安全 1 暴力破解 在没有验证码限制或者一次验证码可以多次使用的地方,使用已知用户对密码进行暴力破解或者用一个通 ...

  4. ZBrush中如何才能快速完成脸部雕刻（上）

    骨骼,是一门基础艺术,几百年来一直为伟大的艺术大师所研究,它曾经,也将一直是创作现实且可信角色的关键,提高骨骼知识更将大大提高雕刻技能. 查看更多内容请直接前往:http://www.zbrushcn ...

  5. 有向图的拓扑排序算法JAVA实现

    一,问题描述 给定一个有向图G=(V,E),将之进行拓扑排序,如果图有环,则提示异常. 要想实现图的算法,如拓扑排序.最短路径……并运行看输出结果,首先就得构造一个图.由于构造图的方式有很多种,这里假 ...

  6. Android网络之数据解析----使用Google Gson解析Json数据

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  7. mac和centos下git安装

    mac下面的git安装,这篇文章写的很详细了http://www.cnblogs.com/ccdev/archive/2012/09/12/2682098.html 谈谈centos下的安装.我用的是 ...

  8. <转>如何进行code review

    转自: http://pm.readthedocs.org/zh_CN/latest/codereview/howto.html 如何进行code review? code reivew是保障代码质量 ...

  9. getBoundingClientRect详解

    getBoundingClientRect获取的left和top始终是该元素相对于页面原点坐标的位置,当它大于原点坐标则为正数,等于原点坐标为零,小于为负数.

  10. [资料收集]MySQL在线DDL工具pt-online-schema-change

    MySQL在线DDL工具pt-online-schema-change pt-online-schema-change使用说明(未完待续) 官网