<!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" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

    <title>迅雷评分效果 - 豪情</title>

    <style type="text/css">

        *{ margin:0; padding:0;}

        body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#fff;}

        table{border-collapse:collapse;border-spacing:0;}

        li{list-style:none;}

        input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;}

        textarea{resize:none}

        address,caption,cite,code,dfn,em,i,th,var{font-style:normal;font-weight:normal;}

        legend{color:#000;}

        a{color:#0a8cd2;text-decoration:none;}

        a:hover{text-decoration:underline;}

        .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

        .clearfix{display:inline-block;}

        .clearfix{display:block;}

        .none{display:none}

        .demo{ position:relative; width:300px;margin:0 auto; padding-top:120px;}

        .list li{ float:left; width:16px; height:16px; margin-right:3px;cursor:pointer; display:inline; overflow:hidden; background:url(https://images0.cnblogs.com/blog/100150/201304/02220917-50348f051a004a7385e4aaafcc3ce7a6.png) 0 -16px no-repeat;}

        .list li.cur{ background-position:0 0;}

        .score{ font-size:14px; color:#f60; padding:0 5px;}

        .text{ position:absolute; padding:3px 5px; left:135px;top:120px; border:1px solid #ccc;}

    </style>

</head>

<body>

<div id="demo" class="demo">

    <ul class="list">

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

    <p class="score"></p>

    <p class="text none">力荐</p>

</div>

<script type="text/javascript">

    var oDemo = document.getElementById('demo');

    var oUl = oDemo.getElementsByTagName('ul')[0];

    var oScore = oDemo.getElementsByTagName('p')[0];

    var oP = oDemo.getElementsByTagName('p')[1];

    var aLi = oUl.getElementsByTagName('li');

    var oLi = null;

    var aData = ['较差', '一般', '好看', '推荐', '力荐'];

    var bCheck = false;

    for(var i = 0; i < aLi.length; i++){

        var first = null;

        aLi[i].index = i;

        oLi = aLi[i];

        oLi.onmouseover = function(){

            for(i = 0; i < aLi.length; i++){

                aLi[i].className = '';

            }

            for(var j = 0; j <= this.index; j++){

                aLi[j].className = 'cur';

            }

            oP.style.display = 'block';

            oP.innerHTML = aData[this.index];

            if(!bCheck){

                oScore.innerHTML = (this.index + 1) * 20 + '分';

            }

        }

        oLi.onclick = function(){

            if(!bCheck){

                first = this.index;

                bCheck = true;

                alert('评分成功!');

            } else {

                for(i = 0; i < aLi.length; i++){

                    aLi[i].className = '';

                }

                for(var j = 0; j <= first; j++){

                    aLi[j].className = 'cur';

                }

                alert('你已评过分!');

            }

        }

    }

</script>

</body>

</html>

[JavaScript] js 迅雷评分效果的更多相关文章

  1. JS五星级评分效果(类似与淘宝打分效果)

    今天晚上研究下 五星级评分效果,类似于淘宝后台评分效果,如下图所示: 思路: 当鼠标移到一颗星的时候 判断当前的索引 当前及当前的索引前面的星星亮起来 每当移到任何一颗星星时候 下面跟随提示 mous ...

  2. js星级评分点击星级评论打分效果

    html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  3. js星级评分点击星级评论打分效果--收藏--转载

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

  5. jQuery动态星级评分效果实现方法

    本文实例讲述了jQuery动态星级评分效果实现方法.分享给大家供大家参考.具体如下: 这里的jQuery星级评分代码,是大家都很喜欢的功能,目前广泛应用,本星级评分加入了动画效果,注意,如果要真正实现 ...

  6. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  7. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  9. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

随机推荐

  1. Cookie中用户登录信息登录验证

    public class FormServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpSer ...

  2. 关于Servlet中重定向

    public class Red1Servlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpSer ...

  3. Matlab 之 im2col

    函数原型:B = im2col(A,[m n],block_type) 功        能:将矩阵A分为m×n的子矩阵,再将每个子矩阵作为B的一列. (1)当block_type为distinct时 ...

  4. JavaScript日常会跳的坑系列（二）

    1.Number()将部分非数字类型转换为0 强制转换为数值类型函数: parseFloat.parseInt 优点:对非数值类型统一返回NaN 缺点:会将一部分符合数值类型的字符串也识别为数值 pa ...

  5. python tornado+mongodb的使用

    tornado tar xvzf tornado-1.2.1.tar.gz cd tornado-1.2.1 python setup.py build sudo python setup.py in ...

  6. mvc Routing特性优化

    在mvc中,Url地址是利用routing特性来支持,但是这个Routing有个问题,多个不同的地址和指向同一个action方法, 例如: http://test.com (默认) http://te ...

  7. TMemIniFile 与TIniFile 区别

    在uses 申明 Inifiles MyStream:TMemIniFile; MyStream:=TMemIniFile.Create('c:\proxy.ini'); memo1.Text:=My ...

  8. WKWebView无法(通过URL schemes)跳转到其他App

    Custom scheme URL 在WKWebView中默认是不支持的 (但Safari可以). 我们可以通过NSError来进行一些处理从而使得程序可以正常跳转: func webView(web ...

  9. 代码：Masonry 第三方框架

    必备宏使用前提: //define this constant if you want to use Masonry without the 'mas_' prefix #define MAS_SHO ...

  10. ssh连接远程linux服务器

    1.在百度搜索输入"putty"然后进行下载,下载后无需安装只需要在文件中找到"putty.exe"双击即可运行. 2.在"Host Name or ...