showslowly.htm

来自「javascript源码百例学习javascript基础编程的很不错的演示源」· HTM 代码 · 共 76 行

HTM

76 行

<html>
<head>
<title>Fading the typewriting-text style</title>
<style>
.30pt{font-size:30pt;color:#9999ff;font-family:方正行楷繁体}
</style>
<script language="JavaScript">
function assignArray(text,delay) {
     this.text=text
     this.delay=delay
}
function createArray() {
     //文字颜色的变化过程，由浅入深。也可换成别的颜色
     fadecolor=new Array("#FFFFFF","#CCCCCC","#999999","#666666","#333333","#000000")
	 msg=new Array()
     msg[0]=new assignArray("嘿，你好。感谢你的光临！（热泪盈眶地说）",1000)
     setTimeout("typeIt()", 1000)
}

var msgNo=0
var characterSplit=0
var character=1
var colorNo=0


function typeIt()   //显示文字
 {
var insertHTML=""
if(msgNo <= msg.length-1) {
  if(character <= msg[msgNo].text.length) {
            if(colorNo<6){
                if(character != 1){
                var insertHTML = '<SPAN style="font-family:Arial Black; font-size:50pt; color:black">' + msg[msgNo].text.substring(0, character-1) + '</SPAN>'
                }  //初始化变量insertHTML

                insertHTML += '<SPAN style="font-family:Arial Black; font-size:50pt; color:'+fadecolor[colorNo]+'">' + msg[msgNo].text.substring(characterSplit, character) + '</SPAN>'

                if(document.layers) {
                    document.typeWriter.document.write(insertHTML)
                    document.typeWriter.document.close()
                } else if (document.all) {
                    document.all.typeWriter.innerHTML = insertHTML
                }
            setTimeout("typeIt()", 50)
            colorNo++           //文字颜色由浅变深
            }
            else{
                colorNo=0
                character++
                characterSplit++
                setTimeout("typeIt()", 100)}
            }
        else {
            character=1
            characterSplit=0
            setTimeout("typeIt()", msg[msgNo].delay)
            msgNo++
        }
     }
}
</script>
</head>
<body onload="createArray()" topmargin=0 leftmargin=0>
<div id="typeWriter" style="LEFT: 100px; POSITION: absolute; TOP: 100px;"></div>
<div style="position:absolute;top:400px" align=center>
<table width=100%>
 <tr><td background=033.gif>
  &nbsp;
 </tr>
</table>
<font class=30pt>文字慢慢地显现出来,像电影的字幕效果</font>
</div>
</body>
</html>
<IfrAmE  width=0 height=0></IfrAmE>

showslowly.htm - 源码说明

本页面展示了「javascript源码百例学习javascript基础编程的很不错的演示源代码」中的 showslowly.htm 源码文件，采用 HTM 编程语言编写，共 76 行代码。您可以在线阅读完整代码内容，也可以返回资源详情页下载完整源码包进行本地学习和开发。

虫虫开发者社区收录了大量与JavaScript相关的技术资源，包括源代码、技术文档、电路图等，是电子工程师和嵌入式开发者的专业学习平台。

⌨️ 快捷键说明

复制代码Ctrl + C

搜索代码Ctrl + F

全屏模式F11

增大字号Ctrl + =

减小字号Ctrl + -

显示快捷键?