Simulateur

cs_ronibaran Messages postés 14 Date d'inscription Statut Membre Dernière intervention -
cs_ronibaran Messages postés 14 Date d'inscription Statut Membre Dernière intervention - 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 de navigation maritime gratuit - Télécharger - Loisirs créatifs
Simulateur morel - Accueil - Services en ligne
Télécharger simulateur de peinture intérieur gratuit - Télécharger - Divers Photo & Graphisme
Simulateur de construction 14 - Télécharger - Simulation
Simulateur covering voiture gratuit - Forum Graphisme

5 réponses

Réponse 1 / 5

cs_ronibaran Messages postés 14 Date d'inscription Statut Membre Dernière intervention

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

Réponse 2 / 5

prosthetiks Messages postés 1189 Date d'inscription Statut Membre Dernière intervention 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 14 Date d'inscription Statut Membre Dernière intervention

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 1189 Date d'inscription Statut Membre Dernière intervention 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 14 Date d'inscription Statut Membre Dernière intervention

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

Simulation covering

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

cherche logiciel design voiture 3d merci

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

Calcul automatique des dates entretiens et le terme de la période d'essai

Votre réponse

Discussions similaires