js仿淘宝和百度文库的评分功能
更新时间：2016年05月15日 16:30:02 投稿：lijiao
这篇文章主要为大家详细介绍了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程序设计有所帮助。
相关文章
这篇文章主要介绍了js+div实现文字滚动和图片切换效果代码,涉及javascript鼠标事件及页面元素图片滚动效果实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
事件对于控件来说至关重要，控件的消息通信机制使用事件的成本最低，但是对于JS控件来说有一些麻烦需要解决，JS类本身不支持事件，DOM模型支持的事件仅适应于浏览器的DOM节点。所以创建一套事件是我们写控件之前要做的2012-10-10
接口是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的类去实现,然后第三方就可以通过这组抽象方法调用,让具体的类执行具体的方法,这篇文章主要给大家介绍了基于Typescript与Axios的接口请求管理的相关资料,需要的朋友可以参考下2021-09-09
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
小时候我们玩过拼图游戏，是用自己的手去拼的。今天我们来研究研究用javascript来拼图感兴趣的朋友可以了解下,希望本文对你有所帮助2013-01-01
在iframe与父窗口或者与子窗口传递数据是一个麻烦的事情，如果我们能够写一个一劳永逸的接口那就再方便不过了，下面就来简答介绍一下如何实现此功能，对js iframe相关知识感兴趣的朋友一起学习吧2016-01-01
这篇文章主要介绍了JS实现三级折叠菜单特效，其它级可自动收缩,需要的朋友可以参考下2015-08-08
滚动变色的文字js特效，可看到文字在交替变色显示，以吸引人的注意，效果真心不错哦，需要的朋友可以参考下2014-06-06
用官方点的话讲继承是面向对象三大特征之一，可以使得子类具有父类的属性和方法，同时还可以在子类中重新定义以及追加属性和方法。本文整理了JavaScript实现继承的7种方式，需要的可以了解一下2023-04-04
你应该了解的JavaScript Array.map()五种用途小结
大家都知道map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。下面这篇文章主要给大家介绍了关于JavaScript Array.map()的五种用途，需要的朋友可以参考下2018-11-11
在面向对象的编程语言中,类和对象的关系是铸模和铸件的关系,对象总是从类创建而来,比如Java中,必须先创建类再基于类实例化对象,这篇文章主要介绍了JavaScript原型和原型链的相关知识,需要的朋友可以参考下2024-05-05
最新评论