Javascript Can'；我无法得到显示的形状_Javascript_Css

Javascript Can'；我无法得到显示的形状

javascript css

Javascript Can'；我无法得到显示的形状,javascript,css,Javascript,Css,我目前正在用Javascript创建一个项目，旨在成为一种“反应游戏”。按下“开始”按钮后，屏幕上将根据颜色、大小、位置（边距）和形状（框或圆）在某些辅助方法决定的情况下弹出一个形状。目标是尽快单击形状，然后页面将打印所花费的时间。然后将显示一个新形状，并重复该循环然而，一旦我按下“开始”按钮，屏幕上就不会出现任何东西。这个形状不见了有人能帮我把形状弄出来吗？我认为这与样式表或其他东西有关，但我不太确定反应测试仪测试你的反应！尽可能快地点击方框和圆圈开始！ var beginTi

我目前正在用Javascript创建一个项目，旨在成为一种“反应游戏”。按下“开始”按钮后，屏幕上将根据颜色、大小、位置（边距）和形状（框或圆）在某些辅助方法决定的情况下弹出一个形状。目标是尽快单击形状，然后页面将打印所花费的时间。然后将显示一个新形状，并重复该循环

然而，一旦我按下“开始”按钮，屏幕上就不会出现任何东西。这个形状不见了

有人能帮我把形状弄出来吗？我认为这与样式表或其他东西有关，但我不太确定


反应测试仪
测试你的反应！
尽可能快地点击方框和圆圈
开始！
var beginTime=0.0//默认值
document.getElementById（“开始按钮”）.onclick=function（）{
document.getElementById（“开始按钮”）.style.display=“无”；
新闻形态（）；
}
函数decideShape（）{//在圆形或长方体（正方形）之间选择
var x=Math.random（）；
如果（x<0.5）{
返回（“圈”）；
}否则{
报税表（“方框”）；
}
}
函数decideColor（）{//在8种颜色的列表中进行选择
var x=Math.random（）；
如果（x<0.125）{
退货（“红色”）；
}否则如果（x<0.25）{
返回（“蓝色”）；
}否则如果（x<0.375）{
返回（“黄色”）；
}否则如果（x<0.5）{
返回（“绿色”）；
}否则如果（x<0.625）{
退货（“紫色”）；
}否则如果（x<0.75）{
返回（“黑色”）；
}否则如果（x<0.875）{
返回（“灰色”）；
}否则{
返回（“#00FFFF”）；//青色
}
}
函数decideSize（）{//自解释
var value；//圆-半径，长方体-边长的一半
value=Math.floor（Math.random（）*75）+25；//直径/边长设置为介于50和199之间
返回值；
}
函数decideMargin（size）{//取决于形状的大小
var值；
值=数学地板（数学随机（）*（400-大小））+大小；
返回值；
}
document.getElementById（“当前形状”）.onclick=function（）{
新闻形态（）；
}
函数beginTimer（）{
var bT=新日期（）；
开始时间=bT；
}
函数stopTimer（）{
var endTime=新日期（）；
var elapsedTime=结束时间-开始时间；
document.getElementById（“记录的时间”）.innerHTML=“您的时间：”+（elapsedTime/1000.0）+“秒”；
}
函数newShape（）{
如果（开始时间！=0.0）{
停止计时器（）；
}
var nextShape=decideShape（）；
var nextColor=分色（）；
var nextSize=decideSize（）；
var nextLeftMargin=分贝马克（nextSize）；
var nextTopMargin=decideMargin（nextSize）；
document.getElementById（“当前形状”）.style.backgroundColor=nextColor；
document.getElementById（“当前形状”）.style.marginLeft=nextLeftMargin；
document.getElementById（“当前形状”）.style.marginTop=nextTopMargin；
如果（nextShape=“圆圈”）{
document.getElementById（“当前形状”）.style.borderRadius=50；
}else{//nextShape=“box”
document.getElementById（“当前形状”）.style.borderRadius=0；
}
beginTimer（）；
}

您需要为“当前形状”div添加宽度和高度

您需要向“当前形状”div添加宽度和高度

请包括我们能够测试您的程序所需的所有代码。（所以包括那些你已经删除的“helper方法”）你在浏览器的开发控制台中有任何JS错误吗？请包括我们能够测试你的程序所需的所有代码。（包括那些你已经删除的“helper方法”）你在浏览器的开发控制台中有JS错误吗？

<html>

<head>

    <title>Reaction Tester</title>

</head>

<body>

    <h1>Test Your Reactions!</h1>

    <p>Click on the boxes and circles as quickly as you can!</p>

    <h2 id="recorded-time"></h2>

    <button id="start-button">Begin!</button>

    <div id="current-shape"></div>

    <script type="text/javascript">

        var beginTime = 0.0; //default value

        document.getElementById("start-button").onclick = function() {
            document.getElementById("start-button").style.display = "none";
            newShape();     
        }

        function decideShape() { //chooses between a circle or box(square)
            var x = Math.random();
            if(x < 0.5) {
                return("circle");
            } else {
                return("box");
            }
        }

        function decideColor() { //chooses between a list of 8 colors
            var x = Math.random();
            if(x < 0.125) {
                return("red");
            } else if(x < 0.25) {
                return("blue");
            } else if(x < 0.375) {
                return("yellow");
            } else if(x < 0.5) {
                return("green");
            } else if(x < 0.625) {
                return("purple");
            } else if(x < 0.75) {
                return("black");
            } else if(x < 0.875) {
                return("gray");
            } else {
                return("#00FFFF"); //cyan
            }
        }

        function decideSize() { //self explanatory
            var value; //circle - radius, box - half of side length

            value = Math.floor(Math.random() * 75) + 25; //diameter/side length set to be between 50 and 199

            return value;
        }

        function decideMargin(size) { //depends on size of shape
            var value;
            value = Math.floor(Math.random()*(400 - size)) + size;
            return value;
        }

        document.getElementById("current-shape").onclick = function() {
            newShape();
        }

        function beginTimer() {
            var bT = new Date();
            beginTime = bT;
        }

        function stopTimer() {
            var endTime = new Date();
            var elapsedTime = endTime - beginTime;
            document.getElementById("recorded-time").innerHTML = "Your time: " + (elapsedTime/1000.0) + " seconds";
        }

        function newShape() {
            if(beginTime != 0.0) {
                stopTimer();
            }

            var nextShape = decideShape();
            var nextColor = decideColor();
            var nextSize = decideSize();
            var nextLeftMargin = decideMargin(nextSize);
            var nextTopMargin = decideMargin(nextSize);

            document.getElementById("current-shape").style.backgroundColor = nextColor;
            document.getElementById("current-shape").style.marginLeft = nextLeftMargin;
            document.getElementById("current-shape").style.marginTop = nextTopMargin;

            if(nextShape = "circle") {
                document.getElementById("current-shape").style.borderRadius = 50;
            } else { //nextShape = "box"
                document.getElementById("current-shape").style.borderRadius = 0;
            }

            beginTimer();

        }

    </script>

</body>

</html>

 <div id="current-shape" style="width:100px;height:100px"></div>

  var nextShape = "circle";
  var nextColor = "red";