怎样用JavaScript制作打字效果的文字特效

2025-10-23 23:50:35

1、setTimeout 方法，在执行时是在载入后延迟指定时间后，去执行一次表达式，仅执行一次。

2、charAt 方法返回一个字符值，该字符位于指定索引位置。字符串中的第一个字符的索引为0，第二个的索引为1，等等。超出有效范围的索引值返回空字符串。

3、<html><head>

<title>打字效果的文字特效</title>

var layers = document.layers;

var style = document.all;

var both = layers || style;

var idme = 908601;

if(layers) //如果不是ie浏览器

{

layerRef = 'document.layers';

styleRef = '';

}

if(style) //如果是ie浏览器

{

layerRef = 'document.all';

styleRef = '.style';

}

function writeOnText(obj, str) { //函数在页面上打印字符串

if(layers) {

with(document[obj]) {

document.open();

document.write(str); //write方法打印字符串

document.close();

}

if(style) eval(obj+'.innerHTML = str'); //使用innerHTML属性显示字符串

}

var dispStr = new Array("javascript源码大全"); //字符串数组

var overMe = 0;

function txtTyper(str, idx, idObj, spObj, clr1,clr2, delay, plysnd) //函数:实现打字效果

{

var tmp0 = tmp1 = '', skip = 100;

if(both && idx <= str.length) {

if(str.charAt(idx) == '<') {

while(str.charAt(idx) != '>') idx++;

idx++;

}

if(str.charAt(idx) == '&' && str.charAt(idx+1) != '') {

while(str.charAt(idx) != ';') idx++;

idx++;

}

tmp0 = str.slice(0, idx);

tmp1 = str.charAt(idx++);

if(overMe==0 && plysnd==1) {

if(navigator.plugins[0]) {

if(navigator.plugins["LiveAudio"][0].type == "audio/basic" && navigator.javaEnabled()) {

document.embeds[0].stop();

setTimeout("document.embeds[0].play(false)", 100);

}

} else if(document.all) {

ding.Stop();

setTimeout("ding.Run()", 100);

}

overMe = 1;

} else {

overMe = 0;

}

writeOnText(idObj, "<span class="+spObj+"><font color='"+clr1+"'>"+tmp0+"</font><font color='"+clr2+"'>"+tmp1+"</font></span>");

//调用writeOnText函数将字符显示在网页上

setTimeout("txtTyper('"+str+"', "+idx+", '"+idObj+"', '"+spObj+"', '"+clr1+"', '"+clr2+"', "+delay+", "+plysnd+")", delay);

}

function init()

{

txtTyper(dispStr[0], 0, 'tt10', 'ttll', '#339933', '#99FF33', 300, 0);　//调用txtTyper函数开始打字

}

</script>

</head>

<h1>打字效果的文字特效</h1>

<hr />

<br />

</center>

</body>

</html>

4、运行该程序后，页面出现一个提示信息，然后逐个出现字符。如此逐个出现字符后，等待全部打印完毕即可停止打印，如下图所示。

怎样用JavaScript制作打字效果的文字特效

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。