javascript如何实现打字机效果实例代码详解

来源：动视网责编：小采时间：2020-11-27 20:15:10

javascript如何实现打字机效果实例代码详解

javascript如何实现打字机效果实例代码详解:JavaScript 打字机效果实例1<html> <title>JavaScript 打字机</title> <head> <style type="text/css"> body{ font-family: Trebuchet MS, Lucida Sans Uni

推荐度：

点击下载本文 文档为doc格式

导读javascript如何实现打字机效果实例代码详解:JavaScript 打字机效果实例1<html> <title>JavaScript 打字机</title> <head> <style type="text/css"> body{ font-family: Trebuchet MS, Lucida Sans Uni

JavaScript 打字机效果
实例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.gxlcms.com/article/74365.htm";
 
newstitle[1] = "http://www.gxlcms.com/";
newshref[1] = "http://www.gxlcms.com/";
 
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如何实现打字机效果实例代码详解

推荐度：

点击下载本文 文档为doc格式

标签：实现 js 代码

热门焦点

javascript如何实现打字机效果实例代码详解

javascript如何实现打字机效果实例代码详解

javascript如何实现打字机效果实例代码详解

最新推荐

猜你喜欢

热门推荐