js仿淘宝和百度文库的评分功能


Posted in Javascript onMay 15, 2016

本文实例为大家分享了类似于淘宝和百度文库的评分功能,js实现,供大家参考,具体内容如下

效果如图:

js仿淘宝和百度文库的评分功能

五个五角星分别放在了一个table的五列中。下面是一个<p>,用来显示评分结果的;代码如下:

<body onload="changebg()">
 <table border="0" align="center" cellpadding="0" cellspacing="0" id="maintable">
  <tr style=" font-size:30px;">
   <td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td>
  </tr>
 </table>
 <p align="center" id="result">您评了<label id="score"></label>分</p>

</body>

body的onload事件绑定的是一个方法,js代码如下:

<script type="text/javascript">
  function getindex(arr,element) {  //参数:数组,元素;返回兄弟元素的索引  
   for (var i = 0; i < arr.length; i++) {
    if (arr[i] == element) {
     return i;
    }
   }
   return -1;
  }

  function changebg() {  //为每个td设置获得焦点属性【也可以设置onclick属性】
   var maintable = document.getElementById("maintable");  //获取需要设置的表格
   var tds = maintable.getElementsByTagName("td");   //获取表格下的所有单元格
   document.getElementById("result").style.display = "none"; //设置得分结果为隐藏
   for (var i = 0; i < tds.length; i++) {
    var td = tds[i];
    td.onfocus = getonfocus;
    td.style.cursor = "pointer";
//为了设置鼠标放在五角星上呈手型
   }
    
  }
  function getonfocus(){  //设置td的焦点事件,
   var maintable = document.getElementById("maintable");
   var tds = maintable.getElementsByTagName("td");
   var index = getindex(tds, this);   //返回响应事件的索引 用this代表触发此事件的元素
   document.getElementById("result").style.display = "";  //得到分数后把结果显示出来
   document.getElementById("score").innerText = index + 1;
   for (var i = 0; i < index+1; i++) {
    tds[i].style.color = "red";
   }
   for (var i = index+1; i < tds.length; i++) {
    tds[i].style.color = "black";
   }

  }
 </script>

js代码主要有三个函数构成;

①:changebg();body的onload事件绑定的函数;为了实现对每个td元素绑定onfocus事件;

②:getonfocus();td元素onfocus事件的具体实现;

③:getindex();有两个参数,一个是td元素的集合数组,一个是相应事件的td元素,注意使用this关键字。主要返回相应事件的元素的索引,为了把响应事件元素之前的颜色显示成红色,后面的元素显示成黑色;

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
jquery实现上下左右滑动的方法
Feb 09 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
小程序实现左滑删除效果
Jul 25 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
RequireJS使用注意细节
May 15 #Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 #Javascript
jQuery插件开发汇总
May 15 #Javascript
Javascript的无new构建实例详解
May 15 #Javascript
Javascript基础知识盲点总结之函数
May 15 #Javascript
深入理解$.each和$(selector).each
May 15 #Javascript
js中最容易被忽视的事件问题大总结
May 15 #Javascript
You might like
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
react 生命周期实例分析
2020/05/18 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
中科创达面试题
2016/12/28 面试题
工程管理造价应届生求职信
2013/11/13 职场文书
十八大报告观后感
2014/01/28 职场文书
宾馆总经理岗位职责
2014/02/14 职场文书
财务整改报告范文
2014/11/05 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
Vue.Draggable实现交换位置
2022/04/07 Vue.js