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表单常用验证集合
Jan 16 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
javascript实现控制文字大中小显示
Apr 28 Javascript
功能强大的Bootstrap使用手册(一)
Aug 02 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 Javascript
vue全局使用axios的操作
Sep 08 Javascript
如何用JS实现网页瀑布流布局
Apr 24 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
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
php通过sort()函数给数组排序的方法
2015/03/18 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
DOM 基本方法
2009/07/18 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
vue超时计算的组件实例代码
2018/07/09 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
Python实现两款计算器功能示例
2017/12/19 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
Python中的引用知识点总结
2019/05/20 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
Python matplotlib实时画图案例
2020/04/23 Python
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
班组长岗位职责
2014/03/03 职场文书
中学生演讲稿
2014/04/26 职场文书
2014年环保局工作总结
2014/12/11 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
安全主题班会教案
2015/08/12 职场文书
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python