Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Shop Recherche
1916 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Modification sur un script

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Modification sur un script

n°2275917
liliana78
Posté le 19-02-2016 à 15:35:18  profilanswer
 

Bonjour à tous !
 
Pour vous mettre au parfum, je suis à la limite du nul en informatique. L'élaboration du script que je vais vous présenter m'a pris beaucoup de temps...
 
Voilà, je suis correctrice de textes en français (je corrige les romans, les thèses... au niveau de l'orthographe, de la grammaire...).
 
J'ai un script qui permet à l'internaute de calculer le coût de la correction en fonction de divers critères (nombre de mots, formule, statut...).
 
J'avais d'ailleurs déjà posté sur ce forum et obtenu de l'aide.
 
Voici le script :  
 
 

Code :
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Devis pour correction &ndash; Liliana78</title>
  6.     <style>
  7.         body {
  8.             background-size: 5px 900px, 6px 6px;
  9.             font-family: Verdana, Geneva, sans-serif;
  10.             font-size: 14px;
  11.             color: #000309;
  12.             text-align: center;
  13.             line-height: 24px;
  14.         }
  15.         #page {
  16.             width: 1300px;
  17.             margin: auto;
  18.             padding: 20px;
  19.             background: #d8d8d8; /* Old browsers */
  20.             background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #d8d8d8), color-stop(100%, #ffffff)); /* Chrome,Safari4+ */
  21.             filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d8d8d8', endColorstr='#ffffff', GradientType=0); /* IE6-9 */
  22.             background: -moz-linear-gradient(top, #d8d8d8 1%, #ffffff 100%); /* FF3.6+ */
  23.             background: -webkit-linear-gradient(top, #d8d8d8 1%, #ffffff 100%); /* Chrome10+,Safari5.1+ */
  24.             background: -o-linear-gradient(top, #d8d8d8 1%, #ffffff 100%); /* Opera 11.10+ */
  25.             background: -ms-linear-gradient(top, #d8d8d8 1%, #ffffff 100%); /* IE10+ */
  26.             background: linear-gradient(to bottom, #d8d8d8 1%, #ffffff 100%); /* W3C */
  27.         }
  28.         .prix {
  29.             font-weight: bold;
  30.             font-size: 200%;
  31.             color: blue;
  32.         }
  33.         h1 {
  34.             font-size: 0em;
  35.             line-height: 1em;
  36.             margin: 0;
  37.             text-transform: uppercase;
  38.         }
  39.         fieldset {
  40.             border: none;
  41.             margin: 0 0 1ex;
  42.             padding: 0;
  43.         }
  44.         .explications {
  45.             border-left: solid thin #0042b0;
  46.             padding-left: 1ex;
  47.         }
  48.         .explications ul {
  49.             list-style: none;
  50.             font-size: 14px;
  51.             font-style: italic;
  52.             padding: 0;
  53.         }
  54.         .explications li {
  55.             margin: 1ex 0;
  56.         }
  57.         .explications h2 {
  58.             font-style: italic;
  59.             font-size: 2em;
  60.             font-weight: bold;
  61.             margin: 0 0 1em;
  62.          
  63.         }
  64.         explications h3 {
  65.             font-style: italic;
  66.             font-size: 2em;
  67.             margin: 0 0 1em;
  68.         }
  69.         .etape {
  70.             font-weight: bold;
  71.             text-transform: uppercase;
  72.         }
  73.         .etape::after {
  74.             content: "\00A0: ";
  75.         }
  76.     </style>
  77. </head>
  78. <body>
  79. <section id="page">
  80.     <h1>Calculez le coût de votre correction</h1>
  81.     <form id="testform">
  82.         <fieldset>
  83.             <p>
  84.                 <label for="nbchar" class="etape">Nombre de mots</label>
  85.                 <input id="nbchar" type="text" name="nbchar" value="0"/>
  86.             </p>
  87.             <div class="explications">
  88.                 <h2>Où trouver le nombre de mots ? </h2>
  89.                 <ul>
  90.                     <li>Word 2007, 2010 et 2013 : En bas à gauche de la fenêtre du logiciel.
  91.                     </li>
  92.                     <li>Word 2003/OpenOffice : Cliquez sur <strong>Outils</strong>,
  93.                         puis <strong>Statistiques.</strong> Repérez la ligne
  94.                         <strong>"mots".</strong>
  95.                     </li>
  96.                 </ul>
  97.             </div>
  98.         </fieldset>
  99.         <fieldset>
  100.             <p>
  101.                 <strong class="etape">Formule</strong>
  102.                 <input id="forumle1" type="radio" name="formule" value="1" checked="checked"/>
  103.                 <label for="forumle1">Simple</label>
  104.                 <input id="formule2" type="radio" name="formule" value="2"/>
  105.                 <label for="formule2">Approfondie</label>
  106.             </p>
  107.             <p class="details">
  108.                 Voir <a href="formules/correction-reformulation">Tableau comparatif des formules de correction</a>
  109.             </p>
  110.             <p>
  111.                 <label class="etape" for="formjur">Statut</label>
  112.                 <select id="formjur" name="formjur">
  113.                     <option value="0">Étudiant</option>
  114.                     <option value="1">Particulier</option>
  115.                     <option value="2">Professionnel</option>
  116.                 </select>
  117.                 <input type="submit" value="Calculer"/>
  118.             </p>
  119.         </fieldset>
  120.     </form>
  121.     <div id="resultat"></div>
  122.     <div id="resultatSupplement"></div>
  123. </section>
  124. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  125. <script type="text/javascript">// <![CDATA[
  126. function formatNumber(num) {
  127.     return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1 " )
  128. }
  129. function supplement(result) {
  130.     var more = (result * 10) / 100;
  131.     return Math.ceil(result + more);
  132. }
  133. $(function () {
  134.     $("input:submit" ).click(
  135.             function () {
  136.                 var calcul = 0;
  137.                 var coefReduction = 10 / 100;
  138.                 var supp;
  139.                 if ($("input:checked" ).val() == 1) {
  140.                     supp = false;
  141.                     if ($("#formjur" ).val() == 1) {
  142.                         calcul = $("#nbchar" ).val() * 0.020;
  143.                     } else if ($("#formjur" ).val() == 2) {
  144.                         calcul = $("#nbchar" ).val() * 0.0237;
  145.                     } else {
  146.                         calcul = $("#nbchar" ).val() * 0.0178;
  147.                     }
  148.                 } else {
  149.                     supp = true;
  150.                     if ($("#formjur" ).val() == 1) {
  151.                         calcul = $("#nbchar" ).val() * 0.0346;
  152.                     } else if ($("#formjur" ).val() == 2) {
  153.                         calcul = $("#nbchar" ).val() * 0.0395;
  154.                     } else {
  155.                         calcul = $("#nbchar" ).val() * 0.0297;
  156.                     }
  157.                 }
  158.                 var resultat = Math.ceil(calcul);
  159.                 var resultatMajore = resultat + (calcul * coefReduction);
  160.                 var resultatSupplement = supplement(resultat);
  161.                 var resultatSupplementMajore = Math.round(resultatSupplement + (resultatSupplement * coefReduction));
  162.                 $("#resultat" ).html("Tarif généralement appliqué : <span class=\"prix\">" + formatNumber(resultat) + " &euro; </span>/ Si correction en rouge :  <span class=\"prix\">" + formatNumber(Math.round(resultatMajore)) + " &euro; </span>" );
  163.                 return false;
  164.             }
  165.     );
  166. });
  167. // ]]></script>


 
 
Voici mes deux demandes d'aide :
 
- L'internaute doit renseigner le nombre de mots de son document. S'il inscrit, par exemple, 158747 (sans espaces), cela marche. Mais s'il met un espace (158 747), non. Comment faire pour que le tarif s'affiche même en insérant un espace ?
 
- Le cadre du formulaire dépasse le template. Je modifie "width", mais ça élargit juste la page du template.
 
Je vous remercie de votre aide, car je galère pas mal...
 
Liliana

mood
Publicité
Posté le 19-02-2016 à 15:35:18  profilanswer
 

n°2275994
DDT
Posté le 22-02-2016 à 00:29:01  profilanswer
 

1) La valeur du champ est lue par $("#nbchar" ).val(), le mieux serait d'introduire une variable, par exemple après supp, et de virer tous les caractères non-numériques

Code :
  1. ...
  2. var supp;
  3. var nbMots = $("#nbchar" ).val().replace(/[^\d]+/g, "" );


Ensuite tu remplaces toutes les lignes où la variable calcul est calculée

Code :
  1. calcul = nbMots * ...


 
Ce qui te donne quelque chose comme ça

Code :
  1. $(function () {
  2.     $("input:submit" ).click(
  3.             function () {
  4.                 var calcul = 0;
  5.                 var coefReduction = 10 / 100;
  6.                 var supp;
  7.                 var nbMots = $("#nbchar" ).val().replace(/[^\d]+/g, "" );
  8.                 if ($("input:checked" ).val() == 1) {
  9.                     supp = false;
  10.                     if ($("#formjur" ).val() == 1) {
  11.                         calcul = nbMots * 0.020;
  12.                     } else if ($("#formjur" ).val() == 2) {
  13.                         calcul = nbMots * 0.0237;
  14.                     } else {
  15.                         calcul = nbMots * 0.0178;
  16.                     }
  17.                 } else {
  18.                     supp = true;
  19.                     if ($("#formjur" ).val() == 1) {
  20.                         calcul = nbMots * 0.0346;
  21.                     } else if ($("#formjur" ).val() == 2) {
  22.                         calcul = nbMots * 0.0395;
  23.                     } else {
  24.                         calcul = nbMots * 0.0297;
  25.                     }
  26.                 }
  27.                 var resultat = Math.ceil(calcul);
  28.                 var resultatMajore = resultat + (calcul * coefReduction);
  29.                 var resultatSupplement = supplement(resultat);
  30.                 var resultatSupplementMajore = Math.round(resultatSupplement + (resultatSupplement * coefReduction));
  31.                 $("#resultat" ).html("Tarif généralement appliqué : <span class=\"prix\">" + formatNumber(resultat) + " &euro; </span>/ Si correction en rouge :  <span class=\"prix\">" + formatNumber(Math.round(resultatMajore)) + " &euro; </span>" );
  32.                 return false;
  33.             }
  34.     );
  35. });


 
2)
Si je modifie

Code :
  1. #page {
  2.             width: 1300px;
  3.             ...
  4. }


Ça fonctionne pour moi?
 
Dans ton navigateur, tu dois normalement pouvoir ouvrir les outils de développement avec F12.
Ensuite dans l'onglet éléments (ou DOM, ça dépend du navigateur) il devrait y avoir un bouton pour aller inspecter les éléments suivant le pointeur de ta souris, ce qui devrait te permettre de trouver facilement l'élément que tu veux redimensionner. Donne-nous plus de détails. :)


---------------
click clack clunka thunk
n°2276013
liliana78
Posté le 22-02-2016 à 11:56:32  profilanswer
 

Je te remercie beaucoup de l'attention que tu as apportée à ma demande ainsi que pour tes réponses.
 
Pour le 1), OK, ça marche ;)  
 
Pour le 2), non, ça agrandit ou réduit la page du template. Et avec le système du F 12 "éléments", toute la page est sélectionnée. Ne serait-il pas possible de mettre un fond blanc au lieu de gris pour que le cadre ne se voit pas ?
 
J'avais une dernière question :
 
Quand l'internaute clique sur "Calculer" pour connaître le prix, il est indiqué "Tarif généralement appliqué : ... euros ; Si correction en rouge : ... euros" (voir code dans mon premier message).
J'aimerais insérer une troisième ligne : "Si délai supérieur à 1 mois". La réduction serait alors de 10 % par rapport au "Tarif généralement appliqué".
 
Je te remercie infiniment de ta patience.

n°2276041
liliana78
Posté le 22-02-2016 à 21:08:33  profilanswer
 

Personne ? :cry:


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Modification sur un script

 

Sujets relatifs
script de modification de chemin dans Outlook[RESOLU] Modification d'un fichier en PHP
modification script php/mysqlScript de modification des User dans l'AD
Recherche script de modification et sauvegarde d'imagemodification Script météo
VBScript - Modification d'un fichier par scriptModification de script
script modification adresse IPpb de modification de script javascript
Plus de sujets relatifs à : Modification sur un script


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR