光标闪烁 自动输入文字 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
    .wrap{width:300px;height:200px;margin:20px auto;padding:10px;background:#c9e2b3;}
    .fick{
        display: inline-block;
        -webkit-animation:fic   0.5s linear infinite;
    }
    @-webkit-keyframes fic{
        0%{opacity:0;}
        50%{opacity:1}
        100%{opacity:0;}
    }
</style>
</head>
<body>
    <div class="wrap" id="wrap">
        <div class="fick" id="fick">_</div>
    </div>
</body>
<script>
    var tit="我是好人，你喜欢我吗？喜欢就来关注我吧，我在这里等你，哈哈哈哈。。。。。。";
    var wrap=document.getElementById("wrap");
    var fick=document.getElementById("fick");
    var flag=0;
        var timer=window.setInterval(function(){
            if(flag>=tit.length){
                clearInterval(timer);
                return;
            }
            var span=document.createElement("span");
            span.innerHTML=tit[flag];
        flag++;
        wrap.insertBefore(span,fick);
    },150);

</script>
</html>

 

posted @ 2016-08-08 16:36  dongxiaolei  阅读(239)  评论(0)    收藏  举报