JavaScript实现星级评分
更新时间：2017年01月12日 14:14:04 作者：森林长
本文主要分享了JavaScript实现星级评分的实例代码，具有一定的参考价值，下面跟着小编一起来看下吧
事件onmouseover
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JavaScript星级评分</title>
<style type="text/css">
*{margin:0;padding:0;}
.wrapper{height:20px;padding:5px;width:130px;margin:100px auto 10px;}
</style>
<script type="text/javascript">
function ArrayIndexOf(arr, element) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == element) {
return i;
}
}
return -1;
}
function GetTds() {
var tbl = document.getElementById("tblMain");
var tds = tbl.getElementsByTagName("td");
return tds;
}
function InitEvent() {
var tds=GetTds();
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.onmouseover = TdOnclick;
td.style.cursor = "pointer";
}
}
function TdOnclick() {
var tds = GetTds();
var index = ArrayIndexOf(tds, this);
for (var i = 0; i <=index; i++) {
var td = tds[i];
td.innerHTML = "★";
}
for (var j = index + 1; j < tds.length; j++) {
var td = tds[j];
td.innerHTML = "☆";
}
}
</script>
</head>
<body onload="InitEvent()" class="wrapper">
<table id="tblMain">
<tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
</table>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
javascript桥接桥接设计模式（Bridge Pattern）是一种结构型设计模式,它用于将抽象部分与其具体实现部分分离,使它们可以独立地变化,本文将通过代码示例详解的给大家介绍一下JS桥接模式,需要的朋友可以参考下2023-08-08
本篇文章主要是对javascript中的self和this用法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
JavaScript中使用Object.prototype.toString判断是否为数组
这篇文章主要介绍了JavaScript中使用Object.prototype.toString判断是否是数组,本文讲解了Object.prototype.toString相关知识,并给出了判断数组的实现代码,使用本文方法同样可以判断javascrpty的其它数据类型,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了javascript事件监听与事件委托,结合实例形式详细分析了javascript事件监听与事件委托相关原理、用法与操作注意事项,需要的朋友可以参考下2019-08-08
这篇文章主要为大家详细介绍了使用p5.js实现动态GIF图片临摹重现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
分享一个最近模仿市面彩票系统写个小案例，没有使用任何后台，从投注到开奖再到返奖都是用原生JS实现的。2016-09-09
这篇文章主要介绍了JS实现的竖向折叠菜单代码,涉及JavaScript动态遍历页面元素及样式修改的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
年底了各个公司都有抽奖活动，我也写了一个超级简单的代码来实现抽奖效果，这里没有华丽的Css3效果，但却有短小精悍的js代码。2015-01-01
xml文档转换程序的一个小应用，几行代码生成饼图。源代码打包提供。2010-11-11
这篇文章主要介绍了微信小程序js文件改变参数并在视图上及时更新的实现代码，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2018-06-06
最新评论