JavaScript-网页设置随机背景颜色-js随机产生一个十六进制的颜色值

    选择打赏方式

在获取到http://api.zcjun.com/这份源码后,

我每添加一个新的api点击按钮就要在style里写一个不同的颜色。

我觉得很麻烦,就基于math.random()方法写了一个产生随机十六进制数的js代码,

效果还是很NICE的,看图:

QQ截图20181111171612.jpg

然后百度了一下网上大神的写法,一共两份代码,一个控制类的一个控制id的,嵌在html里了

用得到的复制过去自己看吧。

控制id案例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>随机十六进制值</title>
  <style>
    div {
      width: 300px;
      height: 200px;
      background-color: pink;
    }
  </style>
  <script>
    function getColor() {
      var str = "#";
      //一个十六进制的值的数组
      var arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
      for (var i = 0; i < 6; i++) {
        //产生的每个随机数都是一个索引,根据索引找到数组中对应的值,拼接到一起
        var num = parseInt(Math.random() * 16);
        str += arr[num];
      }
      return str;
    }
    //页面记载的事件
    window.onload = function () {
      //在文档中通过id属性的值查找这个元素(标签).设置该标签的背景颜色
      document.getElementById("dv").style.backgroundColor = getColor();
    };
    //console.log(getColor());
  </script>
</head>
<body>
<div id="dv"></div>
</body>
</html>

控制class案例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>随机背景颜色-子成君</title>
  <style>
    div {
      width: 300px;
      height: 200px;
      background-color: pink;
    }
  </style>
  <script>
  
    function bg1(){
return '#'+Math.floor(Math.random()*0xffffff).toString(16);
}

window.onload  =  function(){
 
 var bg = document.getElementsByClassName("dv");
 
for(var i = 0; i < bg.length; i++){
    bg[i].style.backgroundColor = bg1();
}
}
  </script>
</head>
<body>
<div class="dv"></div>
</body>
</html>

版权声明:若无特殊注明,本文皆为《 子成君 》原创,转载请保留文章出处。
本文链接:JavaScript-网页设置随机背景颜色-js随机产生一个十六进制的颜色值 https://www.zcjun.com/learn/228.html
百度收录:本文已被百度收录点击查看详情!
本文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

爱你允悲悲伤吃惊委屈可怜憧憬吃瓜大哭开心坏笑笑哭哼打哈欠鼓掌乖嘘阴险日了狗费解挤眼滑稽666比心


既然没有吐槽,那就赶紧抢沙发吧!