Question

当页面刷新/加载时，我希望我的页面有两种可能的结果（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/

Answer 1

你可以使用类似的东西。使用类允许您拥有多个元素，每个元素都具有随机颜色。颜色在纯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中添加所需的类。

Answer 2

这里你真正需要的是两个状态的随机切换开关。

使用内置Math.random()函数生成0到1之间的随机数：

    var toggle_state = ( Math.random() > 0.5? true: false );

如果生成的数字超过0.5，我们会将布尔值设置为true，否则将. In both cases, you would use the boolean toggle_state`设置为同样的方式：

var img_src = ( toggle_state? image_path1 : image_path2 );
document.getElementById( "image_holder" ).src = img_src;
document.body.style.backgroundColor = ( toggle_state? "black" : "white" );

每次执行此代码时，它都会检查秒值是偶数/奇数并相应地更改图像源。

此代码假定您的<img>元素的id属性为"image_holder"。

这是一个内联演示：

var toggle_state = ( Math.random() > 0.5? true: false );

var img_src = ( toggle_state? "http://imgur.com/ovxadkg" : "http://imgur.com/TG2bbe5" ) + ".gif";
document.getElementById( "image_holder" ).src = img_src;
document.body.style.backgroundColor = ( toggle_state? "black" : "white" );
document.body.style.color = ( !toggle_state ? "black" : "white" );

<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 id="image_holder" src="bonw.gif" />
</body>

Answer 3

假设没有使用JQuery，并且您想要一个内联答案（在JS页面上更改样式而不是调用不同的CSS）：

<html>
<title> Flow Test </title>
<body>

<p id="blackOrWhite" >This text is a random combination of a foreground colour and background colour</p>
<img id="image" src="bonw.gif">
<script>
  //hide image by default
  document.getElementById("image").style.display = "none";

  if(Math.random() < 0.5){
     document.getElementById("blackOrWhite").style.color = 'white';
     document.body.style.backgroundColor = 'black';
     document.getElementById("image").style.display = "inline";
  } // Else is the default(white background color and a black text color)
</script>

</body>
</html>

Answer 4

这个小提琴的完整html文件结构：http://jsfiddle.net/ezzqqpcd/

<!DOCTYPE html>
<html>
    <head>
        <style>
            .body1{
                background: white;
                color: black;
            }
            .body2{
                background: black;
                color: white;
            }
        </style>
    </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 id="image" src="bonw.gif">
        <script>
            var rnd = Math.random();
            if(rnd < 0.5)
                document.querySelector("body").className = "body1";
            else{
                document.querySelector("body").className = "body2";
                document.getElementById("image").src = "wonb.gif";
            }
        </script>
    </body>
</html>

这个代码集为body提供了两个不同的类，并设置了classname，其中一个取决于一个随机数

当我刷新我的页面时，有50％的机会颜色方案会有所不同，如何使用javascript？

4 个答案:

这是一个内联演示：