Maison interface Web js tutoriel js实现简单的星级选择器提交效果适用于评论等_javascript技巧

js实现简单的星级选择器提交效果适用于评论等_javascript技巧

May 16, 2016 pm 05:19 PM
提交 nombre d'étoiles 选择器

星级选择器,提交代码适用于评论等

没有用到js库,就是单独的js代码
js实现简单的星级选择器提交效果适用于评论等_javascript技巧 

复制代码 代码如下:



服务






  • default level

  • 1

  • 2

  • 3

  • 4

  • 5


价格






  • default level

  • 1

  • 2

  • 3

  • 4

  • 5


质量






  • default level

  • 1

  • 2

  • 3

  • 4

  • 5






复制代码 代码如下:



复制代码 代码如下:

body{font-size:12px;}
ul{padding:0;margin:0;}
/*star.css*/
.star_rating {list-style:none;margin:-1px 0 0 -1px; padding:0; width:70px; height:12px; position:relative; background:url(rating_stars.gif) 0 0 repeat-x; overflow:hidden;font-size:0;}
.star_rating li{padding:0;margin:0;float:left;}
.star_rating li a{display:block;width:14px;height:12px;text-decoration:none;text-indent:-9000px;z-index:20;position:absolute;padding:0;margin:0;}
.star_rating li a:hover{background:url(rating_stars.gif) 0 12px;z-index:2;left:0;}
.star_rating a.one_star{left:0;}
.star_rating a.one_star:hover{width:14px;}
.star_rating a.two_stars{left:14px;}
.star_rating a.two_stars:hover{width:28px;}
.star_rating a.three_stars{left:28px;}
.star_rating a.three_stars:hover{width:42px;}
.star_rating a.four_stars{left:42px;}
.star_rating a.four_stars:hover{width:56px;}
.star_rating a.five_stars{left:56px;}
.star_rating a.five_stars:hover{width:70px;}
.star_rating li.current_rating{background:url(rating_stars.gif) 0 24px;position:absolute;height:12px;display:block;text-indent:-9000px;z-index:1;left:0;}
/*end star.css*/
#star_level{margin:0 0 20px 20px;}
#star_level p{margin:20px 0 5px 0;}
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Quel est l'identifiant du sélecteur d'identifiant en CSS Quel est l'identifiant du sélecteur d'identifiant en CSS Sep 22, 2022 pm 03:57 PM

Quel est l'identifiant du sélecteur d'identifiant en CSS

Traitement des transactions MySQL : la différence entre la soumission automatique et la soumission manuelle Traitement des transactions MySQL : la différence entre la soumission automatique et la soumission manuelle Mar 16, 2024 am 11:33 AM

Traitement des transactions MySQL : la différence entre la soumission automatique et la soumission manuelle

Utilisez le sélecteur de pseudo-classe :nth-child(n+3) pour sélectionner le style des éléments enfants dont la position est supérieure ou égale à 3 Utilisez le sélecteur de pseudo-classe :nth-child(n+3) pour sélectionner le style des éléments enfants dont la position est supérieure ou égale à 3 Nov 20, 2023 am 11:20 AM

Utilisez le sélecteur de pseudo-classe :nth-child(n+3) pour sélectionner le style des éléments enfants dont la position est supérieure ou égale à 3

analyse du sélecteur de pseudo-classe d'apprentissage du pseudo-sélecteur css analyse du sélecteur de pseudo-classe d'apprentissage du pseudo-sélecteur css Aug 03, 2022 am 11:26 AM

analyse du sélecteur de pseudo-classe d'apprentissage du pseudo-sélecteur css

Du débutant au compétent : maîtrisez les compétences d'utilisation des sélecteurs et où Du débutant au compétent : maîtrisez les compétences d'utilisation des sélecteurs et où Sep 08, 2023 am 09:15 AM

Du débutant au compétent : maîtrisez les compétences d'utilisation des sélecteurs et où

Que faire si le sélecteur javascript échoue Que faire si le sélecteur javascript échoue Feb 10, 2023 am 10:15 AM

Que faire si le sélecteur javascript échoue

Les sélecteurs en CSS incluent-ils des sélecteurs de balises hypertextes ? Les sélecteurs en CSS incluent-ils des sélecteurs de balises hypertextes ? Sep 01, 2022 pm 05:25 PM

Les sélecteurs en CSS incluent-ils des sélecteurs de balises hypertextes ?

Analyse approfondie des sélecteurs is et Where : amélioration du niveau de programmation CSS Analyse approfondie des sélecteurs is et Where : amélioration du niveau de programmation CSS Sep 08, 2023 pm 08:22 PM

Analyse approfondie des sélecteurs is et Where : amélioration du niveau de programmation CSS

See all articles