javascript实现五星评价代码(源码下载)


Posted in Javascript onAugust 11, 2015

废话不多说,先上个效果图:

javascript实现五星评价代码(源码下载)

查看演示                   源码下载

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实现五星评价功能就完成了,还有其他方法,时间有限就不写了,请持续关注本站,谢谢。!

Javascript 相关文章推荐
增强的 JavaScript 的 trim 函数的代码
Aug 13 Javascript
JavaScript 语言的递归编程
May 18 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
原生js实现日期联动
Jan 12 Javascript
jQuery实现购物车数字加减效果
Mar 14 Javascript
javascript每日必学之循环
Feb 19 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
vue-列表下详情的展开与折叠案例
Jul 28 Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 Javascript
jQuery的remove()方法使用详解
Aug 11 #Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 #Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 #Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 #Javascript
jquery实现滑动特效代码
Aug 10 #Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 #Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 #Javascript
You might like
CentOS7.0下安装PHP5.6.30服务的教程详解
2018/09/29 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
node.js中的console用法总结
2014/12/15 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
Python 比较两个数组的元素的异同方法
2017/08/17 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
python getpass模块用法及实例详解
2019/10/07 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
师范生实习的个人自我鉴定
2013/10/20 职场文书
大三毕业自我鉴定
2014/01/15 职场文书
毕业留言寄语大全
2014/04/10 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
英语导游欢迎词
2015/09/30 职场文书
Java如何实现树的同构?
2021/06/22 Java/Android