JavaScript打字效果

最新推荐文章于 2024-09-12 23:23:34 发布

johnny124

最新推荐文章于 2024-09-12 23:23:34 发布

阅读量202

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/yuzi_z/article/details/7989911

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript打字效果</title>
<script type="text/javascript">
    var index = 0;
	var text;		//记录输出文本
	var currentStyle = 'inline'; 	//表示光标状态
    function typewrite(){
		var content = document.getElementById('content').innerHTML;
		content = content.replace(/<span.*/gi,"");
        
        var c = text.charAt(index);
       	var next = text.substr(index,4);
       	if(next=='<br>'){
       		c  = '<br>';
       		index+=3;
       	}
		index++;
        document.getElementById('content').innerHTML = content + c + "<span id='cursor'>_</span>";
		setTimeout('moveCursor()',180);   //光标闪烁移动
  		
		if(index <= text.length)
			setTimeout('typewrite()',200);
		else
 			setTimeout('jumpCursor()',500);
    }
	//光标跳动
	function moveCursor(){
    	if(currentStyle=='inline'){
    	currentStyle='none';
    	}else{
    	currentStyle='inline';
    	}
    	document.getElementById('cursor').style.display = currentStyle;
	}
	
	function jumpCursor(){
    	moveCursor();
    	setTimeout('jumpCursor()',500);
    }
    </script>
</head>
<body>
<div id="content">
Login : username<br>
password : ******<br>
Access is granted<br>
</div>

<script type="text/javascript">
	text = document.getElementById('content').innerHTML;   //获取文本
	document.getElementById('content').innerHTML = "";
	typewrite();
	
</script>

</body>
</html>

此代码为修改版本，原代码出处点击打开链接