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. nyoj 712 探 寻 宝 藏--最小费用最大流

    问题 D: 探 寻 宝 藏 时间限制: 1 Sec  内存限制: 128 MB 题目描述 传说HMH大沙漠中有一个M*N迷宫,里面藏有许多宝物.某天,Dr.Kong找到了迷宫的地图,他发现迷宫内处处有 ...

  2. .net framework 4.6.2 下载

    .net framework   .net framework版本: 4.6.2 File Name: NDP462-KB3151800-x86-x64-AllOS-ENU.exe 发布日期: 201 ...

  3. uva 572 oil deposits——yhx

    Oil Deposits  The GeoSurvComp geologic survey company is responsible for detecting underground oil d ...

  4. 作为一个测试leader平时应该注意哪些方面

    平时对管理方面很少有总结,总觉得管理是一门艺术,一门需要意会的艺术,虽然目前在做测试leader,平时也看些管理方面的书,但实际中总感觉理解的不够透彻,在工作上实施的话会有各种各样的情况,想要做好管理 ...

  5. UESTC 876 爱管闲事 --DP

    题意:即求给定n个数字(a1,a2,……an),不改变序列,分成M份,使每一份和的乘积最大. 思路:dp[i][j]表示把前i个数字,分成j份所能得到的最大乘积. 转移方程:dp[i][j] = ma ...

  6. HDU 4460 Friend Chains --BFS

    题意:问给定的一张图中,相距最远的两个点的距离为多少.解法:跟求树的直径差不多,从1 开始bfs,得到一个最远的点,然后再从该点bfs一遍,得到的最长距离即为答案. 代码: #include < ...

  7. AC日记——手写堆ac合并果子（傻子）

    今天整理最近的考试题 发现一个东西叫做优先队列 priority_queue(说白了就是大根堆) 但是 我对堆的了解还是很少的 所以 我决定手写一个堆 于是我写了一个简单的堆 手写的堆说白了就是个二叉 ...

  8. [本人开发的游戏] Discuz网页动物园插件1.0Beta发布！让积分流动起来！

        插件发布 插件名称: DZ网页动物园插件 插件来源: 原创插件 适用版本: Discuz! X3 语言编码: GBK简体 UTF8简体 BIG5繁体 UTF8繁体  最后更新时间: 2014- ...

  9. Android Studio 三种添加插件的方式，androidstudio

    前几篇blog我们介绍了如何安装和配置Android Studio,这篇Blog我们来聊聊如何给Android Studio添加插件,添加插件的路径有三种,我把他们分类如下: 点击设置小按钮 点击［P ...

  10. js常见执行方法$(document).load(),$(document).ready()

    $(document).load(); 当web页面以及其附带的资源文件,如CSS,Scripts,图片等,加载完毕后执行此方法.常用于检测页面(及其附带资源)是否加载完毕. $(document). ...