javascript实现五星评价代码(源码下载)
2015-08-11 09:03
567 查看
废话不多说,先上个效果图:
javascript中的代码
var spans=document.getElementsByTagName("span"); var flag=5;//这个值随便取,只要不是01234就行 var Expand=function(){ //扩展代码,暂无 }; onload=function(){ //循环载入鼠标移入事件 for(var i=0;i<spans.length;i++){ spans[i].onmouseover=function(){ var id=parseInt(this.id); for(var i=0;i<=id;i++){ spans[i].innerHTML="★"; } for(var j=id+1;j<5;j++){ spans[j].innerHTML="☆"; } }; } //循环载入鼠标点击星星事件 for(var i=0;i<spans.length;i++){ spans[i].onclick=function(){ var id=parseInt(this.id); flag=id; for(var i=0;i<=id;i++){ spans[i].innerHTML="★"; } Expand();//这里是鼠标点击星星的扩展,例如出现分值之类的,总之要扩展什么随你的大小便啦~ }; } //载入鼠标离开div事件 document.getElementById("div").onmouseout=function(){ //如果tag是3,则循环给把0 1 2 3几个星星整黄 if(flag>=0 && flag<=4){ for(var i=0;i<=flag;i++){ spans[i].innerHTML="★"; } for(var j=flag+1;j<5;j++){ spans[j].innerHTML="☆"; } } //如果tag没有值或者是初值5,则把所有的星星还原成空星星 else{ for(var i=0;i<spans.length;i++){ spans[i].innerHTML="☆"; } } }; };
body中的代码
<div id="div"> <span id="0">☆</span><span id="1">☆</span><span id="2">☆</span><span id="3">☆</span><span id="4">☆</span> </div>
以上代码很简单吧,javascript实现五星评价功能就完成了,还有其他方法,时间有限就不写了,请持续关注本站,谢谢。!
您可能感兴趣的文章:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- JavaScript拆分字符串时产生空字符的原因
- IE8开发人员工具教程(二)
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- PowerShell中执行Javascript的方法示例
- javascript asp教程第六课-- response方法
- javascript asp教程More About Recordsets
- javascript asp教程第十二课---session对象
- javascript asp教程创建数据库连接
- javascript asp教程错误处理