如何为我的帖子列表中的每个帖子赋予随机颜色
Posted
技术标签:
【中文标题】如何为我的帖子列表中的每个帖子赋予随机颜色【英文标题】：How to give random colors to every post in my post's list 【发布时间】：2021-09-09 23:19:51 【问题描述】：这是我的代码：
% for post in post_list %
<div class="mybox">
<div id="post">
<h1 ><a class = 'title_font' href="% url 'blog:post_detail' pk=post.pk %"><strong> post.title </strong></a></h1>
<a href="%url 'blog:post_detail' pk=post.pk %">Comments :</a>
</div>
</div>
<script src='% static 'js/blog.js' %'></script>
% endfor %
在我的blog.js javascript 文件中，当我为 mybox 分配随机颜色时，所有帖子都有相同的随机background-color。
如何为每个.mybox 元素获得不同的颜色？
【问题讨论】：
请把blog.js的内容贴出来帮助你修复。一般来说，您可以在.mybox 选择器上使用each 方法并分配一个新的随机值
嗨，你能解释一下“分配 mybox 随机颜色”是什么吗？看起来 mybox 只是一个类，所以它只有一个背景颜色。
我想这就是你要找的东西Check this out
【参考方案1】：
这可能有帮助，如果有帮助，请点赞。
const randomNumber = (min, max) =>
Math.floor(Math.random() * (max - min + 1) + min);
const randomColor = () =>
`rgb($randomNumber(0, 255), $randomNumber(0, 255), $randomNumber(
0,
255
))`;
const btn = document.querySelector('.btn');
const assignRandom = () =>
btn.style.color = randomColor();
btn.style.backgroundColor = randomColor();
;
assignRandom();
setInterval(assignRandom, 1000);.btn
display: inline-block;
font-size: 20px;
font-family: inherit;
font-weight: 500;
border: none;
padding: 10px 20px;
border-radius: 10rem;
cursor: pointer;
<!DOCTYPE html>
<html lang="en">
<head>
<body><button class="btn">Look how the colors are changing</button>
</body>
</head>
</html>【讨论】：
以上是关于如何为我的帖子列表中的每个帖子赋予随机颜色的主要内容，如果未能解决你的问题，请参考以下文章