Question

我有一个似乎是常见但神秘的问题，至少对我而言。可以找到页面草稿here。期望的行为如下：

通过<script type="text/javascript" src="amp.js"></script>执行计算，并使用<body onload="amp()">进行调用。 amp.js的详细信息真的很长，所以我不会发布这些内容。 请假设所有变量都已正确声明和初始化，并且我的所有脚本都已完成。接下来，将进度条和计数器清零：

<progress id="progress" value="100" max="100"></progress><output class="percent" id="percent">100</output><span class="prozent">%</span>

...当用户专注于更改新计算的输入参数时：

<input type="number" name="theta0" id="theta0" value="0.1" min="0.0" max="1.6" step="0.1" onfocus="reset()">

...与<script type="text/javascript" src="../reset.js"></script>：

/*jslint browser: true, devel: true */
function reset() {
  "use strict";
  document.getElementById('progress').value = 0;
  document.getElementById('percent').innerHTML = 0;
}

准备好后，用户可以使用<input type="button" value="Evaluate" onclick="go = setInterval(animate, 10); amp()">执行新计算，该计算将为进度条设置动画并显示结果。 <script type="text/javascript" src="../animate.js"></script>的详细信息：

/*jslint browser: true, devel: true */
var go = 0;
var value = 0;
var max = 100;
function animate() {
  "use strict";
  if (value >= max) {
    clearInterval(go);
    return;
  }
  var pBar,
    percent;
  pBar = document.getElementById('progress');
  percent = document.getElementById('percent');
  value += 1;
  pBar.value = value;
  percent.innerHTML = value;
  if (value === max) {
    clearInterval(go);
  }
}

onfocus和onclick事件不起作用。 但是，使用reset单独调用animate或<body onload="">确实有效。控制台不会产生任何线索。可以找到有用的建议列表here。虽然我没有看到这种联系，但我读过有时候糟糕的CSS会导致奇怪的问题。这是我的：

input {
  background-color: snow;
  border: 1px solid darkseagreen;
  box-sizing: border-box;
  color: indigo;
  font: 1em "Computer Modern", serif;
  width: 10%;
}
input[type=number] {
  border-left-style: none;
  border-right-style: none;
  padding-left: 5px;
  vertical-align: middle;
}
input[type=number]:focus {
  background-color: white;
  border: 1px solid black;
  border-left-style: none;
  border-right-style: none;
  color: black;
  outline: none;
}
input[disabled] { background-color: lightgray }

...和...

input[type=button] {
  background-color: ghostwhite;
  background-image: linear-gradient(ghostwhite, #E0FFFF);
  border: 3px solid #4CC417;
  border-radius: 7px;
  color: indigo;
  font: 1.1em "Trebuchet MS", sans-serif;
  margin-left: 10px;
  padding: 5px;
}
input[type=button]:hover { border: 3px solid orange }
input[type=button]:focus {
  background-color: aliceblue;
  background-image: linear-gradient(#D6F5F5, ghostwhite);
  border: 3px solid fuchsia;
  color: black;
  outline: none;
}

任何见解或建议都将受到赞赏。

更新

有趣的是，可用的版本here有用。 reset没有正常工作，特别是对于用户的其他计算。另外，我需要在这些输入框中添加onchange事件。

Answer 1

问题在于：

/*jslint browser: true, devel: true */
var go = 0;
var value = 0;
var max = 100;
function animate() {
  "use strict";
  if (value >= max) {
    clearInterval(go);
    return;
  }
  var pBar,
    percent;
  pBar = document.getElementById('progress');
  percent = document.getElementById('percent');
  value += 1;
  pBar.value = value;
  percent.innerHTML = value;
  if (value === max) {
    clearInterval(go);
  }
}

pBar和percent的使用/声明会破坏脚本。 我不知道为什么。将脚本修改为：

function animate() {
  if (value >= max) {
    clearInterval(go);
    return;
  }
  value += 1;
  document.getElementById('progress').value = value;
  document.getElementById('percent').innerHTML = value;
  if (value === max) {
    clearInterval(go);
  }
}

......它有效。有关详细信息，请参阅this。

HTML onfocus，onclick事件不起作用

1 个答案: