评分功能

第一种方法:仅点击时有反应

  1. function indexOf(arr,element) {
  2. for (var i = 0; i < arr.length;i++ ) {
  3. if (arr[i] == element) {
  4. return i;//返回element在arr数组中的位置号
  5. }
  6. }
  7. return -1;//未发现该元素时的返回值
  8. }
  9. function initevent() {
  10. var pingfen = document.getElementById("pingfen");
  11. var tds = pingfen.getElementsByTagName("td");
  12. for (var i = 0; i < tds.length; i++) {
  13. var td = tds[i];
  14. td.onclick = tdonclick;
  15. td.style.cursor = "pointer";//使经过的鼠标变为手状
  16. }
  17. }
  18. function tdonclick() {
  19. var pingfen = document.getElementById("pingfen");
  20. var tds = pingfen.getElementsByTagName("td");
  21. var index=indexOf(tds,this);//获取当前点击td在tds数组中的位置
  22. for (var i = 0; i <= index; i++) {//使鼠标点击之前的所有td背景颜色变为红色
  23. var td = tds[i];
  24. td.style.background = "red";
  25. }
  26. for (var i = index + 1; i < tds.length; i++) {//使鼠标点击之后的所有td背景颜色变为白色
  27. var td = tds[i];
  28. td.style.background = "white";
  29. }
  30. }
  1. function initevent() {
  2. var pingfen = document.getElementById("pingfen");
  3. var tds = pingfen.getElementsByTagName("td");
  4. for (var i = 0; i < tds.length; i++) {
  5. var td = tds[i];
  6. td.style.cursor = "pointer";
  7. td.onmouseover = function () {
  8. var pingfen = document.getElementById("pingfen");
  9. var tds = pingfen.getElementsByTagName("td");
  10. var index = indexOf(tds, this);
  11. for (var i = 0; i <= index; i++) {
  12. tds[i].innerText = "★";
  13. }
  14. for (var i = index+1; i < tds.length; i++) {
  15. tds[i].innerText = "☆";
  16. }
  17. };
  18. td.onclick = function () {
  19. alert("你的评分是：" + (indexOf(tds, this) + 1) + "分");
  20. }
  21. }
  22. }

网页内容：

  1. <body onload="initevent()">
  2. <table id="pingfen">
  3. <tr><td>★</td><td>★</td><td>★</td><td>★</td><td>★</td></tr>
  4. </table>
  5. </body>

第二种方法：标准版

  1. function indexOf(arr, element) {
  2. for (var i = 0; i < arr.length; i++) {
  3. if (arr[i] == element) {
  4. return i;
  5. }
  6. }
  7. return -1;//未发现数组arr内含有element里的返回值
  8. }
  9. function initevent() {
  10. var pingfen = document.getElementById("pingfen");
  11. var tds = pingfen.getElementsByTagName("td");
  12. for (var i = 0; i < tds.length; i++) {
  13. var td = tds[i];
  14. td.style.cursor = "pointer";
  15. td.onmouseover = wjxover;
  16. td.onclick = wjxclick;
  17. }
  18. }
  19. function wjxover() {
  20. var pingfen = document.getElementById("pingfen");
  21. var tds = pingfen.getElementsByTagName("td");
  22. var index = indexOf(tds, this);
  23. for (var i = 0; i <= index; i++) {
  24. var td = tds[i];
  25. td.innerText = "★";
  26. }
  27. for (var i = index+1; i <tds.length; i++) {
  28. var td = tds[i];
  29. td.innerText = "☆";
  30. }
  31. }
  32. function wjxclick() {
  33. var pingfen = document.getElementById("pingfen");
  34. var tds = pingfen.getElementsByTagName("td");
  35. alert("你评了"+(indexOf(tds, this)+1)+"分");
  36. }

网页内容：

  1. <body onload="initevent()">
  2. <table id="pingfen">
  3. <tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
  4. </table>

jquery版：

  1. $(function () {
  2. var arr = new Array();
  3. $("#pingfen td").mouseover(function () { $("td").css("cursor", "pointer"); $("#pingfen td").text("★"); $(this).nextAll().text("☆"); });
  4. $("#pingfen td").click(function () {
  5. $("#pingfen td").each(function (key) { if ($(this).text() == "★") { arr[key] = $(this).text(); } });
  6. alert("你评了" + arr.length + "分");
  7. arr.length = 0;//清空一下,以防连续评分出错
  8. });
  9. });
  10. $(function () {
  11. $("input[value=清空]").click(function () {
  12. $("#pingfen td").text("☆");
  13. });
  14. });

网页内容：

  1. <table id="pingfen"><tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr></table>
  2. <input type="button" value="清空" />
时间： 2024-10-15 03:25:30

评分功能的相关文章

前端设计与实现，使用拖拽来调整交友对象的评分功能

我的一个交友网站,其独特的流程包括,用户通过搜索发现潜在对象,给潜在对象加关注和打分,使用获得2012诺贝尔经济奖的特殊匹配算法计算出相互匹配的对象并推荐給相关用户.在这里,对交友对象的评分功能是此网站的基础功能,其方便和平滑与否关系重大.本视频演示我的设计与实现. 页内拖拽 跨页拖拽 一次点击把目标用户放入一个缓存区,然后利用分页控制走到目的页面,再进行拖拽.好处是能够实现精确控制. 想想看,你会如何设计这一功能? 其他特点 精确和强大的筛选器,让用户随心所欲的控制筛选条件. 常用的筛选组合放

活动列表+星星评分功能（源码下载）

这是一个Demo,内容主要是模仿一些网站的数据列表,实现评分功能.放缩功能. 下面是小Demo: 工具 一个星星评分插件+ jQuery1.8.2 思路 思路很简单,通过整张表格是由后台生成(StringBuilder)然后发送给前台页面填充出来的. 当点击点评按钮后,会调用jQuery的slideToggle()方法,执行动画. 关于Ajax部分 本Demo一共两处使用Ajax,第一处是加载页面的时候,生成页面table,第二处是点击提交的时候,将数据提交给服务器. 代码特别简单,就不贴出来了

iOS应用内集成AppStore评分功能

iOS应用内部实现App Store评分功能,笔着整理总结有三种方式,各位可根据自己需求自己选择.先介绍下评分功能实现的三种方式. 1,通用方式通过App内部打开网页形式,跳转到AppStore编辑评论,可评分,可评论. 优点:方便,快捷,不受系统版本限制,目前最常用的方式. 缺点:内部网页形式加载缓慢,等待时间长,加载失败概率大. 2,iOS 6.0以后 在app内部加载AppStore 展示app信息 优点:展示速度比方法三块快 缺点:不能直接跳转到评论编辑页面,需要手动点击评论+编辑评论

Android app去应用市场评分功能

因为android市场很多,去各个应用市场评分的功能却不是很难实现. private void gotoRate(){ Uri uri = Uri.parse("market://details?id=" + getPackageName()); Intent goToMarket = new Intent(Intent.ACTION_VIEW, uri); try { startActivity(goToMarket); } catch (ActivityNotFoundExcept

iOS开发中打开本地应用、打开appStore应用、给app评分功能实现

app开发中,通常会有邀请用户给app打分的功能.而在iOS中,正式应用都是通过appStore 下载的,因此给app 打分也只能在 appStore中.因此,需要从应用跳转到appStore.方法是打开响应的url 即可.代码如下: NSString *appid = @"1234567"; NSString *str = [NSString stringWithFormat:@"itms-apps://itunes.apple.com/cn/app/id%@?mt=8&q

JavaScript 实现五角星评分功能

很久没写博客了,今年元旦到现在的业余时间一直在学习英语,看英文原著,挺耗时间的,没时间写博客(借口). 同事正在学习前端开发,写了这个 Demo 给他学习.嘻嘻 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>五角星评分</title> <link href="https://cdn.bootcss.com/font-aweso

jquery--实现类似淘宝星星评分功能

-   不正之处,欢迎指正.^-^.好绕的话 贴码.html <body> <div id="div"> <ul> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </div> <p id="p"><

android应用跳转至市场给软件评分功能

Uri uri = Uri.parse("market://details?id="+getPackageName()); intent = new Intent(Intent.ACTION_VIEW,uri); intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); startActivity(intent);

iOS 实现内部跳转AppStore实现“给我评分”功能

NSString *url = @"https://itunes.apple.com/us/app/v-ji-fen-chao-shi-fan-li-shen/id948095457?mt=8"; [[UIApplication sharedApplication] openURL:[NSURL URLWithString:[NSString stringWithFormat:@"%@",url]]]; 以上代码就是实现appStore跳转,这是V积分应用中实现的.