码迷,mamicode.com
首页 > Web开发 > 详细

【JS学习】定时器

时间:2017-01-27 15:05:05      阅读:304      评论:0      收藏:0      [点我收藏+]

标签:onclick   cti   doc   /var   font   停止   elements   鼠标   img   

一、定时器的作用

(1)开启定时器

  setInterval 间隔型

  setTimeout 延时型

两种定时器的区别

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定时器</title>
<script>
function show()
{
    alert(‘a‘);
    };
//setInterval(show,1000);//每隔1000毫秒执行一次show函数
setTimeout(show,1000);//延迟1000毫秒之后执行show函数
</script>

</head>

<body>
</body>
</html>

 

(2)停止定时器

  clearInterval

  clearTimeout

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>

二、数码时钟

(1)效果思路

(2)获取系统时间

  Data对象

  gerHours、GetMinutes、getSeconds

(3)显示系统时间

  字符串连接

  空位补零

(4)设置图片路径

charAt方法

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>数码时钟(兼容模式)</title>
<script>
//但是不兼容IE7
function toDou(n)
{
    if(n<10)
    {
        return ‘0‘+n;//第一位加上0,保证取出来的时间数字一直是2位数的字符串,比如01
        }
    else
    {
        return ‘‘+n;//为什么要加空字符串‘‘,是为了让返回的2位数字也是以字符串的形式返回的
        }
    };

window.onload = function ()
{
    var aImg=document.getElementsByTagName(‘img‘);
    //var str=‘013221‘;//这个时间是写死的
    //开启定时器,每过一秒钟更新一次图片
    function tick()
    {
        var oDate=new Date();
    
        var str=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
    
        for(var i=0;i<aImg.length;i++)
        {
            aImg[i].src=‘img/‘+str.charAt(i)+‘.png‘;//使用charAt(i)使各种浏览器保持兼容!
            }
    };
    setInterval(tick,1000);
    tick();//将tick()函数先在onload里面执行一遍,这样刚打开页面时不会有全是0的一瞬间延迟
    };
</script>
</head>

<body style="background:black; color:white; font-size:50px;">
<img src="img/0.png" />
<img src="img/0.png" />
:
<img src="img/0.png" />
<img src="img/0.png" />
:
<img src="img/0.png" />
<img src="img/0.png" />
</body>
</html>

三、Date对象的其他方法

年getFullYear

月getMonth()

日getDate()

星期getDay()

 

四、延时提示框

(1)效果演示

(2)原来的方法

移入显示,移出隐藏

(3)移出延时隐藏

移入下面的Div后,还是隐藏了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>延时提示框</title>
<style>
div{
    margin:10px;
    float:left;
    }
#div1{
    width:50px;
    height:50px;
    background:red;
    }
#div2{
    width:250px;
    height:180px;
    background:#CCC;
    display:none;
    }
</style>
<script>
window.onload = function ()
{
    var oDiv1=document.getElementById(‘div1‘);
    var oDiv2=document.getElementById(‘div2‘);
    var timer=null;
    
    oDiv1.onmouseover=function()
    {
        clearTimeout(timer);//如果不事先清除div2的timeout这个定时炸弹,当鼠标从div2移入div1时,div2会消失掉
        oDiv2.style.display=‘block‘;
        };
    oDiv1.onmouseout=function()
    {
        timer=setTimeout(function()
        {
        oDiv2.style.display=‘none‘;            
            },500);
        };
    //当鼠标移到Div2的时候,先把定时器关闭    
    oDiv2.onmouseover=function()
    {
        clearTimeout(timer);
        };
        
    oDiv2.onmouseout=function()
    {
        timer=setTimeout(function()
        {
        oDiv2.style.display=‘none‘;        
            },500);

        };
    };
    
</script>
</head>

<body>
<div id="div1">

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

</div>
</body>
</html>

 

(4)简化代码

合并两个相同的mouseover和mouseout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>延时提示框合并代码</title>
<style>
div{
    margin:10px;
    float:left;
    }
#div1{
    width:50px;
    height:50px;
    background:red;
    }
#div2{
    width:250px;
    height:180px;
    background:#CCC;
    display:none;
    }
</style>
<script>
window.onload = function ()
{
    var oDiv1=document.getElementById(‘div1‘);
    var oDiv2=document.getElementById(‘div2‘);
    var timer=null;
    
    oDiv2.onmouseover=oDiv1.onmouseover=function()
    {
        clearTimeout(timer);//如果不事先清除div2的timeout这个定时炸弹,当鼠标从div2移入div1时,div2会消失掉
        oDiv2.style.display=‘block‘;
        };
    oDiv2.onmouseout=oDiv1.onmouseout=function()
    {
        timer=setTimeout(function()
        {
        oDiv2.style.display=‘none‘;            
            },500);
        };
    };
    
</script>
</head>

<body>
<div id="div1">

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

</div>
</body>
</html>

 

【JS学习】定时器

标签:onclick   cti   doc   /var   font   停止   elements   鼠标   img   

原文地址:http://www.cnblogs.com/zhy2017/p/6353839.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!