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选项卡TAB示例代码
Aug 28 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
javascript执行环境及作用域详解
May 05 Javascript
JS中常用的正则表达式
Sep 29 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 Javascript
解决Vue项目中tff报错的问题
Oct 21 Javascript
JS数组去重详情
Nov 07 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 autoload机制的详解
2013/06/09 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
VSCode使用之Vue工程配置eslint
2019/04/30 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
Linux上比较文件的命令都有哪些
2012/02/24 面试题
宠物店的创业计划书范文
2014/01/11 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
女性励志书籍推荐
2019/08/19 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL