JS随机网页背景色(如何让用户自闭)

发布于 / 网页制作 / 10 条评论

如果有关注我博客的朋友应该发现了,我博客的左上角多出来了一个“彩蛋”按钮,如果你点击了的话,就会有一种神奇的光芒在你眼前绽放

咳咳..这是我在做一个点击替换背景图片的功能的时候弄出来的副产品,解决了“如何快速让你网站的用户自闭”这一问题

JS的内容还是很简单的,本文章主要是给小白们看的:

<a id="starteggs" style="width:100px;height:100px;font-size:100px;color:#000;" onclick="setInterval(starteggs,1);" >点我</a> <!--setInterval(starteggs,1);的意思是每1毫秒执行一次starteggs这个函数-->
<a id="aa" style="width:100px;height:100px;font-size:100px;color:#FFF;" >AAAAA</a>
<a id="bb" style="width:100px;height:100px;font-size:100px;background:#000;" >BBBBB</a>
<script>
    function starteggs(){
    console.log(randomColor())                 //浏览器调试log输出
	color = randomColor();                     //赋值随机颜色代码
	document.getElementById("starteggs").style.background = color;    //改变ID为starteggs的元素的background属性
    document.getElementById("aa").style.background = color;        //改变ID为aa的元素的background属性
	document.getElementById("bb").style.color = color;       //改变ID为bb的元素的color属性
    }
	function randomRange(min, max) {                
        return Math.floor(Math.random() * (max - min + 1) + min);
    };
	function randomColor() {                     //随机输出十六位颜色代码
        var color = randomRange(0, 0xFFFFFF);
        return '#' + ('000000' + color.toString(16)).slice(-6);
    };
</script>
效果预览

内容还是非常简单的,只不过你在照搬之前请把你需要变换颜色的元素的ID加上。而且需要注意的是,一旦有一个元素ID在页面上找不到,那么之后的document都不会再执行

郑重声明,本人最讨厌某些x彩,波x,x挂,x刷,网站的此类故意和用户过不去的杀马特广告,本JS仅供学习

本文基于《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
转载原创文章请注明,转载自: 沧水的博客 » JS随机网页背景色(如何让用户自闭)
  1. lemburse

    您好,请教一下这个鼠标特效的问题。我翻了一下网页,应该是这个cdn.cangshui.net/inspire/js/shubiaotexiao.js。然后我里面的代码解码之后存成js文件,然后在wordpress在使用的header.php里导入了,发现并没有用,请问是哪里出错了吗orz

    1. 沧水
      @lemburse 给我你的主页,我帮你看看代码
      1. lemburse
        @沧水 已经解决啦=w=
  2. 于一九

    这个鼠标点击特效是真的好看,可以出一个教程嘛qwq

  3. cpp.la

    真tm的花,亮瞎眼了。。。23333

  4. Ocsid

    颜色快速变换有可能导致癫痫发作的,建议警告一下先…

    1. 沧水
      @Ocsid 在理,允了
  5. By小伟

    真就一秒自闭…鼠标立刻点了X

  6. 卧槽

    大晚眼睛都瞎了…

    1. 沧水
      @卧槽 大晚上就很难受了233