有人可以帮我吗?我有一个进度条(HTML5),还有一些CSS转换。
但是该转换不适用于Mozilla,仅适用于Google Chrome。
window.onload = function(){
//Id único do cliente;
const taxvat = 1; //Valor mocado -> real: ..value, val(), innerText ...
customerIdentifier(taxvat);
//Função responsável pela triagem dos clientes.
function customerIdentifier(taxvat){
switch(taxvat){
case 1:
var categoriesClient = [
{
date: 'Janeiro',
categories: [
{
nameCategory: 'Água', // Nome do produto
currentValue: '1000', // Valor Atual
targetValue: '2000' // Meta
}
]
},
{
date: 'Fevereiro',
categories: [{
nameCategory: 'Suco',
currentValue: '1548',
targetValue: '9000'
}]
},
{
date: 'Março',
categories: [{
nameCategory: 'Cerveja',
currentValue: '5000',
targetValue: '6000'
}]
}
];
selectGenerator(categoriesClient);
break;
default:
console.warn('None client ID detected!');
}
}
//Função responsável por gerar todos os gráficos primários
function selectGenerator(categories){
var rootElement = document.getElementById('root-graphs');
var selectPeriod = document.createElement('select');
selectPeriod.setAttribute('id', 'planning-period');
rootElement.appendChild(selectPeriod);
for(var i = 0; i < categories.length; i++){
var optionPeriod = document.createElement('option');
optionPeriod.setAttribute('value', categories[i]['date']);
optionPeriod.classList.add('planning-option');
var textPeriod = document.createTextNode(categories[i]['date']);
optionPeriod.appendChild(textPeriod);
document.getElementById('planning-period').appendChild(optionPeriod);
}
listenerEventOption(categories);
}
//Função responsável por monitorar eventos de mudanças no select
function listenerEventOption(categories){
var planningOptions = document.getElementById('planning-period');
planningOptions.addEventListener('change', function(event){
categoriesGraphGenerator(categories, event.target.value);
});
starterGraphs(categories);
}
//Função responsável por gerar os gráficos das categorias
function categoriesGraphGenerator(categories, date){
var rootElement = document.getElementById('root-graphs');
var sectionCategoryGraphs = document.createElement('article');
var graphCategory = document.getElementsByClassName('graph-categories');
sectionCategoryGraphs.classList.add('graph-categories');
if(graphCategory.length){
for(var i = 0; i < graphCategory.length; i++){
graphCategory[i].remove();
};
}
rootElement.appendChild(sectionCategoryGraphs);
for(var i = 0; i < categories.length; i++){
if(categories[i]['date'] === date){
var graphs = categories[i]['categories'];
break;
}
}
for(var i = 0; i < graphs.length; i++){
var containerProgressBar = document.createElement('div');
var circleProgressBar = document.createElement('div');
var progressBar = document.createElement('progress');
var currentValue = document.createElement('div');
var nameCategoryProgressBar = document.createElement('div');
containerProgressBar.classList.add('individual-container-progressbar');
nameCategoryProgressBar.classList.add('name-category-progress-bar');
currentValue.classList.add('current-value-progress-bar');
circleProgressBar.classList.add('circle-progress-bar');
progressBar.classList.add('progressbar-category');
progressBar.setAttribute('value', 0);
progressBar.setAttribute('max', 100);
progressBar.setAttribute('style', 'background-color:#0b366f;');
nameCategoryProgressBar.innerHTML = `Volume de ${graphs[i]['nameCategory']}`;
circleProgressBar.innerHTML = `META <br/> ${graphs[i]['targetValue']} HL`;
currentValue.innerHTML = `<span>Volume atual: </span> ${graphs[i]['currentValue']} HL`;
containerProgressBar.appendChild(progressBar);
containerProgressBar.appendChild(circleProgressBar);
containerProgressBar.appendChild(currentValue);
containerProgressBar.appendChild(nameCategoryProgressBar);
sectionCategoryGraphs.appendChild(containerProgressBar);
}
setTimeout(function(){
for(var i = 0; i < graphs.length; i++){
const currentValue = graphs[i]['currentValue'];
const targetValue = graphs[i]['targetValue'];
const goalValue = Math.round((currentValue * 100)/targetValue);
document.getElementsByClassName('progressbar-category')[i].value = goalValue;
document.getElementsByClassName('progressbar-category')[i].classList.add('active');
}
}, 50);
}
//Função responsável por iniciar os gráficos no primeiro load.
function starterGraphs(categories){
var selectChildNodes = document.getElementById('root-graphs').childNodes;
if(selectChildNodes.length === 1){
for(var i = 0; i < categories.length; i++){
categoriesGraphGenerator(categories, categories[i]['date']);
return true;
}
}
return false;
}
}
.graph-categories{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.current-value-progress-bar{
position: absolute;
top: 0;
right: 0;
}
.name-category-progress-bar{
position: absolute;
top: 0;
left: 0;
}
.individual-container-progressbar{
width: 49%;
max-width: 428px;
position: relative;
}
.circle-progress-bar{
width: 140px;
height: 140px;
border: 2px solid #0b366f;
background-color: #0b366f;
border-radius: 50%;
color: #fff;
position: absolute;
top: 15px;
left: -130px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.progressbar-category{
height: 70px;
width: 100%;
max-width: 428px;
margin: 50px 0;
}
progress::-webkit-progress-bar {
background: #fff;
border: solid 3px #0b366f;
padding: 0;
}
progress::-webkit-progress-value {
background: #0b366f;
-webkit-transition : width .5s ease;
-moz-transition : width .5s ease;
-o-transition : width .5s ease;
transition : width .5s ease;
}
<section id="root-graphs"></section>
请参见上面的代码,并在select内更改选项。您将看到过渡效果。但是在mozilla中,不会应用此效果。
谢谢! ;)
我通过替换为2解决了这个问题。我使用了最里面的“宽度”,就好像它是进度值一样。现在,它可以在所有浏览器上完美运行。
尤其是我无法解决供应商前缀的问题。