今天来看看怎么实现炫酷的打字机效果。即把一段话一个字一个字的显示出来。
效果图：
实现思路：
首先规定好显示字数的速度即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日
本文来源CSDN博客如需转载请紧急联系作者
