Question

我正在尝试使用JS创建游戏，希望用户可以通过单击+或-按钮来改变球的速度。

我不确定如何执行此操作，这是到目前为止我尝试过的操作：

var dxoriginal = 6;
var dyoriginal = -6;

document.getElementById("speed").innerHTML = dxoriginal;

* { padding: 0; margin: 0; }
    	canvas { background: #eee; display: block; margin: 0 auto; }

		.button5 {
		  background-color: white;
		  color: black;
		  border: 2px solid #555555;
		  width: 20px;
		  float: left;

		  }

		 .button5:hover {
		  background-color: #555555;
		  color: white;
		}

<div style="float:left; margin-left:10px;" id="speed">Speed</div>
<br />
<button class="button button5" value="undefined">-</button>
<button class="button button5" value="undefined">+</button>

这确实显示了游戏设置的当前速度，但是我不知道如何根据我创建的按钮更改游戏速度。

预先感谢您的帮助

Answer 1

您可以将onclick属性添加到按钮。在onclick属性中，可以定义单击按钮时要调用的函数。在下面的示例中，我将+按钮设置为调用add()函数，并将-按钮设置为调用subtract()函数。

这两个函数执行相似的操作，一个函数加dxoriginal的值，另一个则减去1。一旦他们计算了输出，便使用.textContent将结果添加到屏幕上（这与.innerHTML类似，但严格来说是针对文本的。）

请参见下面的工作示例：

var dxoriginal = 6;
var dyoriginal = -6;
var speedElem = document.getElementById("speed");
function subtract() {
  dxoriginal--; // dxoriginal = dxoriginal - 1
  speedElem.textContent = dxoriginal;
}

function add() {
   dxoriginal++; // dxoriginal = dxoriginal + 1
   speedElem.textContent = dxoriginal;
}


speedElem.textContent = dxoriginal;

* {
  padding: 0;
  margin: 0;
}

.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
  width: 20px;
  float: left;
}

.button5:hover {
  background-color: #555555;
  color: white;
}

<div style="float:left; margin-left:10px;" id="speed">Speed</div>
<br />
<button class="button button5" onclick="subtract()" >-</button>
<button class="button button5" onclick="add()">+</button>

Answer 2

向每个按钮添加#select betwen start/end datetime and only columns A,C print(df.loc['20130102':'20130104',['A','C']]) A C 2013-01-02 0.719469 0.980764 2013-01-03 0.480932 0.343178 2013-01-04 0.438572 0.398044 #select only 20130102, 20130104 index and columns between A and C print(df.loc[pd.to_datetime(['20130102','20130104']),'A':'C']) A B C 2013-01-02 0.719469 0.423106 0.980764 2013-01-04 0.438572 0.059678 0.398044属性：

trees = dict()
trees["A1"] = random.randint(…)
trees["A2"] = random.randint(…)
…
Field = "A3"
if trees[Field] > 0:
    …

onclick

var dxoriginal = 6;
var dyoriginal = -6;

function inc() {
  dxoriginal += 1; // change the 1 however you want
  document.getElementById("speed").innerHTML = dxoriginal;
}

function dec() {
  dxoriginal -= 1; // change the 1 however you want
  document.getElementById("speed").innerHTML = dxoriginal;
}

Answer 3

要首先更改该值，您必须获取元素，然后更改该值。您已成功访问该元素。您必须使用点击事件处理功能。

var speedVar=document.getElementById("speed").innerHTML;

speedVar=dxoriginal;
fuction decreseVal()
{
 dxoriginal=dxoriginal-1;    
 speedVar=dxoriginal-1;
}

<button  onclick="decresVal()"class="button button5" value="undefined">-</button>

Answer 4

混合HTML和JS

您应该养成not mixing you HTML and JS的好习惯。尽量不要使用此：

相反，请使用：

char

增加和减少速度

然后您可以执行以下操作：

private void initPanels ()
    {
        this.titlePanel.add(this.title);

        this.bookInputPanel.add(bookTitle);
        this.bookInputPanel.add(bookInput);

        this.authorInputPanel.add(by);
        this.authorInputPanel.add(authorInput);
        this.authorInputPanel.add(this.authorsTable);

        this.buttonsPanel.add(confirm);

        this.contentPanel.setLayout(new BoxLayout(this.contentPanel,     BoxLayout.Y_AXIS));
        this.contentPanel.add(bookInputPanel);
        this.contentPanel.add(authorInputPanel);

        this.add(this.titlePanel, BorderLayout.NORTH);
        this.add(this.contentPanel, BorderLayout.CENTER);
        this.add(this.buttonsPanel, BorderLayout.SOUTH);
    }

<button onclick="someFunction">Do something</button>

document.getElementById('some-id').addEventListener('click', someFunction);

互动演示

我有点生气，做了一个演示：

var dxoriginal = 6;

document.getElementById('dec-btn').addEventListener('click', decreaseSpeed);
document.getElementById('inc-btn').addEventListener('click', increaseSpeed);
displaySpeed();

function decreaseSpeed() {
  dxoriginal -= 1;
  displaySpeed();
}

function increaseSpeed() {
  dxoriginal += 1;
  displaySpeed();
}

function displaySpeed() {
  document.getElementById("speed").innerHTML = dxoriginal;
}

/* Untouched CSS */*{padding:0;margin:0}canvas{background:#eee;display:block;margin:0 auto}.button5{background-color:#fff;color:#000;border:2px solid #555;width:20px;float:left}.button5:hover{background-color:#555;color:#fff}

<div style="float:left; margin-left:10px;" id="speed">Speed</div>
<br />
<button class="button button5" id="dec-btn">-</button>
<button class="button button5" id="inc-btn">+</button>

Answer 5

以这种方式尝试：

var dxoriginal = 6;
var dyoriginal = -6;
var dx = dxoriginal;

function plus(num){
  dx = dx + num;
}

function minus(num){
  dx = dx - num;
}
setInterval(function(){ document.getElementById("speed").innerHTML = dx; }, 100);

<div style="float:left; margin-left:10px;" id="speed">Speed</div>
<br />
<button class="button button5" value="undefined" onClick="minus(1)">-</button>
<button class="button button5" value="undefined" onClick="plus(1)">+</button>

根据HTML输入更改JS变量？

5 个答案:

混合HTML和JS

增加和减少速度

互动演示