用js实现打字机效果

1.难得有点时间，回忆下古诗文，顺便练习下js，实现下打字机效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>打字机</title>
	<script type="text/javascript" src="text.js"></script>
</head>
<body>	
		<div id="myContent"></div>
		<div id="contentToWrite" style="display:none;">
		春江花月夜<br>张若虚 唐<br>
		春江潮水连海平，海上明月共潮生。<br>滟滟随波千万里，何处春江无月明！<br>
		江流宛转绕芳甸，月照花林皆似霰；<br>空里流霜不觉飞，汀上白沙看不见。<br>
	       	江天一色无纤尘，皎皎空中孤月轮。<br>江畔何人初见月？江月何年初照人？<br>
	       	人生代代无穷已，江月年年只相似。<br>不知江月待何人，但见长江送流水。<br>
	       	白云一片去悠悠，青枫浦上不胜愁。<br>谁家今夜扁舟子？何处相思明月楼？<br>
	       	可怜楼上月徘徊，应照离人妆镜台。<br>玉户帘中卷不去，捣衣砧上拂还来。<br>
	       	此时相望不相闻，愿逐月华流照君。<br>鸿雁长飞光不度，鱼龙潜跃水成文。<br>
	       	昨夜闲潭梦落花，可怜春半不还家。<br>江水流春去欲尽，江潭落月复西斜。<br>
	       	斜月沉沉藏海雾，碣石潇湘无限路。<br>不知乘月几人归，落月摇情满江树。<br>
		</div>
		<script type="text/javascript">
			writeContent(true);	
		</script>	
</body>
</html>

html代码就是要打的内容，主要实现是js代码，如下：

var charIndex = -1;
var stringLength = 0;
var inputText;
function writeContent(init){
	if(init){
		inputText = document.getElementById('contentToWrite').innerHTML;
	}
	if(charIndex==-1){
		charIndex = 0;
		stringLength = inputText.length;
	}
	var initString = document.getElementById('myContent').innerHTML;
	initString = initString.replace(/<SPAN.*$/gi,"");

	var theChar = inputText.charAt(charIndex);
	var nextFourChars = inputText.substr(charIndex,4);
	if(nextFourChars=='<BR>' || nextFourChars=='<br>'){
		theChar  = '<BR>';
		charIndex+=3;
	}
	initString = initString + theChar + "<SPAN id='blink'>_</SPAN>";
	document.getElementById('myContent').innerHTML = initString;

	charIndex = charIndex/1 +1;
	if(charIndex%2==1){
		document.getElementById('blink').style.display='none';
	}else{
		document.getElementById('blink').style.display='inline';
	}

	if(charIndex<=stringLength){
		setTimeout('writeContent(false)',140);
	}else{
		blinkSpan();
	}  
}

var currentStyle = 'inline';
function blinkSpan(){
	if(currentStyle=='inline'){
		currentStyle='none';
	}else{
		currentStyle='inline';
	}
	document.getElementById('blink').style.display = currentStyle;
	setTimeout('blinkSpan()',100);
}

用js实现打字机效果

猜你喜欢