定时器 Date 无缝滚动_智能社无缝-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40512519/article/details/82349109

setInterval(functionName,milisec); setInterval(function,milisec);采用匿名内部类的方法。

setInterval()有返回值，返回的就是定时器。

打开和关闭定时器：

<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');
                },3000);
            }

            oBtn2.onclick=function(){
                clearInterval(timer);
            }
        }
    </script>
</head>
<body>
<input type="button" id="btn1" value="开启"/>
<input type="button" id="btn2" value="关闭"/>

</body>

数码时钟：

<script>
    //00：00：00 万一出现的是1，我们要在1的前面补0
    function toDou(){
        if(n<10){
            return '0'+n;
        }else{
            return ''+n;
        }
    }
    window.onload=function(){
        var aImg=document.getElementsByTagName('img');
        function tick(){
            var oDate=new Date();
            var str=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
            //alert(str);
            for(var i=0;aImg.length;i++){
                aImg[i].src='img/'+str[i]+'.png';
            }
        }

        setInterval(tick,1000);
        tick();//写这个的原因是图片上的数字不会都归零。如果不写，setInterval()设置的是每秒执行一次，间隔中会把数字变成0.
    }
</script>
<body>
<img src="" alt=""/>
<img src="" alt=""/>
：
<img src="" alt=""/>
<img src="" alt=""/>
：
<img src="" alt=""/>
<img src="" alt=""/>
</body>

Date获取时间。

上面的代码中，兼容性不好：使用charAt()

str[0],类似这样的只可以在高版本的浏览器中正常显示。解决：

 var str='asdfg';
    alert(str[0]);
    alert(str.charAt(0));//获取字符串上某一位的值。

Date:

 <script>
        var oDate=new Date();
        alert(oDate.getFullYear());
        alert(oDate.getMonth()+1);//从0开始。
        alert(oDate.getDate());//几号
        alert(oDate.getDay());//星期 0代表周日
        
    </script>

延时提示框：

<style>
        div{
            float: left;
            margin: 10px;
        }
        #div1{
            width: 50px;
            height: 50px;
            background: red;
        }
        #div2{
            width: 250px;
            height: 250px;
            background: #cccccc;
            display: none;

        }
    </style>
    <script>
        window.onload=function(){
            var div1=document.getElementById('div1');
            var div2=document.getElementById('div2');
            var timer=null;
            div1.onmouseover=function(){
                clearTimeout(timer)
                div2.style.display='block';
            }
            div1.onmouseout=function(){
                timer=setInterval(function(){
                    div2.style.display='none';
                },500);

            }
            div2.onmouseover=function(){
                clearInterval(timer);
            }

            div2.onmouseout=function(){
               timer= setTimeout(function(){
                    div2.style.display='none';
                },500);
            }
        }
    </script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>

简化代码：

 <style>
        div{
            float: left;
            margin: 10px;
        }
        #div1{
            width: 50px;
            height: 50px;
            background: red;
        }
        #div2{
            width: 250px;
            height: 250px;
            background: #cccccc;
            display: none;

        }
    </style>
    <script>
        window.onload=function(){
            var div1=document.getElementById('div1');
            var div2=document.getElementById('div2');
            var timer=null;
            div2.onmouseover=div1.onmouseover=function(){
                clearTimeout(timer)
                div2.style.display='block';
            }
            div2.onmouseout=div1.onmouseout=function(){
                timer=setInterval(function(){
                    div2.style.display='none';
                },500);

            }


        }
    </script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>

无缝滚动

offsetLeft/offsetTop offsetWidth/offsetHeight

offsetLeft:元素的左边距。可以综合考虑所有的因素之后的左边距，最终的结论。

实现无缝滚动：

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        #div1{
            width: 712px;
            height: 108px;
            margin: 100px auto;
            position: relative;
            background-color: red;
            overflow: auto;
        }
        #div1 ul{
            position: absolute;
            left: 0;
            top: 0;
        }
        #div1 ul li{
            float: left;
            width: 178px;
            height: 108px;
            list-style: none;

        }
    </style>
    <script>
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            var oUl=oDiv.getElementsByTagName('ul')[0];
            var aLi=oUl.getElementsByTagName('li');
            oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
            oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';

            setInterval(function(){
                /*如果向左滚动*/
                if(oUl.offsetLeft<-oUl.offsetWidth/2){
                    oUl.style.left='0';
                }
                /*如果向右滚动*/
                if(oUl.offsetLeft>0){
                    oUl.style.left=-oUl.offsetWidth/2+"px";
                }
                oUl.style.left=oUl.offsetLeft+2-'px';
                /*向右滚动*/
                /*oUl.style.left=oUl.offsetLeft+2+'px';*/
            },30)
        }
    </script>
</head>
<body>
<div id="div1">
    <ul>
        <li><img src="img/picTwo.jpg" alt=""  style="width: 178px;height: 108px"/></li>
        <li><img src="img/picTwo.jpg" alt="" style="width: 178px;height: 108px"/></li>
        <li><img src="img/picTwo.jpg" alt="" style="width: 178px;height: 108px"/></li>
        <li><img src="img/picTwo.jpg" alt="" style="width: 178px;height: 108px"/></li>
    </ul>
</div>
</body>

鼠标移上去，停止滚动：

                var timer=setInterval(function(){
                /*如果向左滚动*/
                if(oUl.offsetLeft<-oUl.offsetWidth/2){
                    oUl.style.left='0';
                }
                /*如果向右滚动*/
                if(oUl.offsetLeft>0){
                    oUl.style.left=-oUl.offsetWidth/2+"px";
                }
                oUl.style.left=oUl.offsetLeft+2-'px';
                /*向右滚动*/
                /*oUl.style.left=oUl.offsetLeft+2+'px';*/
            },30);
            oDiv.onmouseover=function(){
                clearInterval(timer);
            }