Javascrpit特效之打字机效果

最新推荐文章于 2023-01-12 10:53:59 发布

转载最新推荐文章于 2023-01-12 10:53:59 发布 · 128 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/610560

本文介绍了一种使用JavaScript实现的炫酷打字机效果，能够逐字显示文本，并通过设置字符间隔时间和新闻间隔时间来控制显示速度。适用于制作动态显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天来看看怎么实现炫酷的打字机效果。即把一段话一个字一个字的显示出来。

效果图：

实现思路：

首先规定好显示字数的速度即settimeout执行间隔用来控制每个字之间输出速度。再把判断段落的总字数，循环段落总字数来实现一个字一个字的输出。

js代码：

var theNewsNum;

var theAddNum;

var totalNum;

var CurrentPosion=0;

var theCurrentNews;

var theCurrentLength;

var theNewsText;

var theTargetLink;

var theCharacterTimeout;

var theNewsTimeout;

var theBrowserVersion;

var theWidgetOne;

var theWidgetTwo;

var theSpaceFiller;

var theLeadString;

var theNewsState;

 
    function startTicker(){

// ------ 设置初始数值

theCharacterTimeout = 50;//字符间隔时间

theNewsTimeout = 2000;//新闻间隔时间

theWidgetOne = "_";//新闻前面下标符1

theWidgetTwo = "-";//新闻前面下标符

theNewsState = 1;

 
    theNewsNum = document.getElementById("incoming").children.AllNews.children.length;//新闻总条数

 
    theAddNum = document.getElementById("incoming").children.AddNews.children.length;//补充条数

totalNum =theNewsNum+theAddNum;

theCurrentNews = 0;

theCurrentLength = 0;

theLeadString = " ";

theSpaceFiller = " ";

runTheTicker();

}

// --- 基础函数

 
    function runTheTicker(){

if(theNewsState == 1){

if(CurrentPosion<theNewsNum){

setupNextNews();

}

else{

setupAddNews();

}

CurrentPosion++;

if(CurrentPosion>=totalNum||CurrentPosion>=1){

CurrentPosion=0;//最多条数不超过num_gun条

}

if(theCurrentLength != theNewsText.length){

drawNews();

}

else{

closeOutNews();

}

// --- 跳转下一条新闻

 
    function setupNextNews(){

theNewsState = 0;

theCurrentNews = theCurrentNews % theNewsNum;

 
    theNewsText = document.getElementById("AllNews").children[theCurrentNews].children.Summary.innerText;

 
    theTargetLink = document.getElementById("AllNews").children[theCurrentNews].children.Summary.children[0].href;

theCurrentLength = 0;

document.all.hottext.href = theTargetLink;

theCurrentNews++;

}

 
    function setupAddNews() {

theNewsState = 0;

theCurrentNews = theCurrentNews % theAddNum;

 
    theNewsText = document.getElementById("AllNews").children[theCurrentNews].children.Summary.innerText;

 
    theTargetLink = document.getElementById("AllNews").children[theCurrentNews].children.Summary.children[0].href;

theCurrentLength = 0;

document.all.hottext.href = theTargetLink;

theCurrentNews++;

}

// --- 滚动新闻

 
    function drawNews(){

var myWidget;

 
    if((theCurrentLength % 2) == 1){

myWidget = theWidgetOne;

}

else{

myWidget = theWidgetTwo;

}

 
    document.all.hottext.innerHTML = theLeadString + theNewsText.substring(0,theCurrentLength) + myWidget + theSpaceFiller;

theCurrentLength++;

setTimeout("runTheTicker()", theCharacterTimeout);

}

// --- 结束新闻循环

 
    function closeOutNews(){

document.all.hottext.innerHTML = theLeadString + theNewsText + theSpaceFiller;

theNewsState = 1;

setTimeout("runTheTicker()", theNewsTimeout);

}

window.onload=startTicker;

原文发布时间：2018年06月30日

本文来源优快云博客如需转载请紧急联系作者