<!DOCTYPE html>
<head>
<meta charset="UTF-8"> <!-- UTF-8 Shift_JIS -->
</head>
<body>
<progress id="bar" value="0" max="1"></progress>
<button onclick="LaunchInterval()">Progress</button>
<button onclick="ResetInterval();">Reset</button>
</body>
<script>
nIntervalMax = 5000; // ms
nIntervalDelta = 30; // ms
wBar = document.getElementById("bar");
IntervalObj = null;
function LaunchInterval() {
if (!IntervalObj) {
IntervalStart = (new Date()).getTime();
IntervalObj = setInterval(function () {
var time = (new Date()).getTime() - IntervalStart;
if (nIntervalMax <= time) {
time = nIntervalMax;
clearInterval(IntervalObj);
IntervalObj = null;
}
wBar.value = time / nIntervalMax;
}, nIntervalDelta);
}
}
function ResetInterval() {
if (IntervalObj) {
clearInterval(IntervalObj);
IntervalObj = null;
}
wBar.value = 0;
}
</script>
</html>
PCFET0NUWVBFIGh0bWw+CjxoZWFkPgogIDxtZXRhIGNoYXJzZXQ9IlVURi04Ij4gPCEtLSBVVEYtOCBTaGlmdF9KSVMgLS0+CjwvaGVhZD4KPGJvZHk+CiAgPHByb2dyZXNzIGlkPSJiYXIiIHZhbHVlPSIwIiBtYXg9IjEiPjwvcHJvZ3Jlc3M+CiAgPGJ1dHRvbiBvbmNsaWNrPSJMYXVuY2hJbnRlcnZhbCgpIj5Qcm9ncmVzczwvYnV0dG9uPgogIDxidXR0b24gb25jbGljaz0iUmVzZXRJbnRlcnZhbCgpOyI+UmVzZXQ8L2J1dHRvbj4KPC9ib2R5Pgo8c2NyaXB0PgogIG5JbnRlcnZhbE1heCA9IDUwMDA7IC8vIG1zCiAgbkludGVydmFsRGVsdGEgPSAzMDsgLy8gbXMKICB3QmFyID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoImJhciIpOwogIEludGVydmFsT2JqID0gbnVsbDsKICBmdW5jdGlvbiBMYXVuY2hJbnRlcnZhbCgpIHsKICAgIGlmICghSW50ZXJ2YWxPYmopIHsKICAgICAgSW50ZXJ2YWxTdGFydCA9IChuZXcgRGF0ZSgpKS5nZXRUaW1lKCk7CiAgICAgIEludGVydmFsT2JqID0gc2V0SW50ZXJ2YWwoZnVuY3Rpb24gKCkgewogICAgICAgIHZhciB0aW1lID0gKG5ldyBEYXRlKCkpLmdldFRpbWUoKSAtIEludGVydmFsU3RhcnQ7CiAgICAgICAgaWYgKG5JbnRlcnZhbE1heCA8PSB0aW1lKSB7CiAgICAgICAgICB0aW1lID0gbkludGVydmFsTWF4OwogICAgICAgICAgY2xlYXJJbnRlcnZhbChJbnRlcnZhbE9iaik7CiAgICAgICAgICBJbnRlcnZhbE9iaiA9IG51bGw7CiAgICAgICAgfQogICAgICAgIHdCYXIudmFsdWUgPSB0aW1lIC8gbkludGVydmFsTWF4OwogICAgICB9LCBuSW50ZXJ2YWxEZWx0YSk7CiAgICB9CiAgfQogIGZ1bmN0aW9uIFJlc2V0SW50ZXJ2YWwoKSB7CiAgICBpZiAoSW50ZXJ2YWxPYmopIHsKICAgICAgY2xlYXJJbnRlcnZhbChJbnRlcnZhbE9iaik7CiAgICAgIEludGVydmFsT2JqID0gbnVsbDsKICAgIH0KICAgIHdCYXIudmFsdWUgPSAwOwogIH0KPC9zY3JpcHQ+CjwvaHRtbD4K