Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120621 Code bouton j'aime | | Coucou Voici un code pour mettre sur vos page un bouton j'aime et qui comptabilise le nombre de j'aime Html: tu peux changer le noms: bouton j'aime par une autre phase. - Code:
-
<div id="1"> <h1>Bouton j'aime !</h1> <span id="number">0</span> </div>
CSS: - Code:
-
@import url(https://fonts.googleapis.com/css?family=Loved+by+the+King);
*::selection { color: grey; }
body { overflow: hidden; background: linear-gradient(to top, #e5a9ce 70%,#9f9baa 100%); margin-top: 70px; text-align: center; height: 100vh; font-family: 'Loved by the King', cursive; }
h1 { margin-bottom: 50px; color: #956868; }
#number { padding: 48px; background: url('https://lady-garden.co.uk/1-8-thickbox/love-heart.jpg') no-repeat center center; background-size: 100px; font-size: 20pt; color: white; letter-spacing: 3pt; }
#number:hover { cursor: pointer; opacity: .8; }
#number:active { background-size: 123px; cursor: pointer; } JS: - Code:
-
/* 1 Quand je clique sur j'aime ... 2 Récupérer la valeur affichée 3 Lui ajouter "+1" : ok 4 Remplacer cette nouvelle valeur */
$(document).ready(function(){ $('#number').click(function(){ /*1*/ var nombre=$('#number').text(); /*2*/ var nombreplus1=parseInt(nombre)+1; /*3*/ $('#number').html(nombreplus1); /*4*/ }); }); Résultat: [Vous devez être inscrit et connecté pour voir cette image] |
| |