html JavaScript中的文本随机化器动画无法正常工作

gj3fmq9x 于 2024-01-04 发布在 Java

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

按钮内的文本应该随机改变其字母，并在一定时间后恢复为正常文本，但当我悬停按钮时，文本并没有停止随机化，按钮的宽度正在改变。如何修复宽度并阻止它随机化？
我认为getElementById部分有问题。在原始代码中，它是查询的，但似乎也不起作用
在Codepen上查看
HTML

<div class="nav-buttons">
            <div class="btn1">
                <button>PROJECTS</button>
            </div>
            <div class="btn2">
                <button>
                    <span id="info-btn">INFO</span>
                </button>
            </div>
            <div class="theme-btn">
                <button onclick="changeClass()">Change Class</button>
            </div>
        </div>

字符串
CSS

nav{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2em 4em;
}
.nav-buttons{
    display: flex;
    align-items: center;
    gap: 2em;
}
button{
    position: relative;
    background: none;
    outline: none;
    border: 1px solid var(--secondary);
    border-radius: 0.25em;
    font-size: 17px;
    color: var(--secondary);
    font-family: Monorama;
    padding: 0.25em 0.75em;
    cursor: pointer;
}

型
JavaScript

//Info Randomizer
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let interval = null;
document.getElementById("info-btn").onmouseover = event => {  
  let iteration = 0;
  
  clearInterval(interval);
  
  interval = setInterval(() => {
    event.target.innerText = event.target.innerText
      .split("")
      .map((letter, index) => {
        if(index < iteration) {
          return event.target.dataset.value[index];
        }
      
        return letters[Math.floor(Math.random() * 26)]
      })
      .join("");
    
    if(iteration >= event.target.dataset.value.length){ 
      clearInterval(interval);
    }
    
    iteration += 1;
  }, 30);
}

型

Html

来源：https://stackoverflow.com/questions/77714438/text-randomizer-animation-in-javascript-not-working-properly

1条答案

按热度按时间

6ss1mwsb1#

据我所知，这个想法是将原始文本保存在数据集中，随机化后恢复。但是，逻辑（或语法）存在一些问题。我做了这个更正，并增加了时间来增强效果。
导致元素大小不同的原因是，当文本更改时，占用的空间也会改变。2要避免这种情况，您可以将最小尺寸设置为比预期的大，即使在所有字母都是宽的情况下也是如此（通常W是最宽的字符）。我决定保留175px的固定大小。或者，您可以使用等宽字体，以便在所有情况下都具有一致的大小，而不需要定义一种尺寸。

const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
let interval = null
document.querySelector("#info-btn").addEventListener("mouseover", event => {
    const targetElement = event.target
    let iteration = 0
    // stop old animation
    clearInterval(interval)
    // save the original text
    let originalText = targetElement.innerText
    targetElement.dataset.originalText = targetElement.dataset.originalText === undefined ? originalText : targetElement.dataset.originalText
    originalText = targetElement.dataset.originalText
    interval = setInterval(() => {
        const text = targetElement.innerText.split("").map((letter, index) => {
            if (index < iteration) {
                // restore original text
                return targetElement.dataset.originalText[index]
            }
            return letters[Math.floor(Math.random() * letters.length)]
        })
        targetElement.innerText = text.join("")
        if (iteration >= targetElement.dataset.originalText.length) {
            clearInterval(interval)
        }
        iteration += 1
    }, 150)
})

nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2em 4em;
}
.nav-buttons {
    display: flex;
    align-items: center;
    gap: 2em;
}
button {
    position: relative;
    background: none;
    outline: none;
    border: 1px solid var(--secondary);
    border-radius: 0.25em;
    font-size: 17px;
    color: var(--secondary);
    font-family: Monorama;
    padding: 0.25em 0.75em;
    cursor: pointer;
    min-width: 175px;
}

<div class="nav-buttons">
    <div class="btn1">
        <button>PROJECTS</button>
    </div>
    <div class="btn2">
        <button>
            <span id="info-btn">INFORMATION</span>
        </button>
    </div>
    <div class="theme-btn">
        <button onclick="changeClass()">Change Class</button>
    </div>
</div>

我的这个代码版本（修改）https://codepen.io/luis7lobo9b/pen/mdoypbq

展开查看全部

赞(0）回复(0）举报 2024-01-04

我来回答

html JavaScript中的文本随机化器动画无法正常工作

1条答案

相关问题

热门标签

最新问答