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实现五星评价功能就完成了,还有其他方法,时间有限就不写了,请持续关注本站,谢谢。!
相关推荐
-
jQuery基于图层模仿五星星评价功能的方法
本文实例讲述了jQuery基于图层模仿五星星评价功能的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&
-
jQuery满意度星级评价插件特效代码分享
这是一款基于jQuery 的星级评分效果实例,鼠标滑过星星区域显示评论信息提交内容,适用在评论表单里面,是表单美化提交内容的一种用户体验设计. 为大家分享的jQuery满意度星级评价插件特效代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>满意度jQuery星级评分插件</title> <
-
js仿淘宝评价评分功能
效果图: 图(1)初始图 图(2)点击效果 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>文件上传</title> <meta name="
-
Javascript模仿淘宝信用评价实例(附源码)
本文实例讲述了Javascript模仿淘宝信用评价实现方法.分享给大家供大家参考,具体如下: 老板昨天开会说:要给公司的购物平台增加信用评价功能,用户体验参考淘宝. 于是今天研究了一下,用jQuery模似一个类似的效果: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&
-
如何实现星星评价(jquery.raty.js插件)
1.引入jquery.js文件 2.引入jquery.raty.js 3.页面中放在这个:<span class="readOnly" data-path="images" ><i>4.5</i></span> 4.js: function star(obj,num){ $(obj).raty({ path: function() { return this.getAttribute('data-path');//路径
-
js实现五星评价功能
效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五星评价</title> <style> @font-face { font-family: 'iconfont'; /* project id 247957 */ src: url('//at.alicdn.com/t/f
-
javascript实现五星评价代码(源码下载)
废话不多说,先上个效果图: 查看演示 源码下载 javascript中的代码 var spans=document.getElementsByTagName("span"); var flag=5;//这个值随便取,只要不是01234就行 var Expand=function(){ //扩展代码,暂无 }; onload=function(){ //循环载入鼠标移入事件 for(var i=0;i<spans.length;i++){ spa
-
原生JavaScript实现连连看游戏(附源码)
向大家推荐一款原生JavaScript版连连看游戏,源码下载,首页如下图所示: 首先看一下html的布局方式在index.html文件中: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head>
-
JS库particles.js创建超炫背景粒子插件(附源码下载)
插件描述:particles.js用于创建粒子的轻量级 JavaScript 库. 查看 效果 源码下载 使用 加载 particles.js和配置粒子 <div id="particles-js"></div> <script src="particles.js"></script> app.js /* particlesJS.load(@dom-id, @path-json, @callba
-
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
弹出层用来向用户展示详细的信息,交互性非常强.弹出层有对话框.模态窗口等形式,这里我都把他们叫做弹出层,我的同事们也是这么叫的.一般我们喜欢使用比较成熟的弹出层插件如fancybox等,但在本文,我将先抛弃插件,给大家介绍如何使用jQuery+CSS3+Html5实现弹出层. 效果展示 源码下载 我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果,因此我们可以在示例中任意修改弹出层外观样式.甚至js方法调用.我们最终做出来的弹出层效果应该是响应式的,也就是说可以
-
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
本文实例讲述了原生JavaScript实现的淘宝轮播图效果.分享给大家供大家参考,具体如下: 轮播图是我们学习原生js的必经之路 它包含很多基本知识的运用,像this的使用,DOM的操作,还有setInterval的使用和清除,浮动与定位等等,很好的考察了我们的基础知识牢不牢固, 话不多说,直接上图 HTML代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF
-
JavaScript实现简单图片滚动附源码下载
昨晚德国和葡萄牙的焦点之战你看了吗?北京时间凌晨的比赛中,C罗领衔的葡萄牙0-4德国被完灭--他是金球奖得主.欧洲金靴.欧冠冠军核心,在葡萄牙队--9张图 C罗告诉你什么叫欲哭无泪 复制代码 代码如下: <span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
-
javascript 模拟坦克大战游戏(html5版)附源码下载
一.总结关键点和遇到的问题 1.javascript中的继承,最好父类只提供方法共享,属性写到各自子类中,避免父类和子类的构造函数混杂. 2.prototype模拟继承的代码,应写在所有方法定义之前,否则原型对象被改变,方法就变成了未定义,如: 复制代码 代码如下: Hero.prototype = new Tank (0, 0, 0); Hero.prototype.constructor = Hero; Hero.prototype.addLife = function(){ this.li
-
仿Aspnetpager的一个PHP分页类代码 附源码下载
基本逻辑思路和.net的一样,就是将通过实体类来进行配置换成了通过数组进行配置,逻辑比较简单,根据条件判断拼接分页html. 有以下几个简单的功能: 1:支持相关按钮的显示与否配置 2:支持每页数目,文本名称,html标签类名称的自由配置 3:支持url重写过的页面(需自己在配置数组中添加重写规则) 简单吧,还是直接上代码: 核心代码:pager.class.php 复制代码 代码如下: <?php class pager{ //分页的参数配置 private $config=array( //
-
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
基于jQuery实现仿搜狐辩论投票动画代码 ,一款个性的卡通小人正方反方辩论投票特效代码.移动动画效果平滑自然.具有非常好的用户体验.该源码兼容目前最新的各类主流浏览器. 效果演示 源码下载 html代码: <script type="text/javascript"> $(document).ready(function () { var a = 500; var b = 130; $("#white").animate({ width: 0, l
-
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
这是一款基于jQuery的百叶窗焦点图动画,和之前介绍的CSS3百叶窗焦点图动画不同的是,它的兼容性更好,实用性更强,因为它是基于纯jQuery的,基本上所有浏览器都能够支持.焦点图的图片切换动画是百叶窗的动画方式,但也有几种不同的百叶窗动画,因此也不会觉得单调. 在线演示 源码下载 HTML代码 <div id="slider"> <img src="images/1.jpg" alt="我们1" title=&quo
随机推荐
- 浅谈CI脚本异常退出问题定位
- jquery实现的网页自动播放声音
- JavaWeb工程中集成YMP框架快速上手
- 详解iOS 计步器的几种实现方式
- 灵活掌握Asp.net MVC中GridView的使用方法
- php ci框架验证码实例分析
- Python探索之静态方法和类方法的区别详解
- C++十六进制宏的用法详解
- Android自定义View实现loading动画加载效果
- JavaScript数据类型检测代码分享
- 《成功与失败》其实是你和自己的战争
- javascript获取ckeditor编辑器的值(实现代码)
- JavaScript与Java正则表达式写法的区别介绍
- js方法数据验证的简单实例
- jQuery中not()方法用法实例
- JS动态创建Table,Tr,Td并赋值的具体实现
- Android TabLayout实现京东详情效果
- JavaScript 模块的循环加载实现方法
- C#实现为一张大尺寸图片创建缩略图的方法
- 影响互联网50人揭晓 没有bill