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. Linux系统升级更新openssh 7.3p1

    放在最前面:鉴于网上爬虫猖獗,博客被盗时有发生,这里需要来个链接,大家请认准来自博客园的Scoter:http://www.cnblogs.com/scoter2008,本文将持续更新 最近绿盟给扫描 ...

  2. 迅为iTOP-4412核心板调整电压

    本文转自:http://www.topeetboard.com iTOP-4412核心板使用的电源管理芯片是三星专门针对4412研发的S5M8767,8767提供9路BUCK和28路LDO输出,每路电 ...

  3. SSIS hang with unhandle exception

    如果你的packages在执行的过程中有没有被捕获到的异常,则sqldumper会跳出来获取这些异常信息输出,存在下面的目录中: C:\Program Files\Microsoft SQL Serv ...

  4. python中list注意事项

    今天写python出了一个小插曲,具体情况见代码: >>> a = [1,2,3] >>> import queue >>> q = queue. ...

  5. POJ 2263 Heavy Cargo 多种解法

    好题.这题可以有三种解法:1.Dijkstra   2.优先队列   3.并查集 我这里是优先队列的实现,以后有时间再用另两种方法做做..方法就是每次都选当前节点所连的权值最大的边,然后BFS搜索. ...

  6. 2016百度之星-初赛(Astar Round2A)AII X

    Problem Description F(x,m) 代表一个全是由数字x组成的m位数字.请计算,以下式子是否成立: F(x,m) mod k ≡ c Input 第一行一个整数T,表示T组数据. 每 ...

  7. 深入理解maven及应用--转

    (一):生命周期和插件 在项目里用了快一年的maven了,最近突然发现maven项目在eclipse中build时非常慢,因为经常用clean install命令来build项目,也没有管那么多,但最 ...

  8. HTML5 web workes实现多线程

    对多线程来说尽量使用HTML5的WEB WORKER特性 HTML5中的Web Worker是使用多个线程并发执行Javascript程序.另外,这种特别的多线程实现能减少困惑开发者多年的,在其他平台 ...

  9. KVM虚拟机CPU说明

    废话不多说了,下面对kvm虚拟机的CPU说明做一梳理:NUMA技术介绍NUMA是一种解决多CPU共同工作的技术方案,我们先回顾下多CPU共同工作的技术架构历史.多CPU共同工作主要有三种架构,分别是S ...

  10. javascript中的后退和刷新

    <input type=button value=刷新 onclick="window.location.reload()"><input type=button ...