<!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. Multipart Upload with HttpClient 4--reference

    by Eugen Paraschiv on May 23, 2014 in HttpClient http://www.baeldung.com/httpclient-multipart-upload ...

  2. 职场PPT达人装酷的13条秘诀

    对<说服力-让你的PPT会说话>读者调查显示,88.8%的白领认为“做出漂亮的幻灯片对晋升有帮助”,99.9%的白领一致认为职场装酷神器排行榜第一位是PPT,甚至有位程序员说哥最牛的编程环 ...

  3. html代码实现自动滚动，鼠标滑过时停止滚动

    <marquee style="width: 1200px;height:200px;margin:0px auto" onmouseout="this.start ...

  4. JavaScript入门(5)

    一.什么是数组? 数组是一个值的集合,每一个值都有一个索引号,从0开始,每个索引都有一个相应的值,根据需要添加更多数值. 好比一个团,团里有很多人.如下使用数组存储5个学生成绩: 二.如何创建数组 使 ...

  5. jquery基础-包裹 替换 删除 复制

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

  6. Velocity 模板引擎介绍

    一.变量 1. 变量定义 #set($name =“velocity”) 2. 变量的使用 在模板文件中使用$name 或者${name} 来使用定义的变量.推荐使用${name} 这种格式,因为在模 ...

  7. Linux的各种命令(android adb shell)

    win+r 调出运行,输入CMD adb shell 进入手机的控制终端,相当于原生的Linux系统的各种操作. 当提示符为$符号,说明未获得超级管理员权限,输入su,可编程# adb kill-se ...

  8. MongoDB中的分组

    一.MongoDB中的Count函数.Distinct函数以及分组 准备工作,插入一个班级的文档 > for(var i=0;i<10;i++){ ... db.Classes.inser ...

  9. （转）C#中的Dictionary字典类介绍

    关键字:C# Dictionary 字典 作者:txw1958原文:http://www.cnblogs.com/txw1958/archive/2012/11/07/csharp-dictionar ...

  10. web页面的生命周期

    1.先上几张原理图着重理解: 现在针对第四副图原理进行解析: 流程: 1.浏览器发送请求 2.服务器软件(IIS)接收,它最终的目的就是为了向客户输出它请求的动态页面生成的html代码. 3.服务器不 ...