<a href="http://testpage.com/">
<script type="text/javascript">
// This script will replace itself with a random one of these phrases
var phrases = [
'This is the first one',
'This is the second one',
'This is the third one'
];
var scripts = document.getElementsByTagName('script');
var this_script = scripts[scripts.length - 1];
this_script.parentNode.replaceChild(document.createTextNode(phrases[Math.floor(Math.random()*phrases.length)]), this_script);
</script>
</a>
JSFiddle
分解
创建一个包含三个字符串的数组文字:
var phrases = [
'This is the first one',
'This is the second one',
'This is the third one'
];
获取页面上所有脚本元素的NodeList(因为页面已经加载到这一点,所以之前和包括这个的所有脚本):
var scripts = document.getElementsByTagName('script');
将该列表中的最后一个脚本(即,此脚本元素)存储在this_script
:
var this_script = scripts[scripts.length - 1];
我将把下一行分成更小的部分。
Math.random给出一个介于(包括)和(不包括)之间的数字。将它乘以 3 会在(inclusive) 和(exclusive) 之间得到均匀分布,并且Math.floor会截断它。这给出了一个介于两者之间的随机整数。如果将元素添加到数组中,它将更新,因为它在计算中使用了phrases.length,而不是文字 3:0
1
0
3
0
2
Math.floor(Math.random()*phrases.length)
document.createTextNode创建并返回一个实现 Text 接口的新节点,它的数据就是传入的值。在这种情况下,它是短语数组中的一个随机元素:
document.createTextNode(phrases[Math.floor(Math.random()*phrases.length)])
Node.parentNode是不言自明的,在这种情况下,脚本元素的父级将是HTMLAnchorElement(由<a>
树中脚本上方的标记表示)。Node.replaceChild接受两个参数, anew_child
和 an old_child
。我们为 传递了新的文本节点new child
,并为 传递了这个脚本old_child
,这导致该脚本从 DOM 中删除并替换为文本节点:
this_script.parentNode.replaceChild(document.createTextNode(phrases[Math.floor(Math.random()*phrases.length)]), this_script);