recherche

Maison >interface Web >js tutoriel >Exemple complet d'effet de notation Ajax du forum implémenté par les compétences JS_javascript

Exemple complet d'effet de notation Ajax du forum implémenté par les compétences JS_javascript

WBOY
WBOYoriginal
2016-05-16 15:34:161247parcourir

L'exemple de cet article décrit l'effet de notation Ajax du forum implémenté par JS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Il s'agit d'un effet de notation Ajax courant dans les forums. Les personnes qui utilisent l'ancienne version des forums Discuz ont cet effet. Il existe de nombreux sites Web qui en ont des similaires. Je pense que c'est un effet de notation Ajax très pratique. . Utilisation J'ai une image de fond que vous pouvez télécharger vous-même.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-dicuz-ajax-df-plugs-codes/

Le code spécifique est le suivant : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>论坛Ajax评分效果</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin:0;padding:0;font-size:12px}
#show{font:bold 14px/2 Georgia;text-align:center;}
.star{position:relative;width:150px;margin:0 auto;}
.star,.index,.star a{overflow:hidden;height:25px;background:url('images/221815eep7piubznelxi3e.gif') repeat-x;color:#FFF;font:0/0 arial;}
.index{position:absolute;z-index:1;top:0;left:0;margin:0;background-position:0 -60px;height:25px}
.star a{position:absolute;z-index:3;top:0;width:30px;background-position:0 -90px;}
.star a:hover{z-index:2;left:0;background-position:0 -30px;}
a.star1{left:0;}
a.star1:hover{width:30px;}
a.star2{left:30px;}
a.star2:hover{width:60px;}
a.star3{left:60px;}
a.star3:hover{width:90px;}
a.star4{left:90px;}
a.star4:hover{width:120px;}
a.star5{left:120px;}
a.star5:hover{width:150px;}
</style>
<script>
function go(){
 var count=sum=distance=0;
 var dd,a;
 var as=document.getElementById("rank").getElementsByTagName("a");
 var here=document.getElementById("here");
 var show=document.getElementById("show");
 for(var i=0;i<as.length;i++){
  as[i].idx=i+1;
  as[i].onclick=function(){
   ++count;
   this.w=30;
   distance+=this.idx*this.w;
   here.style.width=distance/count+"px";
   dd=parseInt(here.style.width)/30;
   a=dd.toString().substr(0,4);
   show.innerHTML=a+"分";
   return false;
  }
 }
}
window.onload=function(){go()}
</script>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br />
<div id="rank" class="star">
 <h3 id="here" class="index"></h3>
 <a title="给1分" href="#" class="star1">1</a>
 <a title="给2分" href="#" class="star2">2</a>
 <a title="给3分" href="#" class="star3">3</a>
 <a title="给4分" href="#" class="star4">4</a>
 <a title="给5分" href="#" class="star5">5</a>
</div>
<div id="show">打分..</div>
</body>
</html>

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.

Déclaration：
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 précédent：Utilisation raisonnable du minuteur Item23 dans les compétences JavaScript_javascriptArticle suivant：Utilisation raisonnable du minuteur Item23 dans les compétences JavaScript_javascript

Articles Liés

Voir plus