22.3 评星效果

22.3  评星效果
【实例描述】

评星效果在很多网站起到调查的作用,如图书网站上读者对新书的评价。本例学习如何制作这种评星效果。

【实现代码】

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>标题页</title>

<script>

var starNum=0;

function chgStar()

{

    starNum=event.srcElement.id.slice(-1);                //从第一个到结束

    for (var i=1;i<=6;i++) eval("id"+i).innerText="☆";       //显示的星星

    for (var j=1;j<=starNum;j++) eval("id"+j).innerText="★";     //选中的星星

}

function getStar()

{

    alert("用户的评价是"+starNum+"颗星!");                   //显示评级数

}

for (var i=1;i<=6;i++)

{ 

    //动态输出span,并设置span的样式和事件

    document.write('<span id="id'+i+'" onclick="chgStar()" style="cursor: hand;">☆</span>');

}

document.write('<br/><br/><button onclick="getStar()">评级分数</button>');                                                                    //动态输出按钮,包括其事件

</script>

</head>

<body>

</body>

</html>


【运行效果】

本例的运行效果如图22-3所示。



图22-3  本例的运行效果

【难点剖析】

本例的难点是用户选中第5颗星时,此星前面的星都要变成黑色。“starNum”变量获取的是用户选择的星星的“id”,使用“for (var j=1;j<=starNum;j++)”语句循环设置对应的“span”元素的内容为黑色星星。

你可能感兴趣的:(J#)