JavaScript实现一个简单的闪烁动图

2018-12-11  本文已影响0人  Leophen

(setInterval的运用)

实现效果:

通过setInterval实现方框内文字的闪烁效果 GIF.gif
附上代码:
<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>闪烁的文字</title>
        <style type="text/css">
            div{
                width:200px;
                height:200px;
                line-height:200px;
                border:2px solid gray;
                text-align:center;
                color:red;
            }
        </style>
    </head>
<body>
    <h3>闪烁的文字</h3>
        <div id="text"> </div>
        <script type="text/javascript">
            
            var txt=document.getElementsByTagName("div")[0],

                timer=0;

            setInterval(function(){

                if(timer==0){

                    txt.innerHTML="☆☆一闪一闪的☆☆";

                    timer=1;

                }

                else{

                    txt.innerHTML="★★一闪一闪的★★";

                    timer=0;

                }

            },500);

        </script>
    </body>
</html>
上一篇 下一篇

猜你喜欢

热点阅读