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 相关文章推荐
JQuery的Alert消息框插件使用介绍
Oct 09 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
node-sass安装失败的原因与解决方法
Sep 04 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
深入了解JavaScript 私有化
May 30 Javascript
JavaScript实现网页留言板功能
Nov 23 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
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
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
js控制分页打印、打印分页示例
2014/02/08 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
python tkinter控件布局项目实例
2019/11/04 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
如何在python中实现线性回归
2020/08/10 Python
购买一个高级域名:BuyDomains
2018/03/11 全球购物
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
2014年教师节红领巾广播稿
2014/09/10 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
指导教师推荐意见
2015/06/05 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
Mysql 文件配置解析介绍
2022/05/06 MySQL
MySql数据库触发器使用教程
2022/06/01 MySQL