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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • js实现改进的仿蓝色论坛导航菜单效果代码

    js实现改进的仿蓝色论坛导航菜单效果代码

    本文实例讲述了js实现改进的仿蓝色论坛导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款改进的仿蓝色论坛导航菜单,滑动门级的导航菜单,网址跟踪链接的JS导航菜单,可以支持二级的菜单.为改善用户体验,加了延时.其原理是将链接地址和网址比较,如果一致,则加强该链接和上级链接的显示. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-blue-color-style-bbs-menu-codes/ 具体代码如下: <html> &l

  • php discuz 主题表和回帖表的设计

    php discuz 主题表和回帖表的设计

    以下内容仅摘录部分:如果由我们来设计主题表和回帖表,通常的做法是如下.        这样在获取主题列表时,直接使用分页算法提取Topics:查看某一帖子时,还需要对Topics,Posts进行jion链接. 此种设计的缺陷为: 1. Topics表存储Content的内容,其体积将会很大,对大体积表进行分页,性能很慢. 2. 显示Posts内容时将进行join操作,损耗性能 而Discuz的做法是进行如下设计.        将Topics里的Content拆分到Posts中去,同时Topic

  • Java模拟HTTP Get Post请求 轻松实现校园BBS自动回帖

    Java模拟HTTP Get Post请求 轻松实现校园BBS自动回帖

    本文实例为大家分享了Java模拟HTTP Get Post请求,校园BBS自动回帖功能,供大家参考,具体内容如下 设计思路 找到帖子链接的集合,最后面数字变化, 就可以得到不同的帖子 防止帖子发表会又被删了的情况, 进行判断帖子是否存在 遍历这个集合, 对每个链接做回帖的POST请求 重难点 Note: 回帖需要用户登录信息 一种是利用Cookie 另一种是进行模拟登录 本文采用前者 代码 代码比较简单,注意事项是找到自己的Cookie,赋给String yourCookeie就可以直接运行 主

  • Java模拟HTTP Get Post请求实现论坛自动回帖功能

    Java模拟HTTP Get Post请求实现论坛自动回帖功能

    最近想自动发帖回帖,拿某论坛试验了一下,发现可行,不过后续没有再使用,以免影响论坛正常运行. 1.帖子链接的格式为 http://bbs.***.***.**/forum.php?mod=viewthread&tid=774210 最后面774210数字变化, 就可以得到不同的帖子 2.防止帖子发表会又被删了的情况, 进行判断帖子是否存在 3.递增后面的 id 数字, 对每个链接做回帖的 POST 请求 重难点 回帖需要用户登录信息 一种是利用Cookie 另一种是进行模拟登录 本文采用前者 判

  • java实现http的Post、Get、代理访问请求

    本文实例讲解了java实现http的Post.Get.代理访问请求的详细代码片段,分享给大家供大家参考,具体内容如下 package com.snowfigure.kits.net; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.io.InputStreamReader; import java.io.OutputStreamWriter; im

  • java发送http的get、post请求实现代码

    Http请求类 package wzh.Http; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWriter; import java.net.URL; import java.net.URLConnection; import java.util.List; import java.util.Map; public

  • PHPWind 发帖回帖Api PHP版打包下载

    发帖演示: 次数: 5 地址: http://localhost/Test/upload/post.php?fid=5 完成时间: 2010-02-04 05:49:27 [ 发帖完毕点击进入主题列表 ] 灌水预防机制已经打开,在5秒内不能发帖 [ 发帖完毕点击进入主题列表 ] 灌水预防机制已经打开,在5秒内不能发帖 [ 发帖完毕点击进入主题列表 ] 共发送5次. 回帖演示: 次数: 5 地址: http://localhost/Test/upload/read.php?tid=41&page=

  • java使用httpclient模拟post请求和get请求示例

    复制代码 代码如下: import java.io.BufferedReader;import java.io.IOException;import java.io.InputStream;import java.io.InputStreamReader; import org.apache.commons.httpclient.DefaultHttpMethodRetryHandler;import org.apache.commons.httpclient.Header;import org

  • php通过curl模拟登陆DZ论坛

    libcurl同时也支持HTTPS认证.HTTP POST.HTTP PUT. FTP 上传(这个也能通过PHP的FTP扩展完成).HTTP 基于表单的上传.代理.cookies和用户名+密码的认证. <?php $discuz_url = 'http://www.jb51.net/';//论坛地址 $login_url = $discuz_url .'login.php?action=login';//登录页地址 $post_fields = array(); //以下两项不需要修改 $pos

  • python实现的登陆Discuz!论坛通用代码分享

    代码如下: #coding:gbk import urllib2,urllib,cookielib,re ''' 通用的登陆DZ论坛 参数说明parms: username:用户名(必填), password :密码(必填), domain:网站域名,注意格式必须是:http://www.xxx.xx/(必填), answer:问题答案, questionid:问题ID, referer:跳转地址 这里使用了可变关键字参数(相关信息可参考手册) ''' def login_dz(**parms)

随机推荐