Question

我正在尝试在javascript中编写一个代码，该代码在随机位置显示div，然后在1000ms后将其黑屏并等待用户点击。我的问题是使它变黑（从//开始的行）。你能解释一下我的错误吗？

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

Answer 1

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

Answer 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检查来切换颜色并在＆＃34; background-color＆＃34;上使用双引号还可以在setTimeout中清除Timout计时器

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

2 个答案: