码迷,mamicode.com
首页 > Web开发 > 详细

HTML 文字逐一显示

时间:2016-06-30 11:06:34      阅读:742      评论:0      收藏:0      [点我收藏+]

标签:小代码 html文字逐一展示

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta name="Keywords"  content="WZ,STS,星梦联" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>邮箱输入提示效果代码-蚂蚁部落</title> 

<style type="text/css">

#content
{
  width:400px;
  height:30px;
  
line-height:30px;

}


</style>

<script type="text/javascript">
 
window.onload=function()
{
  var ocontent=document.getElementById("content");
  
var str="蚂蚁部落欢迎您,只有奋斗才会有美好的未来。";
 
 var i=0;
  var flag=null;
 
 function done()
{
    if(i<str.length)
  {
      ocontent.innerHTML=str.substring(0,i+1);

      i=i+1;
    
 } 
   
 else{
      clearInterval(flag);
   } 
 
 }
 
 flag=setInterval(done,200);

}

</script> 

<body>
<a  href="http://www.cnblogs.com/come-on/archive/2016/01/14/5129009.html"> study</a><br>
 
<div id="content">
</div>

</body>  

</html>


HTML 文字逐一显示

标签:小代码 html文字逐一展示

原文地址:http://wzsts.blog.51cto.com/10251779/1794423

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!