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

 更新时间:2015年08月11日 09:03:19   作者:Z帅来袭  
大家在淘宝购物之后,都会对卖家的服务进行评论,那么五星评价代码是怎么实现的呢?下面小编给大家介绍基于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实现五星评价功能就完成了,还有其他方法,时间有限就不写了,请持续关注本站,谢谢。!

相关文章

  • JS使用正则表达式实现常用的表单验证功能分析

    JS使用正则表达式实现常用的表单验证功能分析

    这篇文章主要介绍了JS使用正则表达式实现常用的表单验证功能,结合实例形式分析了JS基于正则表达式的表单验证功能原理、实现技巧与操作注意事项,需要的朋友可以参考下
    2020-04-04
  • js控制的遮罩层实例介绍

    js控制的遮罩层实例介绍

    把项目里很土的弹窗,改成了遮罩层显示,现在感觉好多了。在这里创建一个div和body一样大小,这样就可以把整个页面全部盖住了,具体实现祥看本文,希望可以帮助到你
    2013-05-05
  • JS将光标聚焦在文本最后的实现代码

    JS将光标聚焦在文本最后的实现代码

    这篇文章主要介绍了JS将光标聚焦在文本最后的方法,需要的朋友可以参考下
    2014-03-03
  • 利用JavaScript实现检测用户是否在线功能

    利用JavaScript实现检测用户是否在线功能

    这篇文章主要为大家详细介绍了如何利用JavaScript实现检测用户是否在线功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2022-12-12
  • Bootstrap导航条鼠标悬停下拉菜单

    Bootstrap导航条鼠标悬停下拉菜单

    这篇文章主要为大家详细介绍了Bootstrap导航条鼠标悬停下拉菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • javascript学习笔记--数字格式类型

    javascript学习笔记--数字格式类型

    很多人也许只知道 123,123.456,0xff 之类的数字格式。 其实 js 格式还有很多数字格式类型,比如 1., .1 这样的,也有 .1e2 这样的。
    2014-05-05
  • bootstrap datepicker的基本使用教程

    bootstrap datepicker的基本使用教程

    这篇文章主要介绍了bootstrap datepicker的基本使用教程,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • 运用js实现图层拖拽的功能

    运用js实现图层拖拽的功能

    js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件,下面和小编来一起学习一下吧
    2019-05-05
  • JavaScript交换两个变量值的七种解决方案

    JavaScript交换两个变量值的七种解决方案

    最近在写位操作的时候突然想到了这个问题,突然想总结一下,交换变量值的问题可能使我们学习编程语言接触到的比较早的逻辑问题,小伙伴或多或少会两种解决的方法,本文提供了七种解决的方法,下面跟着小编来一起看看吧。
    2016-12-12
  • js 定时器setTimeout无法调用局部变量的解决办法

    js 定时器setTimeout无法调用局部变量的解决办法

    javascript中定时器setTimeout无法调用局部变量,只需要将setTimeout的第一个参数改成函数对象,而不是字符串,就可以了
    2013-11-11

最新评论