javascript - 用Javascript重写文字效果
问题描述
我在循环中切换文本以获得视觉效果。这就是它的样子https://naejc.github.io/Script/GodsLies
这是代码
const symbols = ['God', 'Words'];
let count = 0;
const element = document.getElementById("WORD1");
const iteration = () => {
element.innerHTML = symbols[parseInt(count / 2, 10) % symbols.length];
if (count % 2 !== 0) {
element.classList.add("LANGUAGE");
} else {
element.classList.remove("LANGUAGE");
}
count++;
if (count === symbols.length * 2) {
count = 0;
}
};
let inthandle = setInterval(iteration, 270);
iteration();
有人可以告诉我如何在多个实例中使用此脚本吗?如果再次使用它没有效果,试图创建另一个切换文本的元素。
解决方案
您如何尝试创建“新”元素?请注意,每个id
页面只能使用一次。它必须是独一无二的。否则 js 代码将使用id
它找到的第一个。
https://www.w3schools.com/html/html_id.asp
您可能需要重写代码以使用类或类似的东西:
var initWords = function (element) {
const symbols = ['God', 'Words'];
let count = 0;
const iteration = () => {
element.innerHTML = symbols[parseInt(count / 2, 10) % symbols.length];
if (count % 2 !== 0) {
element.classList.add("LANGUAGE");
} else {
element.classList.remove("LANGUAGE");
}
count++;
if (count === symbols.length * 2) {
count = 0;
}
};
let inthandle = setInterval(iteration, 270);
iteration();
}
initWords(document.getElementById("WORD1"));
initWords(document.getElementById("WORD2"));
推荐阅读
- html - 如何使用 CSS 修改这些按钮以获得不同的颜色/文本颜色/等?
- spring-boot - 定义返回对象模型
- database - 缺少:Outlook 16.0 对象库 (msoutl.olb)
- loops - python中的实时循环控制
- javascript - 如何配置 Next.js 项目以使用 @Atlaskit 开源 React UI 库(编译时错误)?
- kernel-module - 如何擦除内核模块变量中的数据?
- c++ - Opencv Mat 作为 AppSrc 到 srtclientsink
- python - 如何删除空格以保持平衡?
- php - 从 WooCommerce 中的自定义结帐字段更新用户显示名称
- python - Python Regular Expression for pattern containing multiple lines