您的位置：首页 > Web前端 > JavaScript

JavaScript打字效果

2012-09-17 23:43 253 查看

<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>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航