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

软件发布|下载排行|最新软件

当前位置:首页IT学院IT百科

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

  2022-11-01 我要评论

文字如何实现打字的效果呢?在浏览网页的时候也经常能看到这种效果。本节给出了一个打字效果的文字特效,文字一个一个地打印在页面上。
本节代码主要使用了 onMousedown 事件和 event.button 属性,主要功能和用法如下。

步骤/方法

  • 01

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

  • 02

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

  • 03

    <html><head><title>打字效果的文字特效</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script language="JavaScript">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><body onLoad="init();"><center><h1>打字效果的文字特效</h1><hr /><br /><div class="ttll" id="tt10"></div></center></body></html>

  • 04

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

特别提示

各平台浏览器下实现的显示的不同情况

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们