我需要让我的按钮与Javascript交互这个蚀刻草图

时间：2015-08-14 13:31:02

标签： javascript jquery html css

我试图让我的按钮按照他们通过Javascript说的方式工作。我似乎无法想出一个清除网格和启动新游戏的功能（这将允许程序要求用户输入他们想要制作网格的新尺寸，将其带回默认大小（16x16），或者从黑色改变颜色。最后，为什么我似乎无法改变桌子的高度。我可以改变宽度，但桌子一直到底部屏幕。有没有办法将它压缩成正方形。

http://fiddle.jshell.net/bklynbest/6f68qodf/4/

＆＃13;
＆＃13; 
$(document).ready(function() {
  var t = $('<table/>'),
    r = $('<tr/>'),
    x = 16,
    y = 16;
  for (var i = 1; i <= (x * y); ++i) {
    if (i % y === 0 && t.append(r)) r = $('<tr/>');
    r.append($('<td/>'));
  }
  $('body').append(t);
  $('td').hover(function() {
    $(this).css("background-color", "black");
  });
});
＆＃13; 
body {
  margin: 0;
}
table {
  background-color: gray;
  width: 100vmin;
  height: 100vmin;
  border-collapse: collapse;
}
h1 {
  padding: 1%;
  background-color: red;
  font-family: Cursive;
  color: yellow;
  width: 90%;
  position: relative;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head></head>
<title>Etch-A-Sketch</title>

<body>
  <h1 align="center"> My Etch-a-Sketch game</h1>

  <div class="navbar">
    <button class="normal">Default</button>
    <button class="random">Random Color</button>
    <button class="opacity">Opacity Color</button>
    <button class="clear">New Game/Clear</button>
  </div>
  <table>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

我在这里更新了你的jsFiddle：http://fiddle.jshell.net/6f68qodf/7/

的jQuery 

ENTRYPOINT ["java", "-Xmx$memory", "-jar", "helloworld.jar"]

我没有编写不透明度按钮，因为我不确定你想用它做什么:)。但个人$(document).ready(function () { var colours = ["red", "blue", "green", "purple", "black", "white"]; var colour = "black"; var t = $('<table/>'), r = $('<tr/>'), x = 16, y = 16; for (var i = 1; i <= (x * y); ++i) { if (i % y === 0 && t.append(r)) r = $('<tr/>'); r.append($('<td/>')); } $('body').append(t); $('td').hover(function () { $(this).css("background-color", colour); }); $('.clear').on('click', function () { $('td').css("background-color", "grey"); }); $('.random').on('click', function () { colour = colours[Math.floor((Math.random() * colours.length))]; console.log(colour); }); $('.normal').on('click', function () { colour = "black"; }); }); 对于这个canvas来说是一个更好的选择，我希望我的代码会有所帮助。

答案 1 :(得分：0)

要获取运行JavaScript的按钮，您需要为每个<button>元素添加“click”事件的事件侦听器。您可以通过以下几种方式完成此操作：

1）在按钮元素上使用onclick属性。这是一个简单的例子：

function buttonClicked(){
  alert("Button was clicked!");
}
<button onclick="buttonClicked()">My Button</button>

2）为按钮点击创建一个事件监听器：

var myButton = document.getElementById("my_button");
myButton.addEventListener("click", function(e){
  alert("You clicked my button!");
});
<button id="my_button">My Button</button>

以下是a link有关点击事件的更多信息。

至于你的身高问题，你可以在CSS的桌面上设置height: 100vmin;。这相当于说：“将<table>的高度设置为100％的大小，即窗口的高度或宽度。”如果你真的想使用vmin，这里的a link有一些很好的信息。否则，您可能应该使用不同的CSS单位作为表格的高度。请点击此处查看list of CSS units。

相关问题
最新问题