js实现随机生成十六进制颜色【2021.10.14】

最新推荐文章于 2024-10-30 11:16:19 发布

轻盈的风

最新推荐文章于 2024-10-30 11:16:19 发布

阅读量403

点赞数

分类专栏： javascript_笔记专栏文章标签： javascript html

本文链接：https://blog.csdn.net/masierty/article/details/120764336

版权

javascript_笔记专栏专栏收录该内容

17 篇文章 1 订阅

订阅专栏

本文介绍了如何使用Math.random生成随机颜色并转换为16进制，以及如何将这个随机颜色应用到HTML元素的背景色上。通过实例展示了如何结合padEnd函数确保颜色字符串格式。同时探讨了toString方法在颜色表示中的作用。

摘要由CSDN通过智能技术生成

一、math.random和padEnd

const colory = () => `#${Math.floor(Math.random() * 0Xffffff).toString(16).padEnd(6,"0")}`
    console.log (colory());

一、math.random和toString()

<script>
    let maxDiv=document.createElement("div");
    maxDiv.style.width="100px";
    maxDiv.style.height="60px";
    maxDiv.className = "maxdiv";
    maxDiv.innerHTML = "随机颜色背景";
    document.body.appendChild(maxDiv);
    maxDiv.colors=function(){
        var r = Math.floor(Math.random()  * 256);//floor()是对数进行下舍入
        var g = Math.floor(Math.random() * 256);//random()是生成0-1的随机数
        var b = Math.floor(Math.random() * 256);
        var color = '#' +r.toString(16) + g.toString(16) + b.toString(16);
        return maxDiv.style.backgroundColor = color;
    }
    maxDiv.colors();
    maxDiv["colors"]();//通过变量访问，可以有空格
</script>