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 相关文章推荐
Javascript 检测、添加、移除样式(className)函数代码
Sep 08 Javascript
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
AngularJs中$cookies简单用法分析
May 30 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
修改NPM全局模式的默认安装路径的方法
Dec 15 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 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
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
thinkphp特殊标签用法概述
2014/11/24 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
php工具型代码之印章抠图
2018/07/18 PHP
jquery实现居中弹出层代码
2010/08/25 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
python最长回文串算法
2018/06/04 Python
Python函数参数操作详解
2018/08/03 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
消防应急演练方案
2014/02/12 职场文书
教师求职自荐信
2014/03/09 职场文书
法律专业求职信
2014/05/24 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
农村文化活动总结
2014/08/28 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
Java实现房屋出租系统详解
2021/10/05 Java/Android
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android