js五星评分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
.score{
width: 500px;
margin: 200px auto;
border: 1px solid #ddd;
height: 40px;
}
.score a{
display: inline-block;
width: 24px;
height: 24px;
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="score" id="score1">
<a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a>
<span id="score_txt">暂无评价...</span>
</div>
<script>
var arr = ["较差","差","一般","好","很好"]
var oA = document.getElementsByTagName("a")
var oSpan = document.getElementById("score_txt")
var n = -1
for (var i=0;i<oA.length;i++) {
oA[i].index = i
oA[i].onmouseover = function(){
for (var i=0;i<oA.length;i++) {
oA[i].style.background = ""
oSpan.innerHTML = "暂无评价...."
}
for (var i=0;i<=this.index;i++) {
oA[i].style.background = "green"
oSpan.innerHTML = arr[this.index]
}
}
oA[i].onmouseout = function(){
for (var i=0;i<oA.length;i++) {
oA[i].style.background = ""
oSpan.innerHTML = "暂无评价...."
}
for (var i=0;i<=n;i++) {
oA[i].style.background = "green"
oSpan.innerHTML = arr[n]
}
}
oA[i].onclick = function(){
n = this.index
for (var i=0;i<=this.index;i++) {
oA[i].style.background = "green"
oSpan.innerHTML = arr[this.index]
}
}
}
</script>
</body>
</html>
最新文章
- Outlook HTML渲染引擎
- MMORPG大型游戏设计与开发(服务器 游戏场景 聊天管道和寻路器)
- Win7---------专区
- USB
- iOS开发——实用篇Swift篇&;项目开发常用实用技术
- UVALive 5103 Computer Virus on Planet Pandora Description 一些新兴需求模式的字符串 AC自己主动机
- 【转】Objective-C Runtime
- Java 判断回文字符串有多少和其中的最大字符串
- Hands-On Machine Learning with Scikit-Learn and TensorFlow---读书笔记
- 【Unity3D技术文档翻译】第1.5篇 本地使用 AssetBundles
- Bate版敏捷冲刺每日报告--day1
- Nowcoder | [题解-N210]牛客OI月赛2-提高组
- windows下git显示文件被修改,实际没有改动的问题解决办法
- Idea下载安装
- FineReport基本使用
- Windows平台下在服务中添加MySQL
- 歌手右侧快速入口ABCD....
- servlet深探
- 动态加载script文件
- SpringMVC的@RequestParam