个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 00:04:56 26 4
gpt4 key购买 nike

因此，对于我的期末作业，我必须使用 javascript、canvas、html 和 css 创建一个交互式网站。所以我在我的 Canvas 上为我的 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)
}

最佳答案

你没有在你的问题中包含任何代码所以我只是做了一些，我理解你的问题的方式

    <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 - 在javascript中单击时如何使框消失？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55767222/

26 4 0
文章推荐： html - 如何在实现中使用CSS顺序？
文章推荐： html - 如何使覆盖 iframe 的 div 在悬停时淡入淡出，使 iframe 可点击？
文章推荐： html - 如何创建从中间到边缘导航栏选定标记的边框？
文章推荐： c++ - 如何在模板类方法中将方法指针作为参数传递
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com