创建一个在 javascript 中弹出然后消失的 Div答案

【问题标题】：Creating a Div that pops and then disppear in javascript创建一个在 javascript 中弹出然后消失的 Div
【发布时间】：2017-06-03 19:08:00
【问题描述】：

我正在尝试用 javascript 编写一段代码，在随机位置显示一个 div，然后在 1000 毫秒后将其涂黑并等待用户点击。我的问题是使它变黑（以//开头的行）。你能解释一下这有什么问题吗？

 <style type="text/css">
    #test {
    position:absolute;
    width:40px;
    height:40px;
    background-color:#d2fcd9;
}

  </style>

  <title></title>

<script type="text/javascript">//<![CDATA[
$(function(){
$('#test').click(function() {
    var docHeight = $(document).height(),
        docWidth = $(document).width(),
        $div = $('#test'),
        divWidth = $div.width(),
        divHeight = $div.height(),
        heightMax = docHeight - divHeight,
        widthMax = docWidth - divWidth;

    $div.css({
        left: Math.floor( Math.random() * widthMax ),
        top: Math.floor( Math.random() * heightMax ),



    });

    //setTimeout(function() {    $div.css({background-color: '#000000'  }); },          300);



});
});//]]> 

</script>

</head>

<body bgcolor="#000000">
  <div id="test" style="left: 1168px; top: 222px;"></div>

【问题讨论】：

在 "background-color" 上尝试双引号 setTimeout(function() { $div.css({background-color: '#000000' }); }, 300);
谢谢！这行得通。但我无法更改下一轮的背景颜色 - 单击 div 后，我想以原始颜色再次查看它。
检查我的答案
我试过了。正如我写的那样，它在第一轮之后就可以工作 - 如果我点击现在黑色的 div 什么都不会发生。

标签： javascript html random

【解决方案1】：

我建议使用切换开关。写 $('#test').toggle();确保以 div id 为目标。这将在第一次单击时添加并在第二次单击时删除。此外，您可以将时间设置为您认为合适的任何时间。 http://api.jquery.com/toggle/。

【讨论】：

谢谢！它可以工作..但我需要在它首先出现一段时间后切换 div - 否则 div 首先显示为黑色然后是明亮的（与我需要的相反）。我该怎么做？
你可以在toggle里面放一个数字，在这个例子中是toggle (1000)：
似乎在 dic 消失后我无法点击它 - 只要我及时抓住它就会重新出现.. 我想在它已经黑色之后点击它。
执行toggleClass 并将一个类添加到div。 api.jquery.com/toggleclass。如果您正在寻找，这将打开和关闭黑色。
你是不是说这个：setTimeout(function() { $('#test').toggleClass( "background-color" ); }, 1000);此更改对我不起作用。

【解决方案2】：

<style type="text/css">
    #test {
    position:absolute;
    width:40px;
    height:40px;
    background-color:#d2fcd9;
}

  </style>

  <title></title>

<script type="text/javascript">//<![CDATA[
$(function(){
$('#test').click(function() {
    var docHeight = $(document).height(),
        docWidth = $(document).width(),
        $div = $('#test'),
        divWidth = $div.width(),
        divHeight = $div.height(),
        heightMax = docHeight - divHeight,
        widthMax = docWidth - divWidth;

    $div.css({
        left: Math.floor( Math.random() * widthMax ),
        top: Math.floor( Math.random() * heightMax ),



    });



var color =  $div.css("background-color");
if(color === "rgba(0, 0, 0, 0)"){
color = "#d2fcd9;"
}else{
color = "rgba(0, 0, 0, 0)";
}
var timer = setTimeout(function() {    $div.css({"background-color": color  }); 
 clearTimeout(timer);

 },          300);



});
});//]]> 

</script>

</head>

<body bgcolor="#000000">
  <div id="test" style="left: 1168px; top: 222px;"></div>

使用 if-else 检查来切换颜色并在“背景颜色”上使用双引号也可以清除 setTimeout 中的超时计时器

【讨论】：

它在第一轮之后就可以工作 - 如果我点击现在黑色的 div 什么都没有发生。