> 웹 프론트엔드 > JS 튜토리얼 > Node.js 타이핑 특수 효과 코드 공유

Node.js 타이핑 특수 효과 코드 공유

小云云
풀어 주다: 2018-03-02 13:12:11
원래의
1367명이 탐색했습니다.

이 기사는 주로 js 타이핑 특수 효과 코드를 공유합니다. 도움이 되기를 바랍니다.



<html>  
<head>  
<title>打字效果的带链接的新闻标题</title>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
<style type="text/css">  
body{font-size:14px;font-weight:bold;}  
</style>  
</head>  
<body>  
最新内容:<a id="HotNews" href="" target="_blank"></a>  
<script>  
var NewsTime = 2000;    //每条新闻的停留时间  
var TextTime = 50;      //新闻标题文字出现等待时间,越小越快  
var newsi = 0;  
var txti = 0;  
var txttimer;  
var newstimer;  
var newstitle = new Array();    //新闻标题  
var newshref = new Array();     //新闻链接  
newstitle[0] = "Jensen_Yao的博客";  
newshref[0] = "http://blog.csdn.net/jensen_yao";  
newstitle[1] = "http://blog.csdn.net/jensen_yao";  
newshref[1] = "http://blog.csdn.net/jensen_yao";  
newstitle[2] = "最高的效率就是对现有材料的最佳利用。";  
newshref[2] = "http://blog.csdn.net/jensen_yao";  
newstitle[3] = "学会偷懒!";  
newshref[3] = "http://blog.csdn.net/jensen_yao";  
newstitle[4] = "hello!";  
newshref[4] = "http://blog.csdn.net/jensen_yao";  
function shownew()  
{  
  var endstr = "_";  
  hwnewstr = newstitle[newsi];  
  newslink = newshref[newsi];  
  if(txti==(hwnewstr.length-1)){endstr="";}  
  if(txti>=hwnewstr.length){  
    clearInterval(txttimer);  
    clearInterval(newstimer);  
    newsi++;  
    if(newsi>=newstitle.length){  
      newsi = 0  
    }  
    newstimer = setInterval("shownew()",NewsTime);  
    txti = 0;  
    return;  
   }  
   clearInterval(txttimer);  
   document.getElementById("HotNews").href=newslink;  
   document.getElementById("HotNews").innerHTML = hwnewstr.substring(0,txti+1)+endstr;  
   txti++;  
   txttimer = setInterval("shownew()",TextTime);  
 }  
shownew();  
</script>  
<p><a href="http://www.108js.com" target="_blank">Jensen_Yao的博客</a></p>  
</body>  
</html>
로그인 후 복사

관련 권장 사항:

자동 텍스트 출력(타이핑 효과)을 구현하는 javascript_javascript 기술

위 내용은 Node.js 타이핑 특수 효과 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿