js随机色背景图

最新推荐文章于 2023-07-27 10:35:32 发布

shadow_glory

最新推荐文章于 2023-07-27 10:35:32 发布

阅读量955

点赞数

分类专栏： web前端 js 文章标签： js javascript

本文链接：https://blog.csdn.net/crsitin_spade/article/details/108397149

版权

web前端 js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Yes,i’m here

在这里插入图片描述
也不知道写点啥，就来写个随机的颜色吧

现在写个div，然后设置他的宽高，加个边框看看咋样。
在这里插入图片描述
emmm~，还不错，继续写。
我要写的是十六进制的颜色，大家应该知道，十六进制的颜色开头都是#（井号），里面不是数字就是字母，那咱就开整。

function color(){
	//井号放在开头拼接
	let colorStr = "#";
	//十六进制里字母最大到F数字最大到9
	let str = "ABCDEF123456789";
	//看到for循环和我前面提到的拼接，大家应该猜到我要干什么了吧
	for(let i = 0; i < 6; i++;){
		//Math.floor表示向下取整 Math.random表示随机数0(包含)~1(不包含) str.length是str的长度
		//整体就是str的下标为 随机的数字乘str的长度(最小是0最大是14)
		//然后每次循环加在colorStr后面一个
		colorStr += str[Math.floor(Math.random() * str.length)]
	}
	//再把colorStr return 出去
	ruturn colorStr
}
//获取到id选择器名字为color的标签，样式中背景色(backgroundColor为驼峰写法)为color()，方法执行后就会把return出的colorStr赋给背景色
document.getelementById('color').style.backgroundColor = color()

就是这样↓
在这里插入图片描述
整体代码↓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height:100px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="color"></div>
    <script>
        function color(){
            let colorStr = '#'
            let str = 'ABCDEF123456789' 
            for (let i = 0; i < 6; i++) {
                colorStr += str[Math.floor(Math.random() * str.length)]
            }
            console.log(colorStr)
            return colorStr
        }
        document.getElementById('color').style.backgroundColor = color()
    </script>
</body>
</html>

妙啊（awesome）
在这里插入图片描述
各位再见~~~

shadow_glory

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js随机色背景图

Yes,i’m here也不知道写点啥，就来写个随机的颜色吧现在写个div，然后设置他的宽高，加个边框看看咋样。emmm~，还不错，继续写。我要写的是十六进制的颜色，大家应该知道，十六进制的颜色开头都是#（井号），里面不是数字就是字母，那咱就开整。function color(){ //井号放在开头拼接 let colorStr = "#"; //十六进制里字母最大到F数字最大到9 let str = "ABCDEF123456789"; //看到for循环和我前面提到的拼接，大家应
复制链接

扫一扫

专栏目录