22.3 评星效果

最新推荐文章于 2022-06-24 17:41:25 发布

qf_hy

最新推荐文章于 2022-06-24 17:41:25 发布

阅读量117

点赞数

分类专栏： JavaScript 文章标签： J#

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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”元素的内容为黑色星星。