javascript如何实现打字机效果实例代码详解
程序员文章站
2022-06-07 13:43:54
...
JavaScript 打字机效果
实例1
实例1
<html>
<title>JavaScript 打字机</title>
<head>
<style type="text/css">
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
margin-top:0px;
background-image:url('../../images/heading3.gif');
background-repeat:no-repeat;
padding-top:100px;
}
#myContent, #myContent blink{
width:500px;
height:200px;
background:black;
color: #00FF00;
font-family:courier;
}
blink{
display:inline;
}
</style>
<script type="text/javascript">
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;
initStringinitString = initString.replace(/<SPAN.*$/gi,"");
var theChar = inputText.charAt(charIndex);
var nextFourChars = inputText.substr(charIndex,4);
if(nextFourChars=='<BR>' || nextFourChars=='<br>'){
theChar = '<BR>';
charIndex+=3;
}
initStringinitString = initString + theChar + "<SPAN id='blink'>_</SPAN>";
document.getElementById('myContent').innerHTML = initString;
charIndexcharIndex = 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)',150);
}else{
blinkSpan();
}
}
var currentStyle = 'inline';
function blinkSpan(){
if(currentStyle=='inline'){
currentStyle='none';
}else{
currentStyle='inline';
}
document.getElementById('blink').style.display = currentStyle;
setTimeout('blinkSpan()',500);
}
</script>
<body>
<div id="myContent">
</div>
<div id="contentToWrite" style="display:none">
<!-- Put the typewriter content here-->
sharejs.com
Login : username<br>
password : ******<br>
Access is granted<br>
<!-- End typewriter content -->
</div>
<script type="text/javascript">
writeContent(true);
</script>
</body>
</html>
实例2 （兼容IE，FX）
<html>
<head>
<title>打字效果的带链接的新闻标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body{font-size:14px;font-weight:bold;}
</style>
</head>
<body>
最新内容：<a id="HotNews" href="" target="_blank"></a>
<script language="JavaScript">
var NewsTime = 2000; //每条新闻的停留时间
var TextTime = 50; //新闻标题文字出现等待时间，越小越快
var newsi = 0;
var txti = 0;
var txttimer;
var newstimer;
var newnewstitle = new Array(); //新闻标题
var newnewshref = new Array(); //新闻链接
newstitle[0] = "javascript常用函数";
newshref[0] = "http://www.jb51.net/article/74365.htm";
newstitle[1] = "http://www.jb51.net/";
newshref[1] = "http://www.jb51.net/";
function shownew()
{
var endstr = "_";
hwnewstr = newstitle[newsi];
newslink = newshref[newsi];
if(txti==(hwnewstr.length-1)){endstr="";}
if(txti>=hwnewstr.length){
clearInterval(txttimer);
clearInterval(newstimer);
newsi++;
if(newsi>=newstitle.length){
newsi = 0
}
newstimer = setInterval("shownew()",NewsTime);
txti = 0;
return;
}
clearInterval(txttimer);
document.getElementById("HotNews").href=newslink;
document.getElementById("HotNews").innerHTML = hwnewstr.substring(0,txti+1)+endstr;
txti++;
txttimer = setInterval("shownew()",TextTime);
}
shownew();
</script>
</body>
</html>
以上就是javascript如何实现打字机效果实例代码详解的详细内容，更多请关注其它相关文章！