複数のボーダー半径を生成する方法

可変ボーダー半径のシェイプを作成しようとしています。複数のボーダー半径を生成する方法

モディファイアに基づいて、シェイプのボーダー半径は、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"; 
    } 
}

完全なコードスニペット：あなたは形状半径を取得するために、次のコードを使用することができます

var bestTime = 0; 
 

 
var start = new Date().getTime(); 
 

 
function getRandomColor() { 
 
    var letters = 'ABCDEF'.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(); 
 
}

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; 
 
}

<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>

出典

2017-11-17 Coder

それが何をしているのかあなたは2つの乱数を得て、それらに基づいて何かをしていますが、最後のものだけが物に影響します。 if文を再考する必要があります。 –

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"; 
}

出典

2017-11-17 09:16:29 UchihaItachi

なぜ「お使いください」？ :)コードを使用するように指示するのではなく、簡単な説明をしてください。 –

私は、コードが自明であるほど簡単だと思います。アップヴォートを取得したり、私の答えを受け入れたりするために、なぜそれにエッセイを書くべきですか？ :) – UchihaItachi

UchihaItachiで示されているように、あなたの主な問題は、正しいボーダー半径を決定する条件文の順序と分離です。乱数が0.5を超えていて0.8を超えていない場合、最初の条件は半径を50%に設定しますが、2番目の数値は0に設定します。
もう1つの小さな問題は、テスト対象の乱数値を再計算することで、ボーダー半径が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要素を取得し、直接割り当て可能な場合、などとの完全なコードスニペットを向上させることができ、）：あなたのコードと目を通して読む

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 = 'ABCDEF'.split(''); 
 
    var color = '#'; 
 
    for (var i = 0; i < 6; i++) { 
 
     color += letters[Math.floor(Math.random() * 16)]; 
 
    } 
 
    return color; 
 
}

body { 
 
    background-color: azure; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: sans-serif; 
 
} 
 

 
#shape { 
 
    display: none; 
 
    position: relative; 
 
} 
 

 
.bold { 
 
    font-weight: bold; 
 
} 
 

 
#best { 
 
    color: limegreen; 
 
}

<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>

出典

2017-11-17 12:24:25 Flygenring

複数のボーダー半径を生成する方法

答えて

関連する問題