我有什么似乎是一个常见但神秘的问题，至少对我来说。该页面的草稿可以找到here。期望的行为如下：HTML onfocus，onclick事件不起作用
通过执行计算并使用
调用。 amp.js的详细信息真的很长，所以我不会发布这些。 请假定所有变量都已正确声明并初始化，并且我的所有脚本都已被删除。接下来，零时的进度条和计数器：
100%
...当用户集中于改变输入参数进行新的计算：
...与：
function reset() {
"use strict";
document.getElementById('progress').value = 0;
document.getElementById('percent').innerHTML = 0;
}
准备就绪后，用户可以使用执行新计算，该计算将为进度条添加动画并显示结果。的细节：
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与
单独工作。控制台不会产生任何线索。有用的建议清单可以在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事件。
+0
你能发表一个片段吗？我猜想go = setInterval(animate, 10); amp()没有被JS引擎正确解析。 –
+0
我在这里http://codepen.io/anon/pen/emvJpB制作了你的代码的codepen。焦点和悬停状态似乎工作得很好。 –
+0
贾斯汀的codepen不适合我。 amp()未定义的错误不断增加。我正在使用最新的Chrome。 –