Utilisez CSS pour créer des évaluations par étoiles_Échange d'expériences

Jetons d'abord un coup d'œil à l'effet

Étape 1 : XHTML

 
• 1
li> ;2

• 3
 
 
• 4

 
• 5

Seule la technologie statique sera introduite ici, et Ensuite, l'application du système sera donnée. Vous pouvez également ajouter le programme vous-même pour l'essayer. Vous pouvez également utiliser ajax pour créer de superbes effets

Étape 2 : Graphiques.

Afin d'économiser votre espace et votre bande passante, nous utilisons des images gif, qui sont les boutons de notation.

Image

Étape 3 : CSS

.star-rating{ style de liste : none; /* désactive les puces d'image de liste par défaut*/
margin: 3px; /*Je ne veux pas d'espace autour de cette chose*/
padding: 0px; je suis presque sûr que les OL ont un remplissage par défaut de 0 px, mais nous le définirons sur 0 px juste pour être sûr*/
width: 100px /*Cette liste est de 5 étoiles, chaque étoile mesure 20 px, elle devrait donc être 5 x ; 20px = 100pxwide*/
height: 20px; /* La hauteur de chaque étoile est de 20px Puisqu'il s'agit d'une liste horizontale, nous définirons la hauteur de la liste sur la hauteur de l'étoile.*/
position : relatif; /*Très important. Nous utiliserons le positionnement absolu plus tard.*/
background: url(star_rating.gif) top left repeat-x; , la liste apparaîtra avec cinq étoiles.*/
}

Selon le code que nous connaissons :
supprime la marge et le remplissage de ul et list -style , définit la production de l'élément bouton lorsqu'un bloc de 20px de haut et 100px de large

descend. Ce qui suit est css

.star-rating li{. padding:0px; / * pas de remplissage du tout*/
margin:0px; /* pas de marge du tout*/
/**/ /*Piratage d'une barre oblique inverse, cela fait que IE5 Mac ne voit PAS cette règle*/
float: left /* pour tout autre ; navigateur, on va flotter à gauche, cela fait une liste horizontale*/
/* */ /* terminer le hack IE5 Backslash*/
}

Ce code permet de être disposé horizontalement et résoudre le bogue MAC IE5

Héritez le style d'élément de bouton ci-dessus, puis définissez l'action de la souris. Ce qui suit est le css

.star-rating li a. { display:block; /* nous voulons un élément de bloc, pour pouvoir jouer avec sa hauteur et sa largeur*/
width:20px /* des trucs faciles, nous voulons que la largeur soit la même que celle du star width*/
height: 20px ; /* identique à la width*/
text-decoration: none /* supprimer le soulignement du lien*/
text-indent: -9000px; indentez le texte de l'écran en utilisant une [url =http://www.php.cn/]technique de remplacement d'image[/url], nous ne voulons plus voir le texte.*/
z-index : 20 ; /*on reviendra à cette */
position : absolue; /*on peut maintenant contrôler les coordonnées exactes x et y de chaque étoile, par rapport à l'UL parent*/
padding: 0px; *encore une fois, nous n'avons pas besoin de remplissage*/
background-image:none /* nous n'afficherons pas l'étoile*/
}

13. .star-rating li a :hover{
14. background: url(star_rating.gif) left bottom; /*c'est là que se trouve la magie*/
15. z-index: 1; z-index stack*/
16 . left: 0px; /*déplace cette étoile complètement vers la gauche, alignée avec le côté de l'élément parent UL*/
17. }

Ensuite, nous devons réfléchir à la manière d'afficher différentes notes, trois étoiles quatre étoiles. Quel est le principe ? Nous continuons à répéter l'image d'arrière-plan horizontalement, puis définissons la largeur de a et a:hover pour distinguer la sélection ? étoiles étoiles.

Ce qui suit est css

.star-rating a.one-star{
gauche : 0px;
}
. star -rating a.one-star:hover{
width:20px;
}
.star-rating a.two-stars{
left:20px;
}
. star -rating a.two-stars:hover{
width: 40px;
}
.star-rating a.two-stars{
left: 40px;
}
. star -rating a.trois-étoiles:hover{
width: 60px;
}
.star-rating a.four-stars{
left: 60px;
}
. star -rating a.four-stars:hover{
width: 80px;
}
.star-rating a.five-stars{
left: 80px;
}
. star -rating a.five-stars:hover{
width: 100px;
}

À ce stade, la production est terminée

Le premier modèle En ignorant la situation des demi-étoiles et le nombre d'étoiles non initial, nous allons ensuite résoudre ce problème.

Étape 1. Vérifiez-le en action

Image 1

Vérifiez-le en action

Étape 2 : Le XHTML

• Étoiles.


• 1< ;/li>
  
• 2


• 3


• 4


• 5

Et le premier Les structures du les modèles sont similaires, la seule différence est :

Actuellement 3,5/5 étoiles.

Définir la valeur initiale

Étape 3 : L'image étoile

On fait une image avec trois étoiles La première étoile est une valeur nulle, et la seconde. star est une valeur nulle. La première est la valeur à sélectionner et la troisième est la valeur réelle.

Figure 2

Étape 4 : Le CSS, la Magie

.star-rating li.current -rating{
arrière-plan : url(star_rating.gif) en bas à gauche ;
position : absolue ;
hauteur : 30px ;
affichage : bloc ;
texte-indent : -9000px ;
z-index: 1;
>

Il définit la valeur initiale Afin d'éviter d'hériter du positionnement relatif du conteneur ul, position: absolue est utilisée ; is height:30px; Les autres cachent le texte et définissent l'alignement.

valeur nulle css

.star-rating{
…
arrière-plan : url(star_rating.gif) en haut à gauche répéter-x;
}

Sélectionnez la valeur css

.star-rating li a:hover{
arrière-plan : url(star_rating.gif) centre gauche ;
…
}

Bien sûr la valeur initiale changera avec la sélection, alors comment réaliser son changement ?

style = "width:105px;">Actuellement 3,5/5 étoiles.

Après avoir lu ce code, je pense que vous en connaîtrez la raison ! ? Quel est le calcul ?

Note moyenne|Moyenne : 3,5
Largeur de chaque étoile|Largeur de chaque étoile : 30 px ;
Régler la largeur sur|Régler la largeur sur : 3,5 * 30 = 105px

Jetons un coup d'œil à ce nouveau modèle
* Exemple 1 : système de notation 150 x 30 étoiles
* Exemple 2 : système de notation 125 x 25 étoiles
* Exemple 3 : notation verticale 25 x 125 étoiles système

Nous utilisons php pour le mettre en œuvre

Le premier est le principe de mise en œuvre

Obtenir le nombre d'étoiles du précédent css I, II, mais on peut voir que tant que le clic peut être identifié et que les données sont enregistrées et stockées dans la base de données, puis que les données sont appelées depuis la base de données pour le calcul,
vous pouvez obtenir la moyenne actuelle score - le score actuel.

1. Ce qui suit est le SQL pour créer la base de données

CREATE TABLE notes (
id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
total_votes INT NOT NULL,
total_value INT NOT NULL,
which_id INT NOT NULL,
which_table VARCHAR(255),
used_ips LONGTEXT NULL
);

2. Référence du fichier de paramètres

require("connectDB.php");
require("closeDB.php");
require( "tableName.php");
require("openDB.php");
?>

3. Afficher le programme de vote et mettre à jour le programme de données de vote.

$rating_posted=$_GET['vote'];//variable passée par la valeur des étoiles
$id =$_GET['id'];
$query=mysql_query("SELECT total_votes, total_value, used_ips FROM $tableName WHERE id='".$id."' ")ou die(" Erreur : " .mysql_error( ));
$numbers=mysql_fetch_assoc($query);
$checkIP=unserialize($numbers['used_ips']);
$count=$numbers['total_votes'];/ /combien de votes total
$current_rating=$numbers['total_value'];//nombre total de notes additionnées et stockées
$sum=$rating_posted+$current_rating;// additionner la valeur actuelle du vote et le valeur totale du vote
$tense=($count==1) ? "vote" : "votes";//forme plurielle votes/vote
$voted=@mysql_fetch_assoc(@mysql_query("SELECT title FROM $tableName WHERE used_ips LIKE '%".$_SERVER['REMOTE_ADDR']."%' AND id='$id' ")); //Modèle correspondant à l'ip : suggéré par Bramus ! http://www.php.cn/ - cette variable recherche l'adresse IP précédente qui a voté et renvoie vrai ou faux

if($voted){
echo "

".
"< ;ul class ="star-rating">".
"

".
"

1

".
"

2

".
"

3

".
"

4< ;/li> ;".
"

5

".
"".
"

Note : {".$count." ".$tense." cast}
Vous avez déjà voté.

";//afficher la valeur actuelle du vote avec les chiffres actuels
}else{

if(isset($_GET['vote'])) {

if($sum==0){
$added=0;//vérifier si le premier vote a été comptabilisé
}else{
$added=$count +1 ; //incrémente le nombre actuel de votes
}

if(is_array($checkIP)){
array_push($checkIP,$_SERVER['REMOTE_ADDR']);//if c'est un tableau, c'est-à-dire qu'il a déjà des entrées à pousser dans une autre valeur
}else{
$checkIP=array($_SERVER['REMOTE_ADDR']);//pour la première entrée
}

$ insert=serialize($checkIP);
mysql_query("UPDATE $tableName SET total_votes='".$added."', total_value='".$sum."', used_ips='".$insert ."' WHERE id='".$_GET['id']."'");

echo "

Rating : ".@ number_format($sum/$added,2)." {".$added." ".$tense cast} Merci pour votre vote !

";//afficher la valeur mise à jour du vote
}else{
?>

4. Programme d'évaluation des visiteurs

 
  
  
  
 

Comment Ce tutoriel était-il clair ?

• Note actuelle

    
• 1

    
• 2

    
• 3

    
• 4

    
• 5

5.最新评分结果提示

echo "

Note : ".@number_format($sum/$count,2)." {".$count." ".$tense." la valeur actuelle mise à jour du vote
} //fin isset get vote 
} //fin voté vrai, faux
?>