JavaScript之模拟评星打分

时间:2021-07-24 17:55:15

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript之模拟评星打分</title>
</head>
<style>
.xx{
cursor:pointer;
}
</style>
<script type="text/javascript">
function clickStart(index){
clearStart();

for(var i=1;i<=index;i++){
var span = document.getElementById('start'+i);
//星星逐步递增
//alert('span-->'+span)
span.innerHTML='★';
}

}
function clearStart(){

for(var i=1;i<=8;i++){
var span = document.getElementById('start'+i);
span.innerHTML='☆';
}

}
</script>
<span onclick='clickStart(1)' id='start1' class='xx'>☆</span>
<span onclick='clickStart(2)' id='start2' class='xx'>☆</span>
<span onclick='clickStart(3)' id='start3' class='xx'>☆</span>
<span onclick='clickStart(4)' id='start4' class='xx'>☆</span>
<span onclick='clickStart(5)' id='start5' class='xx'>☆</span>
<span onclick='clickStart(6)' id='start6' class='xx'>☆</span>
<span onclick='clickStart(7)' id='start7' class='xx'>☆</span>
<span onclick='clickStart(8)' id='start8' class='xx'>☆</span>
</body>

//