javascript基础（定时器1）

最新推荐文章于 2024-11-07 22:43:35 发布

-Y、

最新推荐文章于 2024-11-07 22:43:35 发布

阅读量126

点赞数

分类专栏： javascript 文章标签： javascript js html

本文链接：https://blog.csdn.net/weixin_44776706/article/details/105182263

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

=============================================================
开启定时器：

第一种是会一直执行
间隔型：setInterval(函数名,1000毫秒);
第二种是只执行一次
延时型：setTimeOut(函数名,1000毫秒);

关闭定时器

用一个变量 timer 接着 setInterval(函数名,1000毫秒); 的值，
然后再用 clearInterval（变量名timer）

如果是 setTimeOut(函数名,1000毫秒);
则用 clearTimeOut (变量名)

window.onload=function()
 {
         var Odiv=document.getElementById('div1');
         var Ostar=document.getElementById('star');
         var Oclose=document.getElementById('close');
      
      Ostar.onclick=function()
      {
   		timer=setInterval( function(){Odiv.style.display='none';} , 500 );
      }
      Oclose.onclick=function()
      {
         clearInterval(timer);
         Odiv.style.display='block';
      }
       
 }

==============================================================================

时钟程序

变量名=new Date 可以获取电脑日期数据
变量名.gerHours（）获取时位
变量名.getMinutes（）获取分位
变量名.getSeconds（）获取秒位
str [i]不能兼容IE7 ，可以改用str.charAt(i)全兼容

变量名.getFullYear（）获取年
变量名.getMonth（）+1 获取月
变量名.getDate（）获取日
变量名.getDay（）获取星期

  window.onload=function()
                {
                    function fenwei(n)
                    {
                        if(n<10)
                        {
                            return '0'+n
                        }
                        else
                        {
                            return ''+n
                        }
                    }
                    var Oimg=document.getElementsByTagName('img')
                     function clock()
                     {  
                               
                                var ddate=new Date;
                                var str=fenwei(ddate.getHours())+fenwei(ddate.getMinutes())+fenwei(ddate.getSeconds());
                                
                                for(var i=0;i<Oimg.length;i++)
                                {
                                        Oimg[i].src='images/'+str.charAt(i)兼容性更好+'.png';
                                }
                               

                     }
                     setInterval(clock,1000)
                     clock();
                               
                }

============================================================================
模拟头像显示信息
活用定时器实例：

效果图：
在这里插入图片描述

代码展示：

<style>
    div{
        float: left; margin-left: 10px;
    }
    #div1{
        width: 50px;height: 50px;background-color: aqua;
    }
    #div2{
        width: 200px;height: 200px;background-color: gray;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,10)
                Odiv2.style.display='block';
        }  
        Odiv1.onmouseout=function()
        {
                timer=setTimeout(function(){
                    Odiv2.style.display='none';
                },1000)
                
        }
        Odiv2.onmouseover=function()
        {       clearTimeout(timer,10)
                Odiv2.style.display='block';
        }  
        Odiv2.onmouseout=function()
        {        
            timer=setTimeout(function(){
                    Odiv2.style.display='none';
                },1000)
        }  
        
    }
</script>
<body>
        <div id="div1"></div>
        <div id="div2"></div>
</body>

用连等简化相似部分：

Odiv2.onmouseover=Odiv1.onmouseover=function()
        {   
                clearTimeout(timer,10)
                Odiv2.style.display='block';
        }  
Odiv2.onmouseout=Odiv1.onmouseout=function()
        {
                timer=setTimeout(function(){
                    Odiv2.style.display='none';
                },1000)
                
        }