<!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. Java基础知识强化之IO流笔记57：数据输入输出流（操作基本数据类型）

    1. 数据输入输出流(操作基本数据类型) (1)数据输入流:DataInputStream DataInputStream(InputStream in) (2)数据输出流:DataOutputStr ...

  2. Java Interface and Abstraction

    本文引用资源申明: http://blog.csdn.net/xw13106209/article/details/6923556 http://www.cnblogs.com/dolphin0520 ...

  3. Linq to SQL只支持SQL Server(所选对象使用不支持的数据提供程序)

  4. Android开发之Intent跳转到系统应用中的拨号界面、联系人界面、短信界面

    现在开发中的功能需要直接跳转到拨号.联系人.短信界面等等,查找了很多资料,自己整理了一下. 1.跳转到拨号界面,代码如下: 1)直接拨打 Intent intentPhone = new Intent ...

  5. JS实现跳转到页面任何地方

    要实现两个内容: 1.从A页面跳转到B页面任何地方 方法:用id对要跳转的地方进行标记. 首先,在A页面可以设一个链接 <a href = "b.html#pos" targ ...

  6. 纯js写图片轮播插件

    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...

  7. nyoj89 汉诺塔（二）

    题目网址 :http://acm.nyist.net/JudgeOnline/problem.php?pid=89 汉诺塔问题的经典结论: 把i个盘子从一个柱子整体移到另一个柱子最少需要步数是 2的i ...

  8. EditText属性详解

    关于EditText属性详解很详细的记录,转过来收着 1.EditText输入的文字为密码形式的设置 (1)通过.xml里设置: 把该EditText设为:android:password=" ...

  9. virtualbox安装ubuntu出现“The system is running in low-graphics mode”

    cd /etc/X11 sudo mv xorg.conf.failsafe xorg.conf sudo reboot 即可.

  10. c语言数组不同初始化方式的结果

    第一种初始化方式: #include <stdio.h> int main() { int numbers[5]={12,14}; for (int i=0; i<5; i++) { ...