gpt4 book ai didi

javascript - 当我刷新我的页面时,配色方案有 50% 的机会会有所不同,javascript 怎么样?

转载 作者:行者123 更新时间:2023-11-30 08:40:45 25 4
gpt4 key购买 nike

我希望我的页面在刷新/加载页面时有两种可能的结果(50% 的几率)。我知道这必须用数学随机来完成,但是怎么做呢?

这是我当前第一页结果的代码:

<html>
<head>

<title> Flow Test </title>

<script>


</script>

</head>

<body>
<h1>Some Flow of Control</h1>
<p>This text is a random combination of a foreground colour and background colour</p>
<p>In this case it's black on white</p>
<p> Signed </p>

<img src="bonw.gif">
</body>

</html>

此页面背景为白色,文字为黑色。但对于我的第二个结果,我希望它具有黑色背景和白色文本,并显示我拥有的另一张图片 (wonb.gif)。

如何做到这一点?如果您知道如何尝试让我了解 Javascript 的这一方面,将不胜感激。

这是我的 jsfiddle:http://jsfiddle.net/sinead19/72s9wfgy/2/

最佳答案

你可以使用类似的东西。使用类允许您拥有多个元素,每个元素具有随机颜色。颜色是在纯 CSS 中定义的。

<html>
<head>
<script>
window.addEventListener("load", function() {
var ps = document.getElementsByTagName("p");
for(var i = 0 ; i < ps.length ; i++) {
var p = ps[i];
if(p.classList.contains("randomColour")) {
p.classList.add("randomColour" + Math.ceil(Math.random() * 2));
}
}
});
</script>
<style>
.randomColour1 {
color: blue;
background-color: yellow;
}
.randomColour2 {
color: red;
background-color: black;
}
</style>
</head>
<body>
<h1>Some Flow of Control</h1>
<p class="randomColour">This text is a random combination of a foreground colour and background colour</p>
<p class="randomColour">This text is a random combination of a foreground colour and background colour</p>
<p class="randomColour">This text is a random combination of a foreground colour and background colour</p>
<p class="randomColour">This text is a random combination of a foreground colour and background colour</p>
<p>In this case it's black on white</p>
<p> Signed </p>
<img src="bonw.gif">
</body>
</html>

要添加更多颜色,请将 2(在 Math.random() 之后)替换为配色方案的数量,然后在 CSS 中添加所需的类。

关于javascript - 当我刷新我的页面时,配色方案有 50% 的机会会有所不同,javascript 怎么样?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26714036/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com