javascript之定时器的使用

一：什么是定时器

（一）无限循环定时器

<script>

    window.onload = function(){

       function test(){

           alert("test")

       }

        // 无限循环的执行函数test,间隔时间为2秒

       setInterval(test,2000);

    }

</script>

（二）不循环执行定时器

<script>

    window.onload = function(){

       function test(){

           alert("test")

       }

        // 2秒后，执行test函数，只执行一次

        setTimeout(test,2000);

    }

</script>

（三）开关定时器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>定时器</title>

<script>

    window.onload = function(){

        var oBtn1 = document.getElementById("btn1");

        var oBtn2 = document.getElementById("btn2");

        // 控制匿名函数

        var timer = null;

        oBtn1.onclick = function(){

            timer = setInterval(function(){

                alert("haha");

            },3000)

        }

        oBtn2.onclick = function(){

            clearInterval(timer);

        }

    }

</script>

</head>

<body>

    <input type="button" id="btn1" value="开启">

    <input type="button" id="btn2" value="关闭">

</body>

</html>

数码时钟

# 自己思路的代码

<!DOCTYPE html>

<head>

<style>

body{

font-size: 150px;

background:gray;

}

img{

width: 100px;

height: 100px;

}

</style>

window.onload = function(){

var oData = new Date();

var h = oData.getHours().toString();

var m = oData.getMinutes().toString();

var s = oData.getSeconds().toString();

var oImg = document.getElementsByTagName("img")

function set(){

oImg[0].src = "pic/数字" + h[0] + ".png"

oImg[1].src = "pic/数字" + h[1] + ".png"

if(h.length==1){

oImg[0].src = "pic/数字0" + ".png"

oImg[1].src = "pic/数字" + h[0] + ".png"

}else{

}

oImg[0].src = "pic/数字" + h[0] + ".png"

oImg[1].src = "pic/数字" + h[1] + ".png"

if(m.length==1){

oImg[2].src = "pic/数字0" + ".png"

oImg[3].src = "pic/数字" + m[0] + ".png"

}else{

oImg[2].src = "pic/数字" + m[0] + ".png"

oImg[3].src = "pic/数字" + m[1] + ".png"

}

if(s.length==1){

oImg[4].src = "pic/数字0"+".png"

oImg[5].src = "pic/数字" + s[0]+".png"

}else{

oImg[4].src = "pic/数字" + s[0] + ".png"

oImg[5].src = "pic/数字" + s[1] + ".png"

}

set();

}

setInterval(window.onload,1000);

</script>

</head>

<body>

</body>

</html>

网上的做法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>数字时钟</title>

<style>

body{

    font-size: 150px;

    background:gray;

}

img{

    width: 100px;

    height: 100px;

}

</style>

<script>

    function toDoule(n){

        if(n<10){

            return "0" + n    # 字符串和数字相加，会先将数字变成字符串，然后进行拼接

        }else{

            return "" + n

        }

    }

    window.onload = function(){

        var oImg = document.getElementsByTagName("img");

        function clock (){

            var oData = new Date();

            var toStr = toDoule(oData.getHours()) + toDoule(oData.getMinutes()) + toDoule(oData.getSeconds());

            for(var i=0; i<oImg.length;i++){

                oImg[i].src = "pic/数字" + toStr[i] + ".png"

            }

        }

        setInterval(clock,1000);

        // 这里调用，是为了一秒钟的延迟

        clock();

    }

</script>

</head>

<body>

    <img src="" alt="">

    <img src="" alt="">

    :

    <img src="" alt="">

    <img src="" alt="">

    :

    <img src="" alt="">

    <img src="" alt="">

</body>

</html>

潜在问题：ie7不支持 str[0] 这种写法取字符串的元素，因此要改成 str.chaAt(0) 解决兼容性问题

其他关于 Data的知识点

<script>

        var oData = new Date();

        // 获取几号

        alert(oData.getDate());

        // 0代表周日，国外从周日开始算

        alert(oData.getDay());

        // 获取年份s

        alert(oData.getFullYear());

        // 月份从0开始

        alert(oData.getMonth()+1);

    </script>

延时消失的提示框案例

自己思路

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>延时提示框</title>

    <style>

        #div1{

            width: 200px;

            height: 200px;

            background-color: red;

        }

        #div2{

            width: 200px;

            height: 200px;

            background-color:greenyellow;

            display: none;

        }

    </style>

    <script>

        window.onload = function(){

            var oDiv1 = document.getElementById("div1")

            var oDiv2 = document.getElementById("div2")

            function tools(){

                oDiv2.style.display = "none";

            }

            oDiv1.onmouseover = function(){

                oDiv2.style.display = "block";

            }

            oDiv1.onmouseout = function(){

                setTimeout(tools,2000);

            }

        }

    </script>

</head>

<body>

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

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

</body>

</html>

网上做法：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>延时提示框</title>

    <style>

        #div1{

            width: 200px;

            height: 200px;

            background-color: red;

        }

        #div2{

            width: 200px;

            height: 200px;

            background-color:greenyellow;

            display: none;

        }

    </style>

    <script>

        window.onload = function(){

            var oDiv1 = document.getElementById("div1")

            var oDiv2 = document.getElementById("div2")

            // 用来存储定时器

            var timer = null;

            function tools(){

                oDiv2.style.display = "none";

            };

            oDiv1.onmouseover = function(){

                clearTimeout(timer);

                oDiv2.style.display = "block";

            };

            oDiv1.onmouseout = function(){

                // 如果要清除定时器，这里最好有一个变量接收定时器对象

                timer = setTimeout(tools,2000);

            };

            oDiv2.onmouseover = function(){

                // clearTimeout(tools)

                // 这里要清除的是定时器的对象，而不是函数

                clearTimeout(timer);

            };

            oDiv2.onmouseout = function(){

                timer = setTimeout(tools,500);

            }

        }

    </script>

</head>

<body>

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

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

</body>

</html>

无缝滚动案例

原理：修改left的值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>无缝滚动</title>

    <style>

        #div1{

            width: 200px;

            height: 200px;

            background-color: red;

            position: absolute;

            left: 0;

            top: 20px;

        }

    </style>

    <script>

        window.onload = function(){

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

            setInterval(function(){

                // offsetLeft不仅仅不考虑left,还考虑margin

                oDiv.style.left = oDiv.offsetLeft + 10 + "px";

            },200)

        }

    </script>

</head>

<body>

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

</body>

</html>

缺点是：会一直往右移动，不会再回来

一个方向循环滚动，鼠标悬停暂停滚动，移出继续滚动

缺点：只能往一个方向滚动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>div中图片问题</title>

    <style>

    #div1 {

        border: 1px solid red;

        width: 1400px;

        height: 200px;

        position: relative;

        left: 50px;
　　　　 overflow:hidden;  # 超出部分隐藏

    }

    #div1 li{

        float: left;

        list-style: none;

        width: 200px;

        height: 200px;

    }

    #div1 ul{

        margin: 0;

        height: 200px;

        padding: 0;

        position: absolute;

        left: 0;

        top: 0;

    }

    </style>

    <script>

    window.onload = function(){

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

        var oUl = document.getElementById("ul1");

        var aLi = oUl.getElementsByTagName("li");

        var timer = null;

        // 这里很亮点，直接拼接两份

        oUl.innerHTML = oUl.innerHTML + oUl.innerHTML

        oUl.style.width = aLi[0].offsetWidth * aLi.length + "px"

        timer = setInterval(function(){

            oUl.style.left = oUl.offsetLeft  -2 + "px";

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

                oUl.style.left = 0 + "px";

            }

        },30)

        // 鼠标悬停上去，停止滚动

        oDiv.onmousemove = function(){

            clearInterval(timer);

        }

        // 鼠标移开，又开始滑动

        oDiv.onmouseout = function(){

            timer = setInterval(function(){

            oUl.style.left = oUl.offsetLeft  -2 + "px";

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

                oUl.style.left = 0 + "px";

            }

        },30)

        }

    }

    </script>

</head>

<body>

        <div id="div1">

                <ul id="ul1">

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

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

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

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

                    <li><img src="pic/美女5.jpg" alt=""></li>

                    <li><img src="pic/美女6.jpg" alt=""></li>

                    <li><img src="pic/美女7.jpg" alt=""></li>

                </ul>

        </div>

        <a href="#">左</a>

        <a href="#">右</a>

</body>

</html>

无缝滚动，增加向左，向右按钮

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>div中图片问题</title>

    <style>

    #div1 {

        border: 1px solid red;

        width: 1400px;

        height: 200px;

        position: relative;

        left: 50px;

        /* 超出的隐藏 */

        overflow: hidden;

    }

    #div1 li{

        float: left;

        list-style: none;

        width: 200px;

        height: 200px;

    }

    #div1 ul{

        margin: 0;

        height: 200px;

        padding: 0;

        position: absolute;

        left: 0;

        top: 0;

    }

    </style>

    <script>

    window.onload = function(){

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

        var oUl = document.getElementById("ul1");

        var aLi = oUl.getElementsByTagName("li");

        var timer = null;

        var speed = 3;

        // 这里很亮点，直接拼接两份

        oUl.innerHTML = oUl.innerHTML + oUl.innerHTML

        oUl.style.width = aLi[0].offsetWidth * aLi.length + "px"

        var oArr = document.getElementsByTagName("a")

        timer = setInterval(function(){

            oUl.style.left = oUl.offsetLeft  + speed + "px";

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

                oUl.style.left = 0 + "px";

            }

            if(oUl.offsetLeft > 0){

                oUl.style.left = -oUl.offsetWidth/2 + "px";

            }

        },30)

        // 鼠标悬停上去，停止滚动

        oDiv.onmousemove = function(){

            clearInterval(timer);

        }

        // 鼠标移开，又开始滑动

        oDiv.onmouseout = function(){

            timer = setInterval(function(){

            oUl.style.left = oUl.offsetLeft  + speed + "px";

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

                oUl.style.left = 0 + "px";

            }

            if(oUl.offsetLeft > 0){

                oUl.style.left = -oUl.offsetWidth/2 + "px";

            }

        },30)

        }

        oArr[0].onclick = function(){

            speed = -3

        }

        oArr[1].onclick = function(){

            speed = 3

        }

    }

    </script>

</head>

<body>

        <div id="div1">

                <ul id="ul1">

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

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

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

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

                    <li><img src="pic/美女5.jpg" alt=""></li>

                    <li><img src="pic/美女6.jpg" alt=""></li>

                    <li><img src="pic/美女7.jpg" alt=""></li>

                </ul>

        </div>

        <a href="#">左</a>

        <a href="#">右</a>

</body>

</html>

# TODO

javascript之定时器的使用的更多相关文章

JavaScript中定时器的暂停和继续
对于JavaScript的定时器来说没有严格意义上的暂停和重启,只有清除停止,但是可以通过一些‘障眼法’实现 allChild[index].onclick = function(){//当点击目标且 ...
day27—JavaScript实现定时器及其应用案例
转行学开发,代码100天——2018-04-12 JavaScript中定时器有两种,分别是setInterval和setTimeout;其用法如下: 开启: setTimeout("fun ...
Javascript中定时器的使用方法
Javascript中定时器的使用方法 1.间隔定时器(每隔一段时间执行一次代码) 格式:setInterval(函数,时间) //时间单位是毫秒,每隔设置的时间执行函数里的内容一遍(一直执行) // ...
JavaScript中定时器
JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.它们向任务队列添加定时任务. setTimeout() ...
理解JavaScript的定时器与回调机制
定时器方法 JavaScript是单线程的.虽然HTML5已经开始支持异步js了. JavaScript的setTimeout与setInterval看起来就像已经是多线程的了.但实际上setTime ...
JavaScript基础 -- 定时器
js 定时器有以下两个方法: setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式.方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭. set ...
JavaScript的定时器是如何工作的
理解JavaScript定时器工作原理对于学习JavaScript非常重要.因为JavaScript是单线程运行的,定时器使用场合少,不是很直观.下面通过三个函数来学习JavaScript如何定义,操 ...
JavaScript 之定时器
JavaScript 里面有两个定时器:setTimeout() 和 setInterval() . 区别: setTimeout():相当于一个定时炸弹,隔一段时间执行,并且只会执行一次就不在执行了 ...
JavaScript clearInterval定时器失效原因
检查下是不是setInterval重复执行(两次以上 <div id="adUploadWindow" class="ea ...
【javascript】定时器组件
'use strict'; module.exports = function() { this.timer = {}; this.config = {}; // 初始化参数 this.init = ...

随机推荐

OpenStack 制作image，启动VM，无console log
OpenStack image 制作官方文档:https://docs.openstack.org/image-guide/create-images-manually.html 如果通过制作的镜像启 ...
使用多个fixture和fixture直接互相调用
使用多个fixture 如果用例需要用到多个fixture的返回数据,fixture也可以return一个元组.list或字典,然后从里面取出对应数据. # test_fixture4.py impo ...
深入浅出JavaScript(中文版)__莫里森初读笔记
创建变量,使用关键字var; 创建常量,使用关键字const; 大驼峰用于对象,小驼峰用于变量和函数. 在试图相加数字时意外做了字符串相连,是种常见的JavaScript错误.如果想做数字相加,请确定 ...
java：JavaScript2：（setTimeout定时器，history.go()前进/后退，navigator.userAgent判断浏览器，location.href，五种方法获取标签属性，setAttribute，innerHTML，三种方法获取form表单信息，JS表单验证，DOM对象，form表单操作）
1.open,setTimeout,setInterval,clearInterval,clearTimeout <!DOCTYPE> <html> <head> ...
TestNG学习笔记一
一. 介绍 TestNG是一个设计用来简化广泛的测试需求的测试框架,从单元测试(隔离测试一个类)到集成测试(测试由有多个类多个包甚至多个外部框架组成的整个系统,例如运用服务器). 编写一个测试的过程有 ...
LeetCode.944-删除列保证排序(Delete Columns to Make Sorted)
这是悦乐书的第362次更新,第389篇原创 01 看题和准备今天介绍的是LeetCode算法题中Easy级别的第224题(顺位题号是944).我们给出了一个N个小写字母串的数组A,它们的长度都相同. ...
2 Java中常见集合
1)说说常见的集合有哪些吧? 答:集合有两个基本接口:Collection 和 Map. Collection 接口的子接口有:List 接口.Set 接口和 Queue 接口: List 接口的实现 ...
【VS开发】【智能语音处理】MATLAB 与音频处理相关内容摘记
MATLAB 与音频处理相关内容摘记 MATLAB 与音频处理相关内容摘记 1 MATLAB 音频相关函数 1 MATLAB 处理音频信号的流程 2 音量标准化 2 声道分离合并与组合 3 数 ...
thread 多线程2
###24.04_多线程(多线程程序实现的方式1)(掌握) * 1.继承Thread * 定义类继承Thread * 重写run方法 * 把新线程要做的事写在run方法中 * 创建线程对象 * 开启新 ...
scrapy之360图片爬取
#今日目标 **scrapy之360图片爬取** 今天要爬取的是360美女图片,首先分析页面得知网页是动态加载,故需要先找到网页链接规律, 然后调用ImagesPipeline类实现图片爬取 *代码实 ...

javascript之定时器的使用

javascript之定时器的使用的更多相关文章

随机推荐

热门专题