<script type="text/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="☆";
                         }
                     }
                 };
             };

         </script>
     </head>

     <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>
     </body>  我是新手,优化还不够,欢迎指正

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

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

    实现: 1,鼠标移动到第三个星星,则一二三星星变亮,后两个变暗 2,鼠标点击某个星星后,可以继续选择,但拿开后星星会定格住你点击的位置 <script type="text/javas ...

  2. 五十行javascript代码实现简单的双向数据绑定

    五十行javascript代码实现简单的双向数据绑定 Vue框架想必从事前端开发的同学都使用过,它的双向数据绑定机制能给我们带来很大的方便.今天闲着没事,尝试着实现一下双向数据绑定,接下来给大家分享一 ...

  3. JavaScript实现一个简单的密码输入功能

    常见的密码输入框当输入字符后会被替换成‘*’,而且旁边会有个小眼睛可以查看原本的字符,虽然input标签有这个功能,但这只是自己正在看正则表达式的时候突然想到的,就当做个练习,自己手动实现下: < ...

  4. 林大妈的JavaScript基础知识(二):编写JavaScript代码前的一些简单工作

    在介绍JavaScript语法前,我们需要知道,学习语法必须要多利用手敲代码来巩固记忆.因此,由于JavaScript的特性,它不能像C++和Java一样独立地编译及运行,我们需要在调试运行JavaS ...

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

    通过javascript库JQuery实现页面跳转功能代码的四段代码实例如下. 实例1: 1 2 3 4 $(function(){ var pn = $("#gotopagenum&quo ...

  6. 简单的页面互点Javascript代码

    简单的页面互点Javascript代码,可以适用于前端$(function(){ $('.ip_b_con_item li,.pro_index_list li').mouseover(functio ...

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

    最近接受了一个新的需求,希望制作一个基于微信的英语语音评价页面.即点击录音按钮,用户录音说出预设的英文,根据用户的发音给出对应的评价.以下是简单的Demo: ![](reecode/qrcode.pn ...

  8. javascript代码 调试方法

    你的代码可能包含语法错误,逻辑错误,如果没有调试工具,这些错误比较难于发现. 通常,如果 JavaScript 出现错误,是不会有提示信息,这样你就无法找到代码错误的位置. 在程序代码中寻找错误叫做代 ...

  9. 7个高性能JavaScript代码高亮插件

    本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染 ...

随机推荐

  1. JAVA学习课第五十三届 — IO流程(七)File打靶 &amp; Properties设置

    一个.锻炼 深度遍历目录 深度遍历非常自然而然想到递归,而递归就非常自然的想到事实上现的底层算法是栈 对指定文件夹下列出全部内容(包括子文件夹的内容) PS:建议不要遍历C盘 import java. ...

  2. T-SQL: 17 个与日期时间相关的自定义函数(UDF),周日作为周的最后一天,均不受 @@DateFirst、语言版本影响!

    原文:T-SQL: 17 个与日期时间相关的自定义函数(UDF),周日作为周的最后一天,均不受 @@DateFirst.语言版本影响! CSDN 的 Blog 太滥了!无时不刻地在坏! 开始抢救性搬家 ...

  3. Scala Sublime text 3 Build 编译

    使用Sublime text 3编译Scala 在sublime工具栏中[tools]->[Build System]->[new Build System]添加如下文本 { " ...

  4. 【C++ Primer】拷贝控制

    十三.复制控制 1. 复制构造函数 类中的成员函数都默觉得inline类型.所以即使在类定义体内的函数声明显示定义为inline类型,在进行函数定义时也可以将inline进行省略. // 复制构造函数 ...

  5. 运维自动化之SALTSTACK简单入门

    运维自动化之SaltStack简单入门 饱食终日而无所事事,是颓也,废也.但看昨日,费九牛二虎之力除一BUG便流连于新番之中,不知东方之既黑,实乃颓颓然而荒废矣.故今日来缀一文以忏昨日之悔. Salt ...

  6. OCP-1Z0-051-题目解析-第10题

    10. View the Exhibit and examine the structure of the PROMOTIONS table. Each promotion has a duratio ...

  7. [译]Java 设计模式之单例

    (文章翻译自Java Design Pattern: Singleton) 单例是在Java最经常被用到的设计模式.它通过阻止其他的实例化和修改来用于控制创建对象的数目.这一特性可应用于那些当只有一个 ...

  8. 深入了解 Java HelloWorld

    Java 的 Hello World 代码 public class HelloWorld { /** * * @param args */ public static void main(Strin ...

  9. C#压缩字符串

    在论坛上看到一个压缩字符串的问题,特此记录以备后用! static string GetStringR(string inputStr) { return Regex.Replace(inputStr ...

  10. Cocos2d-x 3.1.1开发环境

    Windows7上搭建Cocos2d-x 3.1.1开发环境   前言 现在,越来越多的公司采用Cocos2d-x 3.0来开发游戏了,但是现在这样的文章并不多,所以打算写一系列来帮助初学者快速掌握C ...