zoukankan      html  css  js  c++  java
  • 如何用jQuery实现五星好评

      jQueryjs的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率。

      Js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里面来就可以了。

      接下来,我使用jQuery实现一个常见的五星好评功能。下面的页面中,我引用了前端的jQuery和bootstrap框架,读者可以从网上下载这些框架资源。 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>五星好评</title>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <script src="jquery-1.11.1.js"></script>
    </head>
    <!--设置样式-->
    <style>
        ul{
            list-style-type: none;
        }
        li{
            float: left;
            margin-left: 15px;
            font-size: 60px;
            font-family: "simsun";
            cursor: pointer;
        }
        div{
            clear: both;
        }
        button{
            margin-left: 70px;
            font-size:30px;
        }
    </style>
    <!--JS代码-->
    <script>
    //    入口函数
        $(function(){
    //        设置两个状态的星星
            var emptyStar="☆";
            var fullStar="★";
    //        li鼠标移入事件
            $("li").mouseenter(function(){
                $(this).text(fullStar).prevAll().text(fullStar).end().nextAll().text(emptyStar);
            });
    //        li鼠标离开事件
            $("li").mouseleave(function(){
                $("li").text(emptyStar);
                $("li.current").text(fullStar).prevAll().text(fullStar).end().nextAll().text(emptyStar);
    
            });
    //        li点击事件
            $("li").click(function(){
                if($(this).hasClass("current")){
                    $(this).removeAttr("class");
                }else{
                    $(this).attr("class","current").siblings().removeAttr("class");
                }
            })
    //        button点击事件
            $("button").click(function(){
                var boo=false;
                for(var i=0;i<$("ul>li").length;i++){
                    if($("ul>li").hasClass("current")){
                        boo=true;
                    }
                }
                if(boo){
                    console.log("分数:"+($("ul>li.current").index()+1)+"分");
                }else{
                    return alert("您还没有选择呢!");
                }
            })
        })
    </script>
    <body>
    <ul class="box">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>
    <div>
        <button>提交</button>
    </div>
    </body>
    </html>
    

      效果如下:

  • 相关阅读:
    为啥负利率国债有人抢着买?因为时代变了
    微增长时代
    U盘插入电脑后图标是灰色的,打开提示“请将磁盘插入驱动器”
    计算shell 脚本的执行时间
    win10系统应用商店打开后无法联网 代码: 0x80131500 的解决办法
    Jetbrains家的软件都可用的激活码-pycharm
    postman中x-www-form-urlencoded与form-data的区别
    升级Gogs版本
    上海对售价超1499元的茅台酒即没收并另处罚款
    提高收入的根本途径
  • 原文地址:https://www.cnblogs.com/lizhangyong/p/8158193.html
Copyright © 2011-2022 走看看