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 相关文章推荐
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
页面中js执行顺序
Nov 09 Javascript
jquery.ui.draggable中文文档
Nov 24 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
基于javascript实现碰撞检测
Mar 12 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
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
让你的网站首页自动选择语言转跳
2006/12/06 PHP
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
python多线程编程中的join函数使用心得
2014/09/02 Python
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
Python编程入门的一些基本知识
2015/05/13 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
使用Python实现分别输出每个数组
2019/12/06 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
Python 解析简单的XML数据
2020/07/24 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
Django如何与Ajax交互
2021/04/29 Python
Python中json.dumps()函数的使用解析
2021/05/17 Python