0

Quisiera que a medida que el numero de puntos otorgados valla creciendo la fuente valla disminuyendo o aumentando

ejemplo: si esta en un rango de 1 a 999,999 la fuente aumente

si este supera los 999,999 la fuente disminuya

function myFunction() {
  
  document.getElementById("contaPuntos").innerHTML = Math.floor(Math.random() * 10000000) + 1;
}
.z1 {
  height: 159px;
}

.title-estadistica {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
}

.count-estadistica {
  font-size: 2.9em;
  margin-top: 12px;
  font-weight: 700;
}

.desc-estadistica {
  font-size: 12px;
}
<div class="row panel z1 panel" style="background: #67c2ef; border-color: #39afea; color: white">
  <div class="panel-body">
    <i class="glyphicon glyphicon-certificate icon-estadistica"></i>
    <div class="title-estadistica">Puntos Otorgados</div>
    <div class="count-estadistica" id="contaPuntos">133600<i class="glyphicon glyphicon-chevron-down"></i></div>
    <div class="desc-estadistica" id="descPuntos">Disminución del 7 %</div>
  </div>
</div>

<button onclick="myFunction()">Click me</button>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

5
  • ¿Que has intentado hasta ahora? Commented el 28 mar. 2019 a las 15:03
  • Es que no se como hacerlo con javascript porque con css solo le cambiaria la fuente pero la gracia es que no quede como que estatica sino que amedida de que el numero valla creciendo la fuente se reduzca o se maximise
    – PANGALLETA
    Commented el 28 mar. 2019 a las 15:04
  • Si no sabes javascript, deberías de aprender en vez de pedir que te lo hagan. No lo digo a malas, pero el objetivo de StackOverflow es ayudar con problemas y dudas, no hacer el trabajo. Por eso te recomiendo que mires estos enlaces:onchange, style.font. Son una parte crucial de lo que intentas hacer, si le echas un vistazo e intentas probar a ver si te sale, subelo y te ayudaremos encantados. Commented el 28 mar. 2019 a las 15:36
  • Viejo nunca dije que no sabia javascript dije que no sabia como cambiar una fuente con javascript pero con css si, pues si leiste bien el comentario lo notarias ademas no ves que estoy usan funciones de javascript como el random, ademas en la pregunta digo COMO SE MODIFICA EL TAMAÑO DE LA FUENTE CON JAVASCRIPT
    – PANGALLETA
    Commented el 28 mar. 2019 a las 15:41
  • Dices la función que te había puesto originalmente Stiven y que tu has añadido una hora despues a tu pregunta? No seas caradura. Al menos se honesto Commented el 28 mar. 2019 a las 20:12

1 respuesta 1

2

Buen día. Yo te recomiendo que lo hagas así:

<script>
function myFunction() {
  var testValue = document.getElementById("contaPuntos").innerHTML = Math.floor(Math.random() * 10000000) + 1;
}
if (testValue > '99999') {
   document.queryselector('#contaPuntos').style.fontSize = '30px';
}
if (testValue < '99999') {
   document.queryselector('#contaPuntos').style.fontSize = '1px';
}

// En caso de que necesites poner un if con igual entonces haces lo siguiente.
if (testValue == '99999') {
   document.queryselector('#contaPuntos').style.fontSize = '1px';
}
// También en caso de que necesites por ejemplo uno que sea "Si testValue es mayor o igual a 99999" sólo pones el igual después del mayor o menor.
// Mayor >
// Menor >
</script>

Anteriormente obtienes el valor depende de la fuente, según entiendo y le seteas el valor sin las comillas simples. Saludos.

7
  • Lo que quiero es que cuando el numero digamos que pase del 999999 la fuente disminuya y si esta entre el rango de 1 a 999999 aumente
    – PANGALLETA
    Commented el 28 mar. 2019 a las 15:13
  • Coloca un if. Al hacer el if tienes que decirle que si > 999999 la fuente sea de tanto tamaño y si es < 999999 tenga un tamaño de tanto. Commented el 28 mar. 2019 a las 15:15
  • No puedes dejar la respuesta de como seria Stiven Gómez
    – PANGALLETA
    Commented el 28 mar. 2019 a las 15:24
  • Listo, modificaré la respuesta entonces. Commented el 28 mar. 2019 a las 15:25
  • Gracias por tu colaboracion
    – PANGALLETA
    Commented el 28 mar. 2019 a las 15:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.