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. android怎么连接sqlite数据库？

    SQLite数据库首先先建立SQLiteOpenHelper()的子类实现SQLiteOpenHelper中的OnCreate()方法和构造方法. this class takes care of o ...

  2. NSThread基础使用

    1.创建和启动线程   一个NSThread对象就代表一条线程;   创建,启动线程 NSThread *thread = [[NSThread alloc] initWithTarget:self ...

  3. Andorid 内存溢出与内存泄露，几种常见导致内存泄露的写法

    内存泄露,大部分是因为程序的逻辑不严谨,但是又可以跑通顺,然后导致的,内存溢出不会报错,如果不看日志信息是并不知道有泄露的.但是如果一直泄露,然后最终导致的内存溢出,仍然会使程序挂掉.内存溢出大部分是 ...

  4. MSDE简介

    MSDE的全程是Microsoft SQL Server Desktop Engine,它是一个基于 SQL Server 核心技术构建的数据引擎.MSDE 2000 支持单处理器和双处理器,是面向小 ...

  5. mybatis的#{}和${}的区别以及order by注入问题

    前言略,直奔主题.. #{}相当于jdbc中的preparedstatement ${}是输出变量的值 你可能说不明所以,不要紧我们看2段代码: String sql = "select * ...

  6. lvs realserver 配置VIP

    # $# 表示提供到shell脚本或者函数的参数总数: # 1表示只有一个参数. #/bin/bash #file: tun_RS.sh if [ $# -ne 1 ]; then echo “usa ...

  7. SQL TUNNING

    In a Nested Loops Join, for example, the first accessed table is called the outer table and the seco ...

  8. Hog SVM 车辆 行人检测

    HOG SVM 车辆检测 近期需要对卡口车辆的车脸进行检测,首先选用一个常规的检测方法即是hog特征与SVM,Hog特征是由dalal在2005年提出的用于道路中行人检测的方法,并且取的了不错的识别效 ...

  9. HDU 5044 Tree --树链剖分

    题意:给一棵树,两种操作: ADD1: 给u-v路径上所有点加上值k, ADD2:给u-v路径上所有边加上k,初始值都为0,问最后每个点和每条边的值,输出. 解法:树链剖分可做,剖出来如果直接用线段树 ...

  10. HDU 5057 Argestes and Sequence --树状数组(卡内存)

    题意:给n个数字,每次两种操作: 1.修改第x个数字为y. 2.查询[L,R]区间内第D位为P的数有多少个. 解法:这题当时被卡内存了,后来看了下别人代码发现可以用unsigned short神奇卡过 ...