Simulateur

cs_ronibaran -

Bonjour,

Je voulais comprendre comment ça marche un simulateur?
voici un exemple : https://www.edenred.fr/ticket-restaurant

Si on fait bouger un range comment une donnée peut bouger ? c'est le CSS ou JS ?
Par exemple dans l'URL, quand le numéro 1 range bouge, limité exonération bouge aussi. Comment il font ça ?

---------------------------
Tout va bien se passer :)

Afficher la suite

5 réponses

Réponse 1 / 5
cs_ronibaran Auteur
voilà ce que je cherche à comprendre:
http://www.cjoint.com/data/0Kdljwwfg72.htm
0
Réponse 2 / 5
prosthetiks
Salut,

Il s'agit principalement de javascript. Si tu veux pouvoir réaliser ce genre de choses, il va falloir que tu apprennes à en maîtriser les bases. jQuery te sera utile, je te conseille aussi d'y jeter un oeil.

As-tu déjà des notions de développement ?
0

cs_ronibaran Auteur

Bonjour prosthetiks,

J'ai ce code mais ça marche pas comme je veux:

<script type="text/javascript">

if (valeur = 1) {
   document.getElementById("valeur-label").style.left = "10%";
} 
if (valeur = 2) {
   document.getElementById("valeur-label").style.left = "20%";
} 
if (valeur = 3) {
   document.getElementById("valeur-label").style.left = "30%";
}
</script>

Réponse 4 / 5
prosthetiks
J'ai aussi besoin du code HTML qui va avec :)
0
Vous n’avez pas trouvé la réponse que vous recherchez ?

La communauté CCM répond en moyenne en moins de 2h.

Posez votre question

cs_ronibaran Auteur

voici le code:

J'aimerais bien que mon Limite Exo qui bouge aussi quand on change le range1.
Mais je n'arrive pas :/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simulateur</title>
<link rel="stylesheet" href="http://cjoint.com/14sp/DIxsfqvFNSf_jquery-ui.css">
<link rel="stylesheet" href="http://cjoint.com/14sp/DIxsfdaCqbX_bootstrap.min.css">
<link rel="stylesheet" href="http://cjoint.com/14sp/DIxseMjLq3z_styles.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.4/jquery-ui.min.js"></script>
<style type="text/css">
* {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 15px;
}
p {
	margin-bottom: 1px;
	margin-top: 1px;
	text-align: right
}
</style>
</head>
<body>
<div class="container">
  <form class="form-horizontal form-pricing" role="form">
    <table width="100%" height="auto" cellspacing="0" cellpadding="0" style="border: 4px solid #dc291a;">
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td style="height:100px"><div class="col-sm-12">
            <div id="slider"></div>
          </div></td>
      </tr>
      <tr>
        <td style="height:50px"></td>
      </tr>
      <tr>
        <td style="height:100px"><div class="col-sm-12">
            <div id="slider2"></div>
          </div></td>
      </tr>
      <tr>
        <td style="height:30px"><hr/></td>
      </tr>
      <tr>
        <td style="height:30px"><p  style="text-align:left; margin-left:20px"> Limite Exo : </p>
          <p id="LimSeuilExo-label" style="text-align:left; margin-left:20px"> </p></td>
      </tr>
      <tr>
        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="3%"> </td>
              <td width="35%" style="font-size:18px; color: red; font-weight:600">Avantages Entreprise</td>
              <td width="10%"> </td>
              <td width="1%"> </td>
              <td width="2%" bgcolor="#505050"> </td>
              <td width="1%"> </td>
              <td width="35%" style="font-size:18px; color: red; font-weight:600">Avantages pour votre Salarié </td>
              <td width="10%"> </td>
              <td width="3%"> </td>
            </tr>
            <tr>
              <td width="3%"> </td>
              <td width="35%">Budget entreprise </td>
              <td width="10%"><p id="BudgetEntreprise-label"> </p></td>
              <td width="1%"> </td>
              <td width="2%" bgcolor="#505050"> </td>
              <td width="1%"> </td>
              <td width="35%">Pouvoir d'achat exonérée de charges </td>
              <td width="10%"><p id="BudgetSalarie-label"> </p></td>
              <td width="3%"> </td>
            </tr>
            <tr>
              <td width="3%"> </td>
              <td width="35%">Montant soumis à charges </td>
              <td width="10%"><p id="ChargesEntreprise-label"> </p></td>
              <td width="1%"> </td>
              <td width="2%" bgcolor="#505050"> </td>
              <td width="1%"> </td>
              <td width="35%">Montant soumis à charges </td>
              <td width="10%"><p id="ChargesSalarie-label"> </p></td>
              <td width="3%"> </td>
            </tr>
            <tr>
              <td width="3%"> </td>
              <td width="35%">Estimation charges patronales </td>
              <td width="10%"><p id="EstimationEntreprise-label"> </p></td>
              <td width="1%"> </td>
              <td width="2%" bgcolor="#505050"> </td>
              <td width="1%"> </td>
              <td width="35%">Estimation charges salariales </td>
              <td width="10%"><p id="EstimationSalariales-label"> </p></td>
              <td width="3%"> </td>
            </tr>
            <tr>
              <td width="3%"> </td>
              <td width="35%">Economies Réalisées </td>
              <td width="10%"><p id="EconomieEntreprise-label"> </p></td>
              <td width="1%"> </td>
              <td width="2%" bgcolor="#505050"> </td>
              <td width="1%"> </td>
              <td width="35%">Economies Réalisées </td>
              <td width="10%"><p id="EconomieSalarie-label"> </p></td>
              <td width="3%"> </td>
            </tr>
          </table></td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
      </tr>
    </table>
    <script>
	
	 $(document).ready(function() {
	  
		  $("#slider").slider({
              animate: true,
              value:50,
              min: 50,
              max: 60,
              step: 1.0,
              slide: function(event, ui) {
                update(Taux,ui.value); 
         
			  serialization: {

}     }     });

		 $("#slider2").slider({
              animate: true,
              value:7,
              min: 3,
              max: 12,
              step:0.01,
              slide: function(event, ui) {
                update(VF,ui.value); 
              }
          });

$("#VF").val(7);
          $("#Taux").val(50);

		  $("#NbSalarie").val(1);
		  $("#NbTicket").val(20);
		  
		  $("#SeuilExo").val(5.33);
		  $("#LimSeuilExo").val(10.66);
		  
		  $("#DiffPartEntSeul").val(0);
		  
		  $("#ParticipationEntreprise").val(3.5);
		  
		  $("#ChargesEntreprise").val(0);
		  
		  $("#EstimationEntreprise").val(0);
		  
		  $("#EconomieEntreprise").val(385);

$("#VF-label").text(7);
          $("#Taux-label").text(50);
		  
		  $("#NbSalarie-label").text(1);
		  $("#NbTicket-label").text(20);
		
		  $("#SeuilExo-label").text(5.33);
		  $("#LimSeuilExo-label").text(10.66);
		  
		  $("#DiffPartEntSeul-label").text(0);
		  
		  $("#ParticipationEntreprise-label").text(3.5);
		  
		  $("#ChargesEntreprise-label").text(0);
		  
		  $("#EstimationEntreprise-label").text(0);
		  
		  $("#EconomieEntreprise-label").text(385);

update();
      });

      function update(slider,val) {

var $VF = slider == VF?val:$("#VF").val();
		var $Taux = slider == Taux?val:$("#Taux").val();		

		var $NbSalarie = slider == NbSalarie?val:$("#NbSalarie").val();
		var $NbTicket = slider == NbTicket?val:$("#NbTicket").val();
	
		var $SeuilExo = slider == SeuilExo?val:$("#SeuilExo").val();
		var $LimSeuilExo = slider == LimSeuilExo?val:$("#LimSeuilExo").val();
		
		var $DiffPartEntSeul = slider == DiffPartEntSeul?val:$("#DiffPartEntSeul").val();

var $ParticipationEntreprise = slider == ParticipationEntreprise?val:$("#ParticipationEntreprise").val();
		
		var $ChargesEntreprise = slider == ChargesEntreprise?val:$("#ChargesEntreprise").val();
		
		var $EstimationEntreprise = slider == EstimationEntreprise?val:$("#EstimationEntreprise").val();
		
		var $EconomieEntreprise = slider == EconomieEntreprise?val:$("#EconomieEntreprise").val();

// Seuil Exo //
		$SeuilExo = 5.33;

// Limite Exonaration //
		$LimSeuilExo = (($SeuilExo * 100 ) / $Taux).toFixed(2) ;

// Participation de l'Entreprise //
		$ParticipationEntreprise = (($VF * $Taux ) / 100).toFixed(10) ;

//Difference entre Participation Entreprise et Seuil Exo //
		$DiffPartEntSeul = ($ParticipationEntreprise - $SeuilExo).toFixed(10);

// Budget Entreprise //
		$BudgetEntreprise = ((11 * $NbSalarie * $NbTicket  * $VF * $Taux) / 100).toFixed(2) ;

// Montant soumis à charges Entreprise //
			
		$ChargesEntreprise = ($DiffPartEntSeul * 11 * $NbSalarie * $NbTicket).toFixed(2);
		
		if($DiffPartEntSeul < 0)
			{
		$ChargesEntreprise = 0;
			}

// Estimation charges patronales //
		$EstimationEntreprise = ($ChargesEntreprise * 0.5).toFixed(2) ;
		
		if($EstimationEntreprise < 0)
			{
		$EstimationEntreprise = 0;
			}

// Economies Réalisées Entreprise //
		if($ParticipationEntreprise > $SeuilExo)
			{
			$EconomieEntreprise =   (((5 * 2 * $SeuilExo * $NbSalarie * $NbTicket * $Taux * 11) /1000 ) - ($EstimationEntreprise)).toFixed(2);
			}
		
		if($ParticipationEntreprise < $SeuilExo)
			{
			$EconomieEntreprise = (0.5 * $BudgetEntreprise ).toFixed(2);
			}

// Pouvoir d'achat exonérée de chargese //
		if($ParticipationEntreprise <= $SeuilExo)
			{
		$BudgetSalarie = ((11 * $NbSalarie * $NbTicket  * $VF * $Taux) / 100).toFixed(2) ;
			}
		if($ParticipationEntreprise > $SeuilExo)
			{
	  $BudgetSalarie = ((2 * 11 * $SeuilExo *  $NbTicket  * $Taux) / 100).toFixed(2) ;
	  		}

// Montant soumis à charges Salarie //
			
		$ChargesSalarie = ($DiffPartEntSeul * 11 * $NbTicket).toFixed(2);
		
		if($DiffPartEntSeul < 0)
			{
		$ChargesSalarie = 0;
			}

// Estimation charges salariales //
		$EstimationSalariales = ($ChargesSalarie * 0.2).toFixed(2) ;
		
		if($EstimationSalariales < 0)
			{
		$EstimationSalariales = 0;
			}

// Economies Réalisées Salarie //
		if($ParticipationEntreprise > $SeuilExo)
			{
		$EconomieSalarie =   ((0.2 * $BudgetSalarie) - ($EstimationSalariales)).toFixed(2);
			}
		
		if($ParticipationEntreprise < $SeuilExo)
			{
			$EconomieSalarie = (0.2 * $BudgetSalarie).toFixed(2);
			}

$( "#VF" ).val($VF);
		$( "#VF-label" ).text($VF);
		
		$( "#Taux" ).val($Taux);
        $( "#Taux-label" ).text($Taux);
		
		$( "#DiffPartEntSeul" ).val($DiffPartEntSeul);
		$( "#DiffPartEntSeul-label" ).text($DiffPartEntSeul);
		
		$( "#NbSalarie" ).val($NbSalarie);
        $( "#NbSalarie-label" ).text($NbSalarie);
		
		$( "#NbTicket" ).val($NbTicket);
        $( "#NbTicket-label" ).text($NbTicket);
		
		$( "#BudgetEntreprise" ).val($BudgetEntreprise);
        $( "#BudgetEntreprise-label" ).text($BudgetEntreprise);
		 
		$( "#SeuilExo" ).val($SeuilExo);
        $( "#SeuilExo-label" ).text($SeuilExo);
		
		$( "#LimSeuilExo" ).val($LimSeuilExo);
        $( "#LimSeuilExo-label" ).text($LimSeuilExo);
		 
		$( "#ParticipationEntreprise" ).val($ParticipationEntreprise);
		$( "#ParticipationEntreprise-label" ).text($ParticipationEntreprise);
	
		$( "#ChargesEntreprise" ).val($ChargesEntreprise);
        $( "#ChargesEntreprise-label" ).text($ChargesEntreprise);
		 
		$( "#EstimationEntreprise" ).val($EstimationEntreprise);
        $( "#EstimationEntreprise-label" ).text($EstimationEntreprise);
		
		$( "#EconomieEntreprise" ).val($EconomieEntreprise);
        $( "#EconomieEntreprise-label" ).text($EconomieEntreprise);

$( "#BudgetSalarie" ).val($BudgetSalarie);
        $( "#BudgetSalarie-label" ).text($BudgetSalarie);
		
		$( "#ChargesSalarie" ).val($ChargesSalarie);
        $( "#ChargesSalarie-label" ).text($ChargesSalarie);
		
		$( "#EstimationSalariales" ).val($EstimationSalariales);
        $( "#EstimationSalariales-label" ).text($EstimationSalariales);
		
		$( "#EconomieSalarie" ).val($EconomieSalarie);
        $( "#EconomieSalarie-label" ).text($EconomieSalarie);

$('#slider a').html('<label> '+$Taux+' </label>');
        $('#slider2 a').html('<label> '+$VF+' </label>');

}

</script>
  </form>
  <input type="hidden" id="Taux" >
  <input type="hidden" id="VF" >
  <input type="hidden" id="DiffPartEntSeul" >
  <input type="hidden" id="NbSalarie" >
  <input type="hidden" id="NbTicket" >
  <input type="hidden" id="SeuilExo" >
  <input type="hidden" id="LimSeuilExo" >
  <input type="hidden" id="BudgetEntreprise" >
  <input type="hidden" id="ParticipationEntreprise" >
  <input type="hidden" id="ChargesEntreprise" >
  <input type="hidden" id="EstimationEntreprise" >
  <input type="hidden" id="EconomieEntreprise" >
  <input type="hidden" id="BudgetSalarie" >
  <input type="hidden" id="ChargesSalarie" >
  <input type="hidden" id="EstimationSalariales" >
  <input type="hidden" id="EconomieSalarie" >
</div>
</body>
</html>

Simulateur

5 réponses

Discussions similaires

Newsletters