mon*_*onk 1 html javascript dom
我试图操纵div中已经存在的文本并用JavaScript中的其他字符串替换它,通过从div元素中存在的字符串替换特定字符来创建基本的动画效果,更准确地说是基于位置的字符串替换.但是,当我写下以下代码时,它不起作用.我想要做的是将原始文本存储在一个变量中,当文本的dom替换发生时,然后设置某个间隔替换旧文本,并再次替换为新的随机化文本,在文本的某个位置创建文本替换动画.
代码:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var all ="ABCDEFGHIJKLMNOPQRSTUVWXYZa{}[];:></?bcdefghijklmnopqrstuvwxyz0123+_)(*&^%$#@!~`456789";
var old_text = document.getElementById("text").innerText;
function randChar() {
"use strict";
return all.charAt(Math.floor(Math.random()*all.length));
}
function main() {
"use strict";
var $_inter = setInterval(function() {
var text = document.getElementById("text");
text.innerHTML = text.innerHTML.substring(0, 5) + randChar() + text.innerHTML.substring(5);
setTimeout(function(){
text.innerHTML = old_text;
},200);
}, 350);
}
window.onload = main;
</script>
</head>
<body>
<div id="text">Hello World!</div>
</body>
</html>
所以为了让它工作一段时间,我使用原始字符串作为
setTimeout(function(){
text.innerHTML = "Hello World!";
},200);
这是不可能的,因为页面中的文本可能是动态生成的.当我运行第一个代码时,它表示Null的innerText.
它抛出的确切错误是:
未捕获的TypeError:无法读取null的属性"innerText"
这是什么意思,因为文本和元素是为什么它不能从dom中获取文本？
你的问题是有原因的,因为你在#text定义它之前就已经到了.
var old_text = document.getElementById("text").innerText;
您应该在window.onload函数中包含它,因为它将存在.
一旦你这样做,你将收到另一个错误:
未捕获的ReferenceError:未定义标志
对于线:
flag = flag+1;
这是因为你还没有定义你的标志变量,这可以通过var flag;在你的第一个顶部定义来修复.
var all ="ABCDEFGHIJKLMNOPQRSTUVWXYZa{}[];:></?bcdefghijklmnopqrstuvwxyz0123+_)(*&^%$#@!~`456789";
var old_text;
var flag = 0;
function randChar() {
"use strict";
return all.charAt(Math.floor(Math.random()*all.length));
}
function main() {
"use strict";
old_text = document.getElementById("text").innerText;
var counter = Math.floor(Math.random()*document.getElementById("text").innerText.length);
var $_inter = setInterval(function() {
var text = document.getElementById("text");
text.innerHTML = text.innerHTML.substring(0, 5) + randChar() + text.innerHTML.substring(5);
setTimeout(function(){
text.innerHTML = old_text;
},200);
flag = flag+1;
}, 350);
}
window.onload = main;
使用上面的代码,我们仍然在Firefox中收到原始错误.这是因为Firefox没有实现innerText.这可以通过使用.textContent或修复.innerHTML.
old_text = document.getElementById("text").textContent;
var counter = Math.floor(Math.random()*document.getElementById("text").textContent.length);
// or
old_text = document.getElementById("text").innerHTML;
var counter = Math.floor(Math.random()*document.getElementById("text").innerHTML.length);
| 归档时间： |
|
| 查看次数： |
1478 次 |
| 最近记录： |