`
qmug
  • 浏览: 197841 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

22.3 评星效果

J# 
阅读更多
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”元素的内容为黑色星星。

分享到:
评论

相关推荐

    《程序天下:JavaScript实例自学手册》光盘源码

    22.3 评星效果 22.4 输入框自动完成功能 22.5 Ajax效果的字符串过滤 22.6 Gmail右上角的Loading效果 22.7 使用XMLHTTP获取天气预报 22.8 拖拽任意对象 22.9 避免打开无效页面 22.10 用JavaScript调用Google AdSense ...

    程序天下:JavaScript实例自学手册

    22.3 评星效果 22.4 输入框自动完成功能 22.5 Ajax效果的字符串过滤 22.6 Gmail右上角的Loading效果 22.7 使用XMLHTTP获取天气预报 22.8 拖拽任意对象 22.9 避免打开无效页面 22.10 用JavaScript调用Google AdSense ...

    emacs-22.3.tar

    emacs-22.3.tar.taremacs-22.3.tar.taremacs-22.3.tar.taremacs-22.3.tar.taremacs-22.3.tar.taremacs-22.3.tar.taremacs-22.3.tar.taremacs-22.3.tar.taremacs-22.3.tar.taremacs-22.3.tar.taremacs-22.3.tar....

    MobaXterm-Portable-v22.3

    MobaXterm_Portable_v22.3:云服务连接工具

    erlang_otp_src_22.3.tar.gz

    erlang 22.3版本 erlang_otp_src_22.3 安装说明https://blog.csdn.net/tangcv/article/details/111841082

    electron-v22.3.27-win32-x64.zip

    electron-v22.3.27-win32-x64.zip

    otp_erlang_22.3.tar.gz

    当前内容主要是在Linux Delpoy的CentOS7中编译的erlang文件,主要对应rabbitmq3.8.3版本(改版本未22.3版本),与电脑端的编译不同

    otp_win32_22.3.exe

    32位的 erlang 22.3 版本 去官网下载太慢,所以在这里下载后提供给大家。 主要是 积分不足了,下载别的资源积分不够了,不然就免费了。

    Erlang_otp_win64_22.3.exe

    Erlang最新版安装包,版本:22.3 windows64位,官网下载实在太慢了,有时候直接打不开下载链接,给有需要的人。

    android-sdk_r22.3-windows.zip

    android-sdk_r22.3-windows.zip 官网下载地址 http://developer.android.com/sdk/index.html 参考资料http://hi.baidu.com/tianhuimin/item/0891344e77d0c416896d1055

    最新版windows Erlang otp_win64_22.3.exe

    最新版windows Erlang otp_win64_22.3.exe

    otp20.3-22.3-rabbitmq3.7.3.zip

    otp_win32_20.3,otp_win64_20.3,otp_win32_22.3,rabbitmq-server-3.7.3

    torch-1.12.0a0+2c916ef.nv22.3-cp38-cp38-linux_aarch64.whl

    torch-1.12.0a0+2c916ef.nv22.3-cp38-cp38-linux_aarch64.whl for jetson

    otp_22.3_for_windows_64.rar

    RabbitMQ所需otp_win64_22.3.exe Windows 64位安装文件,解决官网下载慢问题,免积分

    22.3 遍历树节点.mp4

    22.3 遍历树节点.mp4

    pip-22.3.tar.gz

    该资源为pip-22.3.tar.gz,欢迎下载使用哦!

    otp_win64_22.3.rar

    安装rabbitmq 需要的erlang 插件。从官网下载很不稳定,so 收藏到此,供大家下载使用,节省漫长的等待时间

    otp_win64_22.3.exe.zip

    windows下安装RabbitMQ的支持,Erlang在1991年由爱立信公司向用户推出了第一个版本,经过不断的改进完善和发展,在1996年爱立信又为所有的Erlang用户提供了一个非常实用且稳定的OTP软件库并在1998年发布了第一个开源...

    erlang-22.3.4.7-1.el6.x86_64.rpm

    erlang-22.3.4.7-1.el6.x86_64.rpm

    otp_win64_22.3.exe

    rabbitMq window安装 erlang环境,安装mq服务的前提必须需要erlang语言环境,本资源为目前最新的otp window64资源,希望能帮助到需要安装rabbitMq的同学,感谢支持!

Global site tag (gtag.js) - Google Analytics