首页 > 代码库 > setInterval和clearInterval应用小实例

setInterval和clearInterval应用小实例

2024-08-25 10:49:31   215人阅读

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>水平动态伸缩</title>
    <link rel="stylesheet" href="http://www.mamicode.com/水平动态伸缩.css">
    <script>
        window.onload=function(){
            var aa=document.getElementsByTagName("a");
            for(var i=0;i<aa.length;i++){
                aa[i].onmouseover=function() {
                    var This = this;
                    This.time = setInterval(function () {
                        This.style.width = This.offsetWidth + 8 + "px";
                        if (This.offsetWidth >= 160) {
                            clearInterval(This.time)
                        }
                    }, 30)
                }

                aa[i].onmouseout=function() {
                    var This = this;
                    This.time = setInterval(function () {
                        This.style.width = This.offsetWidth - 8 + "px";
                        if (This.offsetWidth <= 120) {
                            This.style.width = "120px";
                            clearInterval(This.time)
                        }
                    }, 30)
                }
            }
        }
    </script>
</head>
<body>
<ul>
    <li><a class="on" href="http://www.mamicode.com/#">首页</a></li>
    <li><a href="http://www.mamicode.com/#">新闻</a></li>
    <li><a href="http://www.mamicode.com/#">娱乐</a></li>
    <li><a href="http://www.mamicode.com/#">体育</a></li>
    <li><a href="http://www.mamicode.com/#">金融</a></li>
</ul>
</body>
</html>

定时器
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>定时器</title>
    <style>
        .time {
            padding:20px;
            background-color: lightcoral;
            border:3px solid #ff6600;
        }
    </style>
    <script type="text/javascript">
        var attime;
        function clock(){
            var time=new Date();
            attime = time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
            document.getElementById("clock").value=http://www.mamicode.com/attime;
        }
        setInterval(clock,100);
    </script>
</head>
<body>
<div class="time">
<form>
    <input type="text" id="clock" size="20"/>
</form>
</div>
</body>
</html>









setInterval和clearInterval应用小实例


联系
我们