-5
votes

Comment résoudre la perçoite de continuité des intrants

Je travaille sur une calculatrice et il faut qu'il existe quatre entrées où le maximum pour chacun est 100 et la somme des quatre est toujours égale à 100. La meilleure façon d'accomplir cela pour une bonne UX est que le curseur est déplacé dans le curseur juste avant de pouvoir progresser. Si un curseur est transféré le curseur juste après qu'il se déplace s'il ne s'agit pas déjà de zéro.

J'ai essayé de faire correspondre les noms d'entrée et d'ajouter des formules. Je ne connais vraiment pas la meilleure façon de m'approcher.

javascript html

6 commentaires

Qu'avez-vous fait jusqu'à présent et quelle est la séquence?

Veuillez fournir votre état actuel concernant le code, les instantanés, etc.

Je n'ai aucune idée de ce que je fais. Je travaille sur cela au cours des 3 dernières semaines.

@Joeneumanne S'il vous plaît voir ici: Stackoverflow.com/help/how-to-ask surtout la section "Aidez les autres à reproduire Le problème "et dans ce cadre ( Stackoverflow.com/help/mcve )

D'accord, je le lis. Cela me fait comprendre que je n'aurais pas dû mettre mon code comme cela n'aidera pas à expliquer le problème.

Que signifie hors du sujet. Comment est-ce que cet article est différent de celui de la mienne? Stackoverflow.com/Questtions/469357 / ...

5 Réponses :

1
votes

Je pense que cela fonctionnera pour vous. Faites-moi savoir.

Certaines notes: p>

Supprimez vos attributs d'identification car les doublons ne sont pas autorisés dans HTML LI>
supprimé BR étiquette et est allé avec CSS (beaucoup mieux). Li>
Si vous dépassez 100, la boucle réduit simplement le plus haut niveau suivant dans un modèle Round Robin de 1 jusqu'à ce que vous ayez 100 ou moins. Li>
ajusté, maintenant, il sera toujours 100. LI>

a fait un grand rangement du code. LI> ul>

<div class="hThree">
  <input type="range" orient="vertical" value="0" class="hrange" min="0" max="100" />
  <input type="range" orient="vertical" value="0" class="hrange" min="0" max="100" />
  <input type="range" orient="vertical" value="0" class="hrange" min="0" max="100" />
  <input type="range" orient="vertical" value="0" class="hrange" min="0" max="100" />
  <input id="amount" type="number" value="100" min="0" max="100" />
</div>

9 commentaires

C'est vraiment un grand bibberty. L'objectif est de l'avoir toujours égal à 100. Jamais inférieur ou supérieur à 100. Je pense que c'est si proche. Si vous dépassez 100, la boucle réduit le plus haut niveau précédent dans un modèle Round Robin de 1 jusqu'à ce que vous soyez 100 et si cela devient inférieur à 100, la boucle doit augmenter le prochain modèle Round Robin de 1 jusqu'à ce que vous soyez à 100.

Maintenant, le code sera toujours 100.

Comment une personne aurait-elle une première entrée et la troisième entrée à égaler 50? Lorsque la première entrée est déplacée uniquement, la seconde entrée doit descendre jusqu'à ce qu'il atteigne 0 puis la troisième entrée et ainsi de suite. Si la première entrée est déplacée, alors l'entrée précédente et seule l'entrée 4 se déplace.

Ok, ils sont vraiment des paires. Ne pensez pas à eux comme 1 et 3, pensez groupe 1 et groupe 2. Vous devez modifier le code pour prendre le nom de la classe de groupe.

Mon conseil est maintenant de vraiment s'asseoir et documenter le contrôle, ce qu'il devrait faire dans chaque circonstance. Cela aidera vraiment à obtenir le code serré et à faire ce dont vous avez besoin. Je vais déplacer ce code sur un repl. Et post lien. Parce que je pense que la question elle-même est répondue. Maintenant, vous avez juste besoin d'aide. Ce n'est pas mieux fait ici.

Ont déplacé le code ici: repl.it/@paulthomas1/comminationsLiderControl

J'apprécie vraiment toute votre aide Bibberty. Je pense que le gif d'animation fait un très bon travail documentant le contrôle et ce qu'il devrait faire dans chaque circonstance. Y a-t-il une circonstance qu'il ne tient pas compte?

Si vous regardez le gif, il semble choisir un curseur de manière aléatoire.

Si vous regardez le gif de plus près. Lorsque n'importe quel curseur est déplacé dans le curseur, juste avant de passer. Si un curseur est transféré le curseur juste après qu'il se déplace si ce n'est pas déjà à zéro.

0
votes

<div class="hThree">
  <input type="range" orient="vertical" value="100" class="hrange" min="0" max="100" />
  <input type="range" orient="vertical" value="0" class="hrange" min="0" max="100" />
  <input type="range" orient="vertical" value="0" class="hrange" min="0" max="100" />
  <input type="range" orient="vertical" value="0" class="hrange" min="0" max="100" />
  <input id="amount" type="number" value="100" min="0" max="100" />
</div>

0 commentaires

0
votes

<!DOCTYPE html>
<html>
<head>
  <title>Sliders</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
</head>

<body>
  <div id="Sliders">
    <div>
  <input type="range" id="0" name="1"
         min="0" max="100" v-model.number="countity_sliders[0]" step="1" @input="reorder">
  <label for="volume">First: {{ countity_sliders[0] }}</label>
</div>

<div>
  <input type="range" id="1" name="2"
         min="0" max="100" v-model.number="countity_sliders[1]" step="1" @input="reorder">
  <label for="volume">Second: {{ countity_sliders[1] }}</label>
</div>
<div>
  <input type="range" id="2" name="3"
         min="0" max="100" v-model.number="countity_sliders[2]" step="1" @input="reorder">
  <label for="volume">Third: {{ countity_sliders[2] }}</label>
</div>
<div>
  <input type="range" id="3" name="4"
         min="0" max="100" v-model.number="countity_sliders[3]" step="1" @input="reorder">
  <label for="volume">Fourth: {{ countity_sliders[3] }}</label>
</div>
<div>
  <hr>
  summ: {{ summa }} <br>
</div>
  </div>

  <script>
    var app = new Vue({
      el: '#Sliders',
      data: {
        countity_sliders: [100,0,0,0],
        sliders_order: [0,1,2,3],
        summa: 0
      },
      methods: {
        reorder($element) {
          this.sliders_order=[parseInt($element.target.id)].concat(this.sliders_order);
          this.sliders_order = Array.from(new Set(this.sliders_order));
          this.check_summ_rule()

        },
        check_summ_rule() {
          this.summa = (this.countity_sliders[0] + this.countity_sliders[1]+ this.countity_sliders[2] + this.countity_sliders[3])
          if (this.summa > 100) {
            if (this.countity_sliders[this.sliders_order[1]]>0) {
              this.countity_sliders[this.sliders_order[1]] = this.countity_sliders[this.sliders_order[1]]-(this.summa -100);
            } else if (this.countity_sliders[this.sliders_order[2]]>0) {
              this.countity_sliders[this.sliders_order[2]] = this.countity_sliders[this.sliders_order[2]]-(this.summa -100);
            } else if (this.countity_sliders[this.sliders_order[3]]>0) {
              this.countity_sliders[this.sliders_order[3]] = this.countity_sliders[this.sliders_order[3]]-(this.summa -100);
            }
          }
          this.summa = (this.countity_sliders[0] + this.countity_sliders[1]+ this.countity_sliders[2] + this.countity_sliders[3])
          if (this.summa < 100) {
            if (this.countity_sliders[this.sliders_order[1]]>-1) {
              this.countity_sliders[this.sliders_order[1]] = this.countity_sliders[this.sliders_order[1]]+(100 - this.summa);
            } else if (this.countity_sliders[this.sliders_order[2]]>-1) {
              this.countity_sliders[this.sliders_order[2]] = this.countity_sliders[this.sliders_order[2]]+(100 - this.summa);
            } else if (this.countity_sliders[this.sliders_order[3]]>-1) {
              this.countity_sliders[this.sliders_order[3]] = this.countity_sliders[this.sliders_order[3]]+(100 - this.summa);
            }
          }
          if (this.countity_sliders[0] < 0 ) this.countity_sliders[0] = 0
          if (this.countity_sliders[1] < 0 ) this.countity_sliders[1] = 0
          if (this.countity_sliders[2] < 0 ) this.countity_sliders[2] = 0
          if (this.countity_sliders[3] < 0 ) this.countity_sliders[3] = 0
          this.summa = (this.countity_sliders[0] + this.countity_sliders[1]+ this.countity_sliders[2] + this.countity_sliders[3])
          }

        }

      })
  </script>
</body>
</html>

1 commentaires

Intéressant, j'aime la façon dont celui-ci interagit le mieux. Même si ce n'est pas correct.

2
votes

<!-- Author: devninja67 -->
<!-- ***** -->
<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript">
		// Returns all selector elements
		const getRanges = () => Array.from(document.querySelectorAll('.hrange'));

		// return value to change
		const minValue = (v1, v2) => {
			if(v1 < 0)  return Math.abs(v1) < v2 ? v1 : -v2;
			else return v1 < 100 - v2 ? v1 : 100 - v2;
		}

		// Gets us an ability to sum selectors (can exclude a selector if required)
		const sumSelectors = (exclude) => getRanges()
		    .filter((r) => (exclude) ? r !== exclude : true)
		    .map(r => parseInt(r.value))
		    .reduce((a, s) => a + s);
		
		// changing before or after slider
		const checkRanges = (idx) => {
		// after element for increasing and before element for decreasing
	   	let stride = (sumSelectors() > 100) ? 1 : -1;
	    let selectorId = idx;
		// changing slider's value until sliders's sum equal 100
	    while(true) {
	     	selectorId = (selectorId + stride + 4) % 4;
	     	let selector = document.querySelector("#range" + selectorId);
	    	let selectorValue = parseInt(selector.value);
	    	selector.value = selectorValue + minValue(100 - sumSelectors(), selectorValue);
	    	if(sumSelectors() !== 100) continue;
	    	else break;
			}
		  document.querySelector('#amount').value = sumSelectors();
		};

		// Listening inputing slider
		document.addEventListener('DOMContentLoaded', function() {
		  getRanges().forEach((r, idx) => {
		    r.addEventListener('input', (event) => {
		      checkRanges(idx);
		    });
		  });
		});
	</script>

	<style type="text/css">
		.hrange {
  		display: block;
		}
	</style>
</head>
<body>
	<div class="hThree">
	  <input type="range" id="range0" orient="vertical" value="25" class="hrange" min="0" max="100" />
	  <input type="range" id="range1" orient="vertical" value="25" class="hrange" min="0" max="100" />
	  <input type="range" id="range2" orient="vertical" value="25" class="hrange" min="0" max="100" />
	  <input type="range" id="range3" orient="vertical" value="25" class="hrange" min="0" max="100" />
	  <input id="amount" type="number" value="100" min="0" max="100" />
	</div>
</body>
</html>

1 commentaires

Bonjour Ninja. Merci pour votre réponse, mais pouvez-vous ajouter du texte pour expliquer les 2 blocs de code. Ne mettant que le code sans explication n'est pas bien reçu.

0
votes

<!--   Author : Mehran   -->
<!DOCTYPE html>
<html>
<head>
    <title>Four Sliders</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
</head>

<body>
    <div id="FourSliders">
        <input type="range" id="0" min="0" max="100" v-model="val[0]" @input="changed" /><br/>
        <input type="range" id="1" min="0" max="100" v-model="val[1]" @input="changed" /><br/>
        <input type="range" id="2" min="0" max="100" v-model="val[2]" @input="changed" /><br/>
        <input type="range" id="3" min="0" max="100" v-model="val[3]" @input="changed" /><br/>
        Sum : <input type="number" value="100" v-model="sum" />
    </div>

    <script>
        var app = new Vue({
            el: '#FourSliders',
            data: {
                val: [100, 0, 0, 0],
                sum: 100
            },
            methods : {
                changed(e) {
                    var i;
                    var dif = Number(this.val[0]) + Number(this.val[1]) + Number(this.val[2]) + Number(this.val[3]) - Number(this.sum);
                    for (i = 0; i < 4; i++) {
                        if (i == e.target.id) continue;
                        if (dif > 0) {
                        if (this.val[i] - dif > 0) {
                            this.val[i] -= dif;
                            break;
                        }
                        else
                            dif -= this.val[i], this.val[i] = 0;
                        }
                        else {
                        if (this.val[i] - dif <= 100) {
                            this.val[i] -= dif;
                            break;
                        }
                        else
                            dif += (100-this.val[i]), this.val[i] = 100;
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

1 commentaires

Salut! J'ai remarqué que votre réponse utilise VUE.JS mais aucune balise indique que OP utilise VUE. Pouvez-vous mettre à jour votre réponse pour être plus de Vanilla JS?