JavaScript和可见性_Javascript_Html_Webpage_Hidden

JavaScript和可见性

javascript html

JavaScript和可见性,javascript,html,webpage,hidden,Javascript,Html,Webpage,Hidden,我是JavaScript新手，现在我遇到了一个问题：当我启动网页时，btn是不可见的，但我需要它在鼠标向下移动之前可见。以下是脚本： var start= false; var racket = document.getElementById("racket"); var btn = document.getElementById("btn"); btn.style.visibility = "visible"; btn.onmousedown = Start(); function Star

我是JavaScript新手，现在我遇到了一个问题：当我启动网页时，btn是不可见的，但我需要它在鼠标向下移动之前可见。以下是脚本：

var start= false;
var racket = document.getElementById("racket");
var btn = document.getElementById("btn");
btn.style.visibility = "visible";
btn.onmousedown = Start();

function Start() {
    btn.style.visibility = "hidden";
    start = true;
    document.onclick = RacketClick();
}

function RacketClick() {

}

当我启动网页时，btn被隐藏。。。你能帮我吗

UPD 1 HTML代码和CSS代码：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta charset="utf-8" />
        <title>Main</title>
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/mymain.js"></script>
    </head>
    <body>
        <div id="racket"></div>
        <div id="btn"></div>
    </body>
</html>

#racket {
    top: 100%;
    margin-top: -200px;
    left: 50%;
    margin-left: -77px;
    position: absolute;
    background-image: url('/images/racket.png');
    width: 154px;
    height: 250px;
    animation-name: racketanimation;
    animation-iteration-count: infinite;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-direction:alternate;
}

@keyframes racketanimation {
    from {
        transform: rotateX(40deg);
    }
    to {
        transform: rotateX(55deg);
    }
}

#btn {
    top: 50%;
    left: 50%;
    position: absolute;
    margin-top: -128px;
    margin-left: -128px; 
    height: 256px; 
    width: 256px;
    background-image: url('/images/playnowborder.png');
    animation-iteration-count: infinite;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-duration: 10s;
    animation-name: clicken;
    animation-timing-function: linear;
}

@keyframes clicken {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

我也是这个网站的新手！我想要你的答案，但我没有投票权……

你应该使用没有括号的函数赋值：

btn.onmousedown = Start;

否则，函数开始会在赋值时执行，您的按钮会立即隐藏。

您应该使用不带括号的函数赋值：

btn.onmousedown = Start;

否则，函数Start将在分配时执行，您的按钮将立即隐藏。

这一行是您的问题：

btn.onmousedown = Start();

您正在执行函数start，并将未定义的结果分配给btn.onmousedown。你应该：

btn.onmousedown = Start;

如果没有括号，则分配函数，而不是调用函数。

这一行是您的问题：

btn.onmousedown = Start();

您正在执行函数start，并将未定义的结果分配给btn.onmousedown。你应该：

btn.onmousedown = Start;

没有括号，分配函数，不调用函数。

你用CSS隐藏了它吗？不，我没有，我用JavaScript有问题，不是用HTML和CSSdocument。onclick=RacketClick&&btn.onmousedown=start你用CSS隐藏了它吗？不，我没有，我对JavaScript有问题，而不是HTML和CSSdocument.onclick=RacketClick&&btn.onmousedown=Start