Simulateur

cs_ronibaran Messages postés 15 Statut Membre -
cs_ronibaran Messages postés 15 Statut Membre - 3 nov. 2014 à 12:35

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

A voir également:

Simulateur
Simulateur morel - Accueil - Services en ligne
Simulateur de navigation maritime gratuit - Télécharger - Loisirs créatifs
Télécharger simulateur de peinture intérieur gratuit - Télécharger - Divers Photo & Graphisme
Calcul période d'essai cdi simulateur excel - Forum Excel
Simulateur de construction 14 - Télécharger - Simulation

5 réponses

Réponse 1 / 5

cs_ronibaran Messages postés 15 Statut Membre

voilà ce que je cherche à comprendre:
http://www.cjoint.com/data/0Kdljwwfg72.htm

Réponse 2 / 5

prosthetiks Messages postés 1309 Statut Membre 431

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 ?

Réponse 3 / 5

cs_ronibaran Messages postés 15 Statut Membre

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 Messages postés 1309 Statut Membre 431

J'ai aussi besoin du code HTML qui va avec :)

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

cs_ronibaran Messages postés 15 Statut Membre

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>

Discussions similaires

EXCEL - Calcul automatique de Fin de contrat et période d'essai

Simulation covering

cherche logiciel design voiture 3d merci

Excel 2010 formule calcul délai de prévenance et période d'essai

Simulateur coiffure homme

Simulateur

5 réponses

Votre réponse

Discussions similaires

Newsletters