网站首页前端文档正文

JavaScript生成随机颜色

作者：weixin_44953227 更新时间： 2022-04-09 前端文档

生成随机颜色代码

// rgb颜色随机
function rgb() {
	var r = Math.floor(Math.random()*256);
	var g = Math.floor(Math.random()*256);
	var b = Math.floor(Math.random()*256);
	var rgb = '('+r+','+g+','+b+')';
          console.log("当前颜色：" + rgb);
	return `rgb${rgb}`;
}

// 十六进制颜色随机
function color16() {
	var r = Math.floor(Math.random()*256);
	var g = Math.floor(Math.random()*256);
	var b = Math.floor(Math.random()*256);
	var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
          console.log("当前颜色：" + color);
	return color;
}

// 16进制随机颜色
function randomColor() {
    return "#" + Math.floor(Math.random() * 16777215).toString(16);
}

完整代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成随机颜色title>
head>
<style>
    .container {
        width: 200px;
        margin: 50px auto;
        text-align: center;
        padding: 24px;
        background-color: #fff;
        box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
    }
style>
<body>
    <h1 class="container">
        <button onclick="handleBodyRandomColor()">生成随机的一个颜色button>
        <span id="currentColor">span>
    h1>
    <script>

        // rgb颜色随机
        function rgb() {
			var r = Math.floor(Math.random()*256);
			var g = Math.floor(Math.random()*256);
			var b = Math.floor(Math.random()*256);
			var rgb = '('+r+','+g+','+b+')';
            console.log("当前颜色：" + rgb);
			return `rgb${rgb}`;
		}

        // 十六进制颜色随机
		function color16() {
			var r = Math.floor(Math.random()*256);
			var g = Math.floor(Math.random()*256);
			var b = Math.floor(Math.random()*256);
			var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
            console.log("当前颜色：" + color);
			return color;
		}

        // 16进制随机颜色
        function randomColor() {
            return "#" + Math.floor(Math.random() * 16777215).toString(16);
        }

        function handleBodyRandomColor() {
            const color = color16();
            document.body.style.backgroundColor = color;
            document.getElementById("currentColor").innerHTML = color;
        }

        handleBodyRandomColor();

    script>
body>
html>

原文链接：https://blog.csdn.net/weixin_44953227/article/details/118637218

上一篇：js中区分深拷贝与浅拷贝的实战过程_javascript技巧
下一篇：SpringMVC处理jackson的JSON乱码问题统一解

网站首页 前端文档 正文

JavaScript生成随机颜色

生成随机颜色代码

完整代码

相关推荐

网站首页前端文档正文