Skip to content

定时器的使用.md

Latest commit

 

History

History
136 lines (125 loc) · 4.63 KB

定时器的使用.md

File metadata and controls

136 lines (125 loc) · 4.63 KB

定时器的使用

开启定时器

  • Ex.1 setInterval() 间隔型
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script>
    function show() {
        alert('a');
    }
    //每间隔1秒钟，弹出一个a
    setInterval(show,1000);
</script>
</head>
<body>

</body>
</html>
  • Ex.2 setTimeout() 延时型
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script>
    function show() {
        alert('a');
    }
    //只执行一次
    setTimeout(show,2000);
</script>
</head>
<body>

</body>
</html>

停止定时器

  • Ex.1 clearInterval(),clearTimeout()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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('a');
            },1000);
        };
        oBtn2.onclick=function () {
          clearInterval(timer);  
        };
    };
</script>
</head>
<body>
<input id="btn1" type="button" value="开启">
<input id="btn2" type="button" value="关闭">
</body>
</html>

实战

数码时钟

基础知识

构造获取系统时间对象：var oDate=new Date();
oDate.getFullYear();//获取系统的年份
oDate.getMonth()+1;//获取系统的月份，获取出来的月份比真实的少一个月，所以加一
oDate.getDate();//获取系统目前多少号
oDate.getDay();//获取系统目前星期几，这是按照美国人的写法，0代表星期日，1代表星期一，2代表星期二...
oDate.getHours();//获取系统的小时
oDate.getMinutes();//获取系统的分钟
oDate.getSeconds();//获取系统的秒钟

数码时钟最终效果图

  • 兼容性问题：str[i]在IE7及以下不兼容，str.charAt(i)是为了解决兼容性问题，实际上两者表达的意思一样的
  • 当使用高阶函数时（目前在JS中碰到的是函数作为参数时），都可以直接使用匿名函数来代替！！！
  • 加间隔定时器是为了不断的刷新，以免一直停顿，只有点击了刷新按钮，才刷新一次
  • 在里面加tick()函数的作用是解决，每次刷新从自己预先设置的时间(00:00:00)开始，给人感觉就很不爽
  • souce code

延时提示框

text 延时提示框效果图

  • 左边div1右边div2
  • 开始，div1显示，div2隐藏，鼠标从div1移入的时候,div2显示；鼠标从div1移出的时候，div2隐藏;
  • 当鼠标从div1移入的时候，接着移入到div2的时候，div2一直隐藏，直到鼠标移出div2
  • 接着上面的，鼠标移出div2的方式表现为移到div1的时候时，div2是显示的，这样鼠标从div1到div2来回运动的时候，两个div表现为一直显示！！！
  • Souce code

无缝滚动

text 无缝滚动效果图

  • 无缝左滚动 Souce Code
  • 无缝右滚动 Souce Code
  • 扩展：希望鼠标移入到里面的时候，停止滚动。鼠标移出的时候，继续滚动。 Souce Code

无缝滚动最终效果图 后期可以考虑把图像文件夹里的按钮给它换上

text 无缝滚动最终效果图

Souce Code