Question

我正在尝试制作具有可变边框半径的形状。

基于修饰符，形状的边框半径应为50％（Math.random() > 0.5时），20％（Math.random() > 0.8时），默认为0％，给出平方。

但是，当您使用点击功能时，它只会提供20％半径或默认形状，而不是50％半径。

以下是密钥方法的简化版本：

function makeShapeAppear() {
    var top = Math.random() * 400;
    var left = Math.random() * 400;
    var width = (Math.random() * 100) + 100;

    if (Math.random() > 0.5) {
        document.getElementById("shape").style.borderRadius = "50%"
    } else {
        document.getElementById("shape").style.borderRadius = "0";
    }

    if (Math.random() > 0.8) {
        document.getElementById("shape").style.borderRadius = "20%"
    } else {
        document.getElementById("shape").style.borderRadius = "0";
    }
}

完整的代码段：

＆＃13;

var bestTime = 0;

var start = new Date().getTime();

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

function makeShapeAppear() {
    var top = Math.random() * 400;
    var left = Math.random() * 400;
    var width = (Math.random() * 100) + 100;
    if (Math.random() > 0.5) {
        document.getElementById("shape").style.borderRadius = "50%"
    } else {
        document.getElementById("shape").style.borderRadius = "0";
    }

    if (Math.random() > 0.8) {
        document.getElementById("shape").style.borderRadius = "20%"
    } else {
        document.getElementById("shape").style.borderRadius = "0";
    }

    document.getElementById("shape").style.backgroundColor = getRandomColor();
    document.getElementById("shape").style.width = width + "px";
    document.getElementById("shape").style.height = width + "px";
    document.getElementById("shape").style.top = top + "px";
    document.getElementById("shape").style.left = left + "px";
    document.getElementById("shape").style.display = "block";
    start = new Date().getTime();
}

function appearAfterDelay() {
    setTimeout(makeShapeAppear, Math.random() * 2000)
}

appearAfterDelay();

document.getElementById("shape").onclick = function() {
    document.getElementById("shape").style.display = "none";
    var end = new Date().getTime();
    var timeTaken = (end - start) / 1000;
    document.getElementById("timeTaken").innerHTML = timeTaken + "'s";
    if (timeTaken < bestTime || bestTime == 0) {
        bestTime = timeTaken;
        document.getElementById("best").innerHTML = bestTime + "s"
    }
    appearAfterDelay();
}

＆＃13;

body {
    background-color: azure;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

#shape {
    background-color: red;
    width: 200px;
    height: 200px;
    display: none;
    position: relative;
}

.bold {
    font-weight: bold;
}

#best {
    color: limegreen;
    font-weight: bold;
}

＆＃13;

<head>
    <title>Javascript Test You Reactions</title>
</head>

<body>
    <h1>Test Your Reactions!</h1>
    <P>Click on the squares and circles as <em><ins>quickly</ins></em>as you can!</P>
    <p class="bold">Your time: <span id="timeTaken"></span></p>
    <p>Best time: <span id="best"></span></p>
    <div id="shape"></div>
</body>

＆＃13;

Answer 1

您可以使用以下代码获取形状半径

var  randomNumber = Math.Random();
if (randomNumber > 0.8) {
    document.getElementById("shape").style.borderRadius = "20%";
}
else if (randomNumber > 0.5) {
    document.getElementById("shape").style.borderRadius = "50%";
} else {
    document.getElementById("shape").style.borderRadius = "0";
}

Answer 2

如UchihaItachi所示，您的主要问题在于确定右边界半径的条件语句的排序和分离;如果随机数超过0.5但未超过0.8，则第一个条件会将半径设置为50%，但第二个条件会将其设置为0。
另一个小问题是重新计算随机值以进行测试，这将增加获得0边界半径的概率。

这可以像这样改进

function makeShapeAppear() {
    var top = Math.random() * 400;
    var left = Math.random() * 400;
    var width = (Math.random() * 100) + 100;

    var factor = Math.random();
    var radius = "0";

    if (factor > 0.8) {
        radius = "20%"
    } else if (factor > 0.5) {
        radius = "50%"
    }

    document.getElementById("shape").style.borderRadius = radius;
}

完整的代码段，其他一些更改（例如，只获取shape元素一次，构造代码以便于阅读，尽可能直接分配等）：

＆＃13;

var bestTime = 0,
    shape = document.getElementById("shape"),
    start = new Date().getTime();

shape.onclick = click;
appearAfterDelay();


function appearAfterDelay() {
    setTimeout(makeShapeAppear, Math.random() * 2000)
}

function click() {
    var end = new Date().getTime(),
        timeTaken = (end - start) / 1000;

    shape.style.display = "none";

    if (timeTaken < bestTime || bestTime == 0) {
        bestTime = timeTaken;
    }

    document.getElementById("timeTaken").innerHTML = timeTaken + "s";
    document.getElementById("best").innerHTML = bestTime + "s"

    appearAfterDelay();
}

function makeShapeAppear() {
    var styles = shape.style,
        factor = Math.random(),
        radius = "0";

    styles.display = "block";
    styles.backgroundColor = getRandomColor();
    styles.top = Math.random() * 400 + "px";
    styles.left = Math.random() * 400 + "px";
    styles.width = styles.height = (Math.random() * 100) + 100 + "px";

    if (factor > 0.8) {
        radius = "20%"
    } else if (factor > 0.5) {
        radius = "50%"
    }
    styles.borderRadius = radius;

    start = new Date().getTime();
}

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

＆＃13;

body {
    background-color: azure;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

#shape {
    display: none;
    position: relative;
}

.bold {
    font-weight: bold;
}

#best {
    color: limegreen;
}

＆＃13;

<head>
    <title>Javascript Test You Reactions</title>
</head>

<body>
    <h1>Test Your Reactions!</h1>
    <p>Click on the squares and circles as <em><ins>quickly</ins></em> as you can!</p>
    <p class="bold">Your time: <span id="timeTaken"></span></p>
    <p>Best time: <span id="best" class="bold"></span></p>
    <div id="shape"></div>
</body>

＆＃13;

如何生成多个边框半径

2 个答案: