Question

因此，对于我的最终任务，我必须使用javascript，canvas，html和css创建一个交互式网站。所以我在画布上为我的JavaScript制作了盒子，当我单击它们时我希望它们消失，但是我不知道该怎么做。有人可以帮我吗？

这是我的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Assignment 5</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <header>
      <h1>PART2 - JavaScript and The Canvas</h1>
    </header>

    <canvas id="canvas" width="1000" height="600"></canvas>

    <script src="index.js" charset="utf-8"></script>

    </body>
</html>

这是我的CSS：

html {
  font-size: 14px;
}

header {
  background-color: white;

  height: 3rem;
  text-align: center;
}

h1 {
  color: black;
}

h2 {
  color:white;
}

body{
  background-color: white;

  padding-left: 50px;
  padding-right: 50px;
}

#canvas {
  position: absolute;

  top: 8rem;             
  left: 8rem;

  width: 700px;
  height: 400px;

  background: white;

  animation: move 8s ease infinite;
}

@keyframes move {
  50% {
     transform: translate(600px, 200px);  
  }
}

这是我的JavaScript

randomBoxes();

function getRandomColor() {        
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += (Math.random() * 17 | 0).toString(17);
    }
    return color;
}


function boundryNum(theMin, theMax) {
     var theRange = (theMax - theMin) + 5;
     var randomNum = Math.floor((Math.random() * theRange) + theMin);
     return randomNum;
}


function drawbox() {
  var width = Math.floor(Math.random() * 200) +20;    
  var height = Math.floor(Math.random() * 400) + 20; 

  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  context.fillRect(boundryNum(25,800),boundryNum(25,400),width,height); 
  context.fillStyle = getRandomColor();
}

function randomBoxes(){
    var number = Math.floor(Math.random() * 5) + 1; 
    //Three to six times....
    while(number >= 0) {
        drawbox();
        number--;
    }
    setInterval(drawbox, 2000)
}

Answer 1

您没有在问题中包含任何代码，所以我已经按照我理解您问题的方式做了一些

    <div style="left: 30px; top: 30px; border-width: 3px; border-style: solid; border-color: black; width: 150px; height: 100px; display: ;" id="box1" onclick="disappear()">
       <h3>Click me</h3>
    </div>
<script type="text/javascript">
  function disappear() {
    document.getElementById("box1").style.display = "none"  ;
  }
</script>

在javascript中单击时如何使框消失？

1 个答案: