实现，代码比较乱

源自：7-3 编程练习

实现，代码比较乱

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

span {

cursor: pointer;

}

</style>

<script type="text/javascript">

window.onload = function () {

// 获取元素

var stars = document.getElementById('stars').getElementsByTagName('span');

var ret = document.getElementById('ret');

//定义getStar函数

function getStar(starNum){

// this.style.color="red";

for(var i=0;i<stars.length;i++){

stars[i].style.color="";

}

for(var i=0;i<starNum;i++){

stars[i].style.color="red";

}

ret.innerHTML = starNum+"星";

}

// 每个星星节点的点击事件

for(var i=0;i<stars.length;i++){

var star = stars[i];

star.onclick = function(e){

// alert(1);

var srcEle =e.srcElement;

// console.log(srcEle);

var starNum = srcEle.getAttribute("star");

getStar(starNum);

debugger

}

}

}

</script>

</head>

<body>

<div id="stars">

<span star="1">★</span>

<span star="2">★</span>

<span star="3">★</span>

<span star="4">★</span>

<span star="5">★</span>

</div>

<div id="ret"></div>

</body>

</html>

提问者：慕粉3805859 2019-02-06 11:26

个回答

Arikak

2019-05-13 18:12:09

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span {
cursor: pointer;
}
</style>
<script type="text/javascript">
window.onload = function () {
// 获取元素
var stars = document.getElementById('stars').getElementsByTagName('span');
var ret = document.getElementById('ret');

//定义getStar函数
function getStar(n){
for(var i=0;i<stars.length;i++){
if(i<n-1 || i==n-1){
stars[i].style.color = "red";
}
else{
stars[i].style.color = "";
}
ret.innerHTML = n + "星";
}
}

// 每个星星节点的点击事件
for(var i = 0;i<stars.length;i++){
stars[i].onclick = function(){
var n = this.getAttribute("star");
console.log(n);
getStar(n);
}
}

}
</script>
</head>
<body>
<div id="stars">
<span star="1">★</span>
<span star="2">★</span>
<span star="3">★</span>
<span star="4">★</span>
<span star="5">★</span>
</div>
<div id="ret"></div>
</body>
</html>

0