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制作loading动画效果 loading效果
Jan 14 Javascript
jQuery编程中的一些核心方法简介
Aug 14 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
关于TypeScript模块导入的那些事
Jun 12 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
微信小程序canvas分享海报功能
Oct 31 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
抖音短视频(douyin)去水印工具的实现代码
Mar 30 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
用php来检测proxy
2006/10/09 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
python查询mysql,返回json的实例
2018/03/26 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
Django 实现图片上传和下载功能
2020/12/31 Python
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
水利学院求职自荐书
2014/02/01 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
商铺门前三包责任书
2014/07/25 职场文书
规范化管理年活动总结
2014/08/29 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
2014年绿化工作总结
2014/12/09 职场文书
新郎新娘致辞
2015/07/31 职场文书
Go语言基础知识点介绍
2021/07/04 Golang
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers