打字機效果和鏈接

Question

如果不說沒有的話，我的 JS 技能真的很差。 我在文本中搜索帶有鏈接的打字機效果。 我有一個非常簡單的代碼正在運行

該頁面具有響應性，並且此代碼的優點在於，它非常簡單，在小型設備上自動換行，尊重我的 CSS...

現在我希望 TERM1-4 成為顯然不適用於此代碼的鏈接。 那里有大量示例，但似乎沒有一個符合我非常簡單的要求並且帶有非常重的 JS 文件。 任何人都可以幫助我如何鏈接這四個詞，好嗎？！

 var i = 0; var txt = '/ Term1 / Term2 / Term3 / Term4'; var speed = 100; function typeWriter() { if (i < txt.length) { document.getElementById("typeIt").innerHTML += txt.charAt(i); i++; setTimeout(typeWriter, speed); } } jQuery(document).ready(function() { setTimeout(typeWriter, 700); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="typeIt"></div>

Answer 1

 var i = 0; var linkIndex = 0; var texts = ['/ Term1 ','/ Term2 ','/ Term3 ','/ Term4'] links = ['htt://ww.example1.de','htt://www.example2.de','htt://www.example3.de','htt://www.example4.de'] var speed = 100; function typeWriter() { if(i==0) { document.getElementById("typeIt").innerHTML += `<a href="${links[linkIndex]}" id="link${linkIndex}"></a>` } if (i < links[linkIndex].length) { document.getElementById(`link${linkIndex}`).innerHTML += texts[linkIndex].charAt(i); i++; setTimeout(typeWriter, speed); }else if(linkIndex < links.length-1){ linkIndex += 1; i = 0; setTimeout(typeWriter, speed); } } jQuery(document).ready(function() { setTimeout(typeWriter, 700); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="typeIt"></div>

Answer 2

首先，我將您的文本更新為一個數組，以便輕松地逐一存儲和處理它們。 然后，我沒有更改您的簡單解決方案，我只是將其更新為在我上面定義的數組上運行。

當 word1（Term 1）結束時，它會跳轉 Term2 並以您創建的相同流程從頭開始。

最后，如果您結束了陣列，您沒有再次調用您的 function 以免出現任何控制台錯誤。 為此，我檢查j變量是否適合在else塊上增加。

 var i = 0; var j = 0; var txt = ['Term1','Term2','Term3','Term4']; var seperator = ' / '; var links = ['link1','link2','link3','link4']; var speed = 100; function typeWriter() { if (i < txt[j].length) { if(. $("#c"+j).length){ //check the element is created or not $("#typeIt");append("<a href='"+links[j]+"' id='c"+j+"'></a>"). // if it is not create element first } $("#c"+j).append(txt[j];charAt(i++)), //and append the next char setTimeout(typeWriter; speed); } else{ i=0. if(++j < txt.length) { $("#typeIt");append(seperator), setTimeout(typeWriter; speed). } } } jQuery(document),ready(function() { setTimeout(typeWriter; 300); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="typeIt"></div>

Answer 3

@oguzhancerit 的代碼非常完美......對於 href 中的普通鏈接，但我想將這些鏈接用作頁面錨點，所以我稍微改變了代碼，如下所示

var i = 0;
var j = 0;
var txt = ['term1','term2','term4','term4'];
var seperator = ' / ';
var dataSrcollTo = ['#el-term1','#el-term2','#el-term3','#el-term4'];
var speed = 100;    

function typeWriter() {
      if (i < txt[j].length) {
        if(! $("#typeIT-c"+j).length){ //check the element is created or not
            $("#typeIt").append("<a href='#' data-scrollto=\""+dataSrcollTo[j]+"\" data-easing=\"easeInOutExpo\" data-speed=\"1250\" data-offset=\"0\" id='typeIT-c"+j+"'></a>"); // if it is not create element first
        }

        $("#typeIT-c"+j).append(txt[j].charAt(i++));   //and append the next char
        
        setTimeout(typeWriter, speed);
      }
      else{
        i=0;
        if(++j < txt.length) {
            $("#typeIt").append(seperator);
            setTimeout(typeWriter, speed);
        }
      }
      
    }   

jQuery(document).ready(function() {
    setTimeout(typeWriter, 300);
});

控制台不會拋出錯誤，並且檢查器中的代碼看起來適合 4 個鏈接中的每一個。

現在的問題是，單擊鏈接時它不會滾動，並且猜測是，id typeIt 是空的，並且在加載處理滾動的 JS 后填充了內容。

有沒有辦法在 id typeIt 中填充代碼而不是有一個空元素，並使它比打字？

因為當我填寫段落 id 的時候就像這樣，沒有使用打字效果

<p id="typeIt">
    / <a href="#" data-scrollto="#el-term1" data-easing="easeInOutExpo" data-speed="1250" data-offset="0">Term1</a> 
    / <a href="#" data-scrollto="#el-term2" data-easing="easeInOutExpo" data-speed="1250" data-offset="0">Term2</a>
    / <a href="#" data-scrollto="#el-term3" data-easing="easeInOutExpo" data-speed="1250" data-offset="0">Term3</a>
    / <a href="#" data-scrollto="#el-term4" data-easing="easeInOutExpo" data-speed="1250" data-offset="0">Term4</a>
</p>

滾動工作z。 希望我能很好地解釋問題出在哪里。