setInterval和clearInterval应用小实例

最新推荐文章于 2021-08-24 10:50:16 发布

dewo6612

最新推荐文章于 2021-08-24 10:50:16 发布

阅读量134

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liufangdekele/p/6135622.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>水平动态伸缩</title>
    <link rel="stylesheet" href="水平动态伸缩.css">
    <script>
        window.οnlοad=function(){
            var aa=document.getElementsByTagName("a");
            for(var i=0;i<aa.length;i++){
                aa[i].οnmοuseοver=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].οnmοuseοut=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="#">首页</a></li>
    <li><a href="#">新闻</a></li>
    <li><a href="#">娱乐</a></li>
    <li><a href="#">体育</a></li>
    <li><a href="#">金融</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=attime;
        }
        setInterval(clock,100);
    </script>
</head>
<body>
<div class="time">
<form>
    <input type="text" id="clock" size="20"/>
</form>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/liufangdekele/p/6135622.html

dewo6612

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
setInterval和clearInterval应用小实例

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>水平动态伸缩</title> <link rel="stylesheet" href="水平动态伸缩.css"> <script> ...
复制链接

扫一扫