Getting a random background color in javascript

后端未结

关注

 4  917

花落未央

I am new to java-script . I need to get a random background color whenever i call a particular function.

I found the following code on the web but i don\'t quite un

相关标签:

4条回答

梦谈多话

2020-12-09 18:02
```
function getRandomColor () {
  var hex = Math.floor(Math.random() * 0xFFFFFF);
  return "#" + ("000000" + hex.toString(16)).substr(-6);
}
```
hex.toString(16) converts hex into string number representation in base 16.

Syntax:
```
number.toString(radix)
```
radix: Base to use for representing a numeric value. Must be an integer between 2 and 36.
```
2 - The number will show as a binary value
8 - The number will show as an octal value
16 - The number will show as an hexadecimal value
```
substr(-6) just takes the last 6 characters, which cuts off the "000000" because they're not part of the last 6 characters.
0 讨论(0)
发布评论:

提交评论
- 加载中...
感情败类

2020-12-09 18:04

The code first picks a random number and using the "& 0xFFFFFF" technique it ensures the range is something like 0 to 16777215.

Once we have that random number we convert to hexadecimal using the ".toString(16)" method, the 16 signifying we want hexadecimal conversion.

Now, we can think we have a 6 digit random number in hex to use for our color but know that the ".toString(16)" method does not do any padding for us.

For example, if the random number is 255 which is FF in hex, is not usable as it since it is not precisely 6 digits long.

One technique is to do a string length check and add the corresponding number of 0's to the beginning of the 'FF' to get '0000FF'.

Here we see another technique where you see a fixed number of 0's added to the string and then a fixed length is chopped of the end, ensuring you get 6 digits and correctly padded.

I've always used the string length check or specific padding functions (I don't know if javascript has one) - I only answered the question so as to fully appreciate the technique shown in this question.

0 讨论(0)
发布评论:

提交评论
- 加载中...

时光说笑

2020-12-09 18:11

/* a complete html page to apply this */
<html>
    <body>

     <button type="button" onclick="setbodybgcolor()">Random Background</button>

         <script>
               function setbodybgcolor(){
                   document.body.style.backgroundColor=getRandomColor ();
               }
               function getRandomColor () {
                       var hex = Math.floor(Math.random() * 0xFFFFFF);
                       return "#" + (hex.toString(16)).substr(-6);
               }
               /* we can do this also
               function setbodybgcolor(){
                     var hex=Math.floor(Math.random()*16777215).toString(16);
                     document.body.style.backgroundColor="#"+hex;
               }*/
         </script>

     </body>
</html>

0 讨论(0)

礼貌的吻别

2020-12-09 18:22

hex.toString(16) converts hex into string number representation in base 16. Then it appends 000000 at the beginning of the string to make sure it will be at least of length 6. and substr(-6) takes last 6 chars of the resulting string. This way you always get # + 6 hex chars. Which represents color.

0 讨论(0)
发布评论:

提交评论
- 加载中...