<div class="app"> <p>進捗: <button id="up">+</button> <button id="down">-</button></p> <div id="prog-bar" class="progress"> <div class="progress-bar"> </div> </div> </div>
.app { height: 500px; width: 100%; padding: 10px; background-color: white; } .progress { width: 100%; height: 30px; background-color: #F5F5F5; border-radius: 4px; box-shadow: inset 0 1px 2px rgba(0,0,0,.1); } .progress-bar { transition: width 0.5s linear; height: 100%; background-color: #337AB7; border-radius: 4px; }
var Progress = (function () { function Progress (p) { this.bar = document.querySelectorAll('#prog-bar > .progress-bar')[0]; this.p = p; this.update(); }; Progress.prototype.update = function () { this.bar.style.width = this.p + '%'; }; Progress.prototype.countup = function () { if (this.p < 100) { this.p += 10; } this.update(); }; Progress.prototype.countdown = function () { if (0 < this.p) { this.p -= 10; } this.update(); }; return Progress; }()); var up = document.getElementById('up'); var down = document.getElementById('down'); var p = new Progress(0); up.addEventListener('click', function (e) { p.countup(); }); down.addEventListener('click', function (e) { p.countdown(); });