JS 评分五角星随鼠标移动显示
时间:2022-05-04
本文章向大家介绍JS 评分五角星随鼠标移动显示,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
如图:
当鼠标放到哪个星星上时,之前的星星显示黑色星,之后的显示黑色星
<head>
<title></title>
<script type="text/javascript">
function indexOf(arr, element) { //传入array数组和当前值
for (var i =0; i < arr.length; i++) {
if (arr[i] == element) { //第i个值等于当前值
return i; //返回i
}
}
return-1;
}
function initEvent() {
var rating = document.getElementById("rating"); //取id为rating的标签
var tds = rating.getElementsByTagName("td"); //在id为rating标签下去名字为td的值
for (var i =0; i < tds.length; i++) { //遍历
var td = tds[i];
td.style.cursor ='pointer'; //设置鼠标显示形式
td.onmouseover =function() { //当鼠标移动时… …
var rating = document.getElementById("rating"); //不用担心和initEvent中的rating、tds变量冲突,因为他们是两个函数,只是写在了一起而已。
var tds = rating.getElementsByTagName("td");
var index = indexOf(tds, this); //调用函数indexof计算鼠标当前为值
for (var i =0; i <= index; i++) { //遍历鼠标之前的值
tds[i].innerText ='★'; //将其赋值为“★”
}
for (var i = index+1; i <tds.length; i++) { //遍历鼠标之后的值
tds[i].innerText ='☆'; //将其赋值为“☆“
}
};
}
}
</script>
</head>
<body onload="initEvent()">
<table id="rating"><tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr></table>
</body>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 30 多个有内味道且笑死的人代码注释
- Logstash-input-jdbc 同步 mysql 准实时数据至 ElasticSearch 搜索引擎
- 总结一些,我在书写 CSS 的时候,经常犯的错误!
- 通俗理解 set,dict 背后的哈希表
- K8S 生态周报| Google 选择 Cilium 作为 GKE 下一代数据面
- [Introduction]万字手撕Go http源码server.go
- Python 3.9 值得关注的更新点
- 趣味算法:JS实现红绳算法(匹配合适的另一半)
- 2019夏令营笔试编程题
- redis学习(四)
- 使用 Yaml 进行 selenium 的 po 设计
- 几道暑期实习笔试题
- Java自动化测试(selenium 22)
- linux 实现双网卡绑定单个IP——team篇
- Eclipse华丽转身之控件表格工厂