点击javascript时如何让盒子消失？

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 个解决方案

解决方案1
0 2019-04-19 20:20:40

点击javascript时如何让盒子消失？

问题描述

1 个解决方案

解决方案1 0 2019-04-19 20:20:40

解决方案1
0 2019-04-19 20:20:40