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>

时间: 2024-08-28 10:55:38

javascript代码实现简单的五星评价功能!的相关文章

jquery代码实现简单的五星评价功能!

实现: 1,鼠标移动到第三个星星,则一二三星星变亮,后两个变暗 2,鼠标点击某个星星后,可以继续选择,但拿开后星星会定格住你点击的位置 <script type="text/javascript"> //★ $(function () { //由于不好获取点击的span的是何坐标,所以声明一个变量来记录点击的span标签的id var mark; $("*").css({ margin: "0px", padding: "0

微信小程序 五星评价功能

要实现的效果:点击到第几颗星,就要显示到第几颗星,///////////////// 接下来直接查看源码: <view class="l-evalbox row"> <text class="l-evaltxt">满意度:</text> <view class="l-evalist flex-1" bindtap="chooseicon"> <icon class=&quo

微信朋友圈评价功能的细节考虑及实现

1. 微信朋友圈 微信朋友圈的布局很容易,网上类似的代码也很多,但是评价功能有些细节的地方要考虑,主要是为了用户体验. 类似键盘不要遮挡评价框,评价框随着内容的增多变长这些网上的处理方法很多,这里就不列出来了. 微信朋友圈只要按了评价,对话框升起来正好是落在了这条状态的正下方,这个小细节有着非常好的用户体验,这种实现方式有很多,下面来说说我实现的方法. 2. 评价细节的实现 我的方法是,按下评价按钮的时候先把按钮所在的cell的尾部的位置坐标y保存下. self.replyViewDraw =

代码示例:一些简单技巧优化JavaScript编译器工作详解,让你写出高性能运行的更快JavaScript代码

告诉你一些简单的技巧来优化JavaScript编译器工作,从而让你的JavaScript代码运行的更快.尤其是在你游戏中发现帧率下降或是当垃圾回收器有大量的工作要完成的时候. 单一同态: 当你定义了一个两个参数的函数,编译器会接受你的定义,如果函数参数的类型.个数或者返回值的类型改变编译器的工作会变得艰难.通常情况下,单一同态的数据结构和个数相同的参数会让你的程序会更好的工作. function example(a, b) { // 期望a,b都为数值类型 console.log(++a * +

通过javascript库JQuery实现页面跳转功能代码

通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum").val();//#gotopagenum是文本框的id属性 location.href = "NewList.aspx?pagenum="+pn;//location.href实现客户端页面的跳转 }); 实例2: 实现跳转:window.location = 'user!add.

[JavaScript] js实现简单的代码运行框

<script type="text/javascript">// <![CDATA[ function runCode(obj) { var winname = window.open('', "_blank", ''); winname.document.open('text/html', 'replace'); winname.document.write(obj.value); winname.document.close(); } //

简单的页面互点Javascript代码

简单的页面互点Javascript代码,可以适用于前端$(function(){ $('.ip_b_con_item li,.pro_index_list li').mouseover(function(){ $(this).addClass("hover"); }); $('.ip_b_con_item li,.pro_index_list li').mouseleave(function(){ $(this).removeClass("hover"); });

从零开始实现基于微信JS-SDK的录音与语音评价功能

最近接受了一个新的需求,希望制作一个基于微信的英语语音评价页面.即点击录音按钮,用户录音说出预设的英文,根据用户的发音给出对应的评价.以下是简单的Demo: ![](reecode/qrcode.png) --> 最近接受了一个新的需求,希望制作一个基于微信的英语语音评价页面.即点击录音按钮,用户录音说出预设的英文,根据用户的发音给出对应的评价.以下是示例二维码,使用微信扫一扫即可查看: ? 录音 ? 录音动画 ? 录音播放 ? 英语语音评价(部分实现) ? 只允许微信客户端打开 零 技术选型

编写简洁的 JavaScript 代码

作者:尹锋链接:https://www.zhihu.com/question/20635785/answer/223515216来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 避免使用 js 糟粕和鸡肋 这些年来,随着 HTML5 和 Node.js 的发展,JavaScript 在各个领域遍地开花,已经从"世界上最被误解的语言"变成了"世界上最流行的语言".但是由于历史原因,JavaScript 语言设计中还是有一些糟粕和鸡肋,比如