又一个打字机效果，操作非常简单，效果非凡
在网页<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">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, September 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
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)',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>区添加HTML代码
<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>
调用非常简单，你所需要做的就是把
<!-- Put the typewriter content here--> sharejs.com Login : username<br> password : ******<br> Access is granted<br> <!-- End typewriter content -->
的内容替换成你要出现的文本即可
