Javascript 如何生成多个边界半径

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

基于修改器，形状的边界半径应为50%（当

Math.random（）>0.5

时）、20%（当

Math.random（）>0.8

时），并默认为0%，给出一个普通正方形

但是，当您使用单击功能时，它将只提供20%半径或默认形状，而不是50%半径

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

函数makeShapeAppear（）{
var top=Math.random（）*400；
var left=Math.random（）*400；
变量宽度=（Math.random（）*100）+100；
if（Math.random（）>0.5）{
document.getElementById（“形状”）.style.borderRadius=“50%”
}否则{
document.getElementById（“形状”）.style.borderRadius=“0”；
}
if（Math.random（）>0.8）{
document.getElementById（“形状”）.style.borderRadius=“20%”
}否则{
document.getElementById（“形状”）.style.borderRadius=“0”；
}
}

完整的代码片段：

var-bestTime=0；
var start=new Date（）.getTime（）；
函数getRandomColor（）{
变量字母='0123456789ABCDEF'。拆分（''）；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
}
函数makeShapeAppear（）{
var top=Math.random（）*400；
var left=Math.random（）*400；
变量宽度=（Math.random（）*100）+100；
if（Math.random（）>0.5）{
document.getElementById（“形状”）.style.borderRadius=“50%”
}否则{
document.getElementById（“形状”）.style.borderRadius=“0”；
}
if（Math.random（）>0.8）{
document.getElementById（“形状”）.style.borderRadius=“20%”
}否则{
document.getElementById（“形状”）.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”；
开始=新日期（）.getTime（）；
}
函数appearAfterDelay（）{
setTimeout（makeShapeAppear，Math.random（）*2000）
}
appearAfterDelay（）；
document.getElementById（“形状”）.onclick=function（）{
document.getElementById（“shape”）.style.display=“无”；
var end=new Date（）.getTime（）；
var时间=（结束-开始）/1000；
document.getElementById（“timetake”）.innerHTML=timetake+“'s”；
如果（所用时间

正文{
背景颜色：天蓝；
保证金：0；
填充：0；
字体系列：无衬线；
}
#形状{
背景色：红色；
宽度：200px；
高度：200px；
显示：无；
位置：相对位置；
}
.bold{
字体大小：粗体；
}
#最好的{
颜色：柠檬黄；
字体大小：粗体；
}

Javascript测试你的反应
测试你的反应！
 尽可能快地点击正方形和圆形
您的时间：
最佳时间：

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

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

---

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

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

如图所示，主要问题在于确定右边界半径的条件语句的顺序和分隔；如果随机数超过

0.5

但未超过

0.8

，则第一个条件将半径设置为

50%

，但第二个条件将半径设置为

0

另一个小问题是重新计算要测试的随机值，这将增加获得

0

边界半径的概率

这一切都可以这样改进

完整的代码片段，还有一些其他更改（例如，仅获取一次

形状

元素，结构代码以确保可读性，可能时直接赋值，等等）：

var bestTime=0，
shape=document.getElementById（“shape”），
开始=新日期（）.getTime（）；
shape.onclick=单击；
appearAfterDelay（）；
函数appearAfterDelay（）{
setTimeout（makeShapeAppear，Math.random（）*2000）
}
函数单击（）{
var end=new Date（）.getTime（），
所用时间=（结束-开始）/1000；
shape.style.display=“无”；
如果（所用时间0.8）{
半径=“20%”
}否则，如果（系数>0.5）{
半径=“50%”
}
styles.borderRadius=半径；
开始=新日期（）.getTime（）；
}
函数getRandomColor（）{
变量字母='0123456789ABCDEF'。拆分（''）；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
}

正文{
背景颜色：天蓝；
保证金：0；
填充：0；
字体系列：无衬线；
}
#形状{
显示：无；
位置：相对位置；
}
.bold{
字体大小：粗体；
}
#最好的{
颜色：柠檬黄；
}

Javascript测试你的反应
测试你的反应！
尽可能快地点击正方形和圆形

您的时间：
最佳ti