本文介绍一个仅237字节的JavaScript脚本,用于为页面中的span元素生成随机十六进制颜色值。通过遍历DOM节点并修改style.color属性,实现标签页或任意页面的随机色彩效果。代码可直接嵌入ASP或JS文件中,适用于需要简单视觉变化的场景。
JS实现随机颜色生成脚本
应部分用户需求,现提供一个轻量级的JavaScript解决方案。该脚本体积仅为237字节,非常精简。使用方法十分简单:将下方提供的代码片段插入到tag.asp文件中<div id="mainContent-bottomimg">标签之前即可生效。若希望简化交互,无需提出额外疑问。此外,该代码也可放置于header.asp或footer.asp中,但需注意,这样做会导致整个页面所有span元素均应用随机颜色效果。演示地址为http://www.hljsh.com/tag.asp,虽然该演示由ASP实现,但效果与本文提供的JS版本一致。
具体代码如下:
<script>
var obj = document.getElementsByTagName("span");
for(i=0;i<obj.length;i++)
{
var str = "0123456789abcdef";
var t = "#";
for(j=0;j<6;j++)
{t = t+ str.charAt(Math.random()*str.length);}
obj[i].style.color=t;
}
</script><span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> <span id=tag style="font-size:13px;">■■■■■</span> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]