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


Posted in Javascript onOctober 31, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
分享14个很酷的jQuery导航菜单插件
Apr 25 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
window resize和scroll事件的基本优化思路
Apr 29 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 Javascript
vuex存储token示例
Nov 11 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 #Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 #Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 #Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 #Javascript
js实现点击获取验证码倒计时效果
Jan 28 #Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 #Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 #Javascript
You might like
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
实现“上一页”和“下一页按钮
2006/10/09 PHP
PHP写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
在python的类中动态添加属性与生成对象
2016/09/17 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
python决策树之C4.5算法详解
2017/12/20 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
国庆节演讲稿
2014/05/27 职场文书
健康证明
2015/06/19 职场文书
新郎新娘致辞
2015/07/31 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript
Python集合set()使用的方法详解
2022/03/18 Python
Python+Tkinter制作专属图形化界面
2022/04/01 Python