时间戳

首页 > 解决方案 > 打字机效果及链接

javascript - 打字机效果及链接

问题描述

如果不说没有的话，我的 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>

标签： javascriptjquery

解决方案

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>

推荐阅读