javascript 打字效果

krcsximq 于 2023-01-19 发布在 Java

关注(0)|答案(1)|浏览(109)

我试图复制粘贴打字文本脚本从codepen到vue文件，但不知何故，它只 Flink ，没有改变，也没有显示任何字，它只显示Im A'比 Flink 块，我相信脚本没有运行，应用js在vue不同于html？？如果是这样，请教我如何应用它

<div class="container">
    <p>Im A'<span class="typed-text"></span><span class="cursor">&nbsp;</span></p>
  </div>

<style>
p {
  overflow: hidden;
}
.container p span.typed-text {
  font-weight: normal;
  color: white;
  text-shadow:1px 1px 1px yellow;
}
.container p span.cursor {
  display: inline-block;
  background-color: #ccc;
  margin-left: 0.1rem;
  width: 3px;
  animation: blink 1s infinite;
}
.container p span.cursor.typing {
  animation: none;
}
@keyframes blink {
  0%  { background-color: #ccc; }
  49% { background-color: #ccc; }
  50% { background-color: transparent; }
  99% { background-color: transparent; }
  100%  { background-color: #ccc; }
}
</style>

<script>
const typedTextSpan = document.querySelector(".typed-text");
    const cursorSpan = document.querySelector(".cursor");
    
    const textArray = ["web developer", "UI/UX Designer", "Front End"];
    const typingDelay = 200;
    const erasingDelay = 100;
    const newTextDelay = 2000; // Delay between current and next text
    let textArrayIndex = 0;
    let charIndex = 0;
    
    function type() {
      if (charIndex < textArray[textArrayIndex].length) {
        if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
        typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
        charIndex++;
        setTimeout(type, typingDelay);
      } 
      else {
        cursorSpan.classList.remove("typing");
          setTimeout(erase, newTextDelay);
      }
    }
    
    function erase() {
        if (charIndex > 0) {
        if(!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
        typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex-1);
        charIndex--;
        setTimeout(erase, erasingDelay);
      } 
      else {
        cursorSpan.classList.remove("typing");
        textArrayIndex++;
        if(textArrayIndex>=textArray.length) textArrayIndex=0;
        setTimeout(type, typingDelay + 1100);
</script>

JavaScript

来源：https://stackoverflow.com/questions/75155955/typing-effect-in-vue

1条答案

按热度按时间

omhiaaxx1#

请看下面的代码片段：

const { ref, onMounted } = Vue
const app = Vue.createApp({
  setup() {
    const textArray = ref(["web developer", "UI/UX Designer", "Front End"]);
    const typingDelay = ref(200);
    const erasingDelay = ref(100);
    const newTextDelay = ref(2000); // Delay between current and next text
    let textArrayIndex = ref(0);
    let charIndex = ref(0);
    const typedTextSpan = ref(0);
    const cursorSpan = ref(0);
    function type() {
      if (charIndex.value < textArray.value[textArrayIndex.value].length) {
        if(!cursorSpan.value.classList.contains("typing")) cursorSpan.value.classList.add("typing");
        typedTextSpan.value.textContent += textArray.value[textArrayIndex.value].charAt(charIndex.value);
        charIndex.value++;
        setTimeout(() => type(), typingDelay.value);
      } 
      else {
        cursorSpan.value.classList.remove("typing");
        setTimeout(() => erase(), newTextDelay.value);
      }
    }

    function erase() {
      if (charIndex.value > 0) {
        if(!cursorSpan.value.classList.contains("typing")) cursorSpan.value.classList.add("typing");
        typedTextSpan.value.textContent = textArray.value[textArrayIndex.value].substring(0, charIndex.value - 1);
        charIndex.value--;
        setTimeout(() => erase(), erasingDelay.value);
      } 
      else {
        cursorSpan.value.classList.remove("typing");
        textArrayIndex.value++;
        if(textArrayIndex.value >= textArray.value.length) textArrayIndex.value = 0;
        setTimeout(() => type(), typingDelay.value + 1100);
      }
    }
    onMounted(() => setTimeout(() => type(), 1000))
    return {
      typedTextSpan, cursorSpan
    }
  },
})
app.mount('#demo')

p {
  overflow: hidden;
}
.container p span.typed-text {
  font-weight: normal;
  color: white;
  text-shadow:1px 1px 1px red;
}
.container p span.cursor {
  display: inline-block;
  background-color: #ccc;
  margin-left: 0.1rem;
  width: 3px;
  animation: blink 1s infinite;
}
.container p span.cursor.typing {
  animation: none;
}
@keyframes blink {
  0%  { background-color: #ccc; }
  49% { background-color: #ccc; }
  50% { background-color: transparent; }
  99% { background-color: transparent; }
  100%  { background-color: #ccc; }
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div class="container">
    <p>Im A'<span ref="typedTextSpan" class="typed-text"></span><span ref="cursorSpan" class="cursor">&nbsp;</span></p>
  </div>
</div>

赞(0）回复(0）举报 2023-01-19

我来回答

javascript 打字效果

1条答案

相关问题

热门标签

最新问答