html 显示状态条,HTML5 圆环形分步骤进度显示条

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

(function() {

var canvasElem = document.getElementById("circularProgressStepCanvas");

var totalInd = document.getElementById("tInd");

var nowInd = document.getElementById("nInd");

var wrap = document.getElementById("progressWrapper");

var paging = document.getElementById("paging");

var arrowL = document.getElementById("arrowL");

var arrowR = document.getElementById("arrowR");

var textTween = {

value: 0

};

window.addEventListener("resize", resizeHandler);

arrowR.addEventListener("click", goNext);

arrowL.addEventListener("click", goPrev);

var Controls = function() {

this.mouseEnabled = true;

this.steps = 10;

this.emptyColor = "#393939"

this.fillColor = "#FF592F"

this.emptyStroke = 3;

this.fillStroke = 4;

this.dotRadius = 8;

this.reset = function() {

circular.reset();

}

};

var settings = new Controls();

var themes = {

dotsNum: settings.steps,

dotRadius: settings.dotRadius,

mouseInteraction: settings.mouseEnabled,

stepCallback: onStep,

emptyColor: settings.emptyColor,

fillColor: settings.fillColor,

emptyStroke: settings.emptyStroke,

fillStroke: settings.fillStroke,

dotRadius: settings.dotRadius

};

circular = new CircularProgressStep(canvasElem);

circular.setup(themes);

//

var gui = new dat.GUI();

gui.add(settings, 'mouseEnabled').onChange(onMouseEnabledChanged);

gui.add(settings, 'steps', 1, 20).step(1).onChange(onSettingsChanged);

gui.add(settings, "emptyStroke").onChange(onSettingsChanged);

gui.add(settings, "fillStroke").onChange(onSettingsChanged);

gui.add(settings, "dotRadius").onChange(onSettingsChanged);

gui.addColor(settings, "emptyColor").onChange(onSettingsChanged);

gui.addColor(settings, "fillColor").onChange(onSettingsChanged);

gui.add(settings, "reset");

//

setIndicatorTexts();

function onMouseEnabledChanged() {

circular.mouseEnabled(settings.mouseEnabled);

settings.mouseEnabled ? paging.style.display = "none" : paging.style.display = "block";

}

function onSettingsChanged() {

circular.setup({

dotsNum: settings.steps,

emptyColor: settings.emptyColor,

fillColor: settings.fillColor,

emptyStroke: settings.emptyStroke,

fillStroke: settings.fillStroke,

dotRadius: settings.dotRadius

});

setIndicatorTexts();

}

function setIndicatorTexts() {

totalInd.innerText = totalInd.textContent = settings.steps + "";

}

function onStep(step) {

//tween indicator value

var time = circular.duration * (Math.abs(textTween.value - step));

TweenMax.to(textTween, time, {

value: step,

ease: Power2.easeInOut,

onUpdate: function() {

nowInd.innerText = nowInd.textContent = parseInt(textTween.value) + "";

}

})

}

var prevWidth = 0;

function resizeHandler() {

if (wrap.offsetWidth != prevWidth) {

//empty to change nothing

circular.setup();

}

prevWidth = wrap.offsetWidth;

}

function goNext(e) {

circular.next();

}

function goPrev(e) {

circular.prev();

}

}());