Home > Article > Web Front-end > JS实现的论坛Ajax打分效果完整实例_javascript技巧

JS实现的论坛Ajax打分效果完整实例_javascript技巧

WBOYOriginal: 2016-05-16 15:34:161159browse

本文实例讲述了JS实现的论坛Ajax打分效果。分享给大家供大家参考，具体如下：

这是论坛常见的一种Ajax打分效果，使用了Discuz老版论坛的就有此种效果，目前有很多网站也有类似的，分享给大家吧，我觉得非常实用的Ajax评分效果，使用了一个背景图片，自己可以下载。

运行效果截图如下：

在线演示地址如下：

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

具体代码如下：

<!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>

希望本文所述对大家JavaScript程序设计有所帮助。

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript中的定时器之Item23的合理使用_javascript技巧Next article：javascript字符串替换函数如何一次性全部替换掉_javascript技巧

See more

JS实现的论坛Ajax打分效果完整实例_javascript技巧

Related articles