<!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. Day07 - Python 网络编程 Socket

    1. Python 网络编程 Python 提供了两个级别访问网络服务: 低级别的网络服务支持基本的 Socket,它提供了标准的 BSD Sockets API,可以访问底层操作系统Socket接口 ...

  2. Java基础知识强化之IO流笔记58：内存操作流

    1. 内存操作流: 用来操作处理临时存储的信息的. (1)操作字节数组: ByteArrayInputStream ByteArrayOutputStream 代码示例: package cn.itc ...

  3. 【转载】NIO客户端序列图

    步骤一:打开SocketChannel,绑定客户端本地地址(可选,默认系统会随机分配一个可用的本地地址),示例代码如下: SocketChannel clientChannel = SocketCha ...

  4. Atom编辑器入门到精通(二) 插件的安装和管理

    在本节中我们会学习如果安装和使用插件插件是Atom中一个非常重要的组成部分,很多功能都是以插件形式存在的.比如上篇文章中提到的目录树和设置等窗口都是通过默认安装的插件来实现的. 查看已安装的插件 打开 ...

  5. css-position的相关用法

    简介 position用于固定位置,是尤为重要的一个属性 其值可以为: static: 默认值,忽略top, bottom, left, right 或者 z-index 声明 relative: 相 ...

  6. count()与sum()

    介绍Mysql中的count()与sum()区别 CREATE TABLE `result` ( `name` varchar(20) default NULL, `subject` varchar( ...

  7. 如何在eclipse使用StaggeredGridView

    概述  现在的开发工具基本都用AndroidStudio了.网上的开源框架也是.比如做瀑布式UI的StaggeredGridView,还有导航页的PagerSlidingTabStrip等. 那么电脑 ...

  8. 解码一个加密的js文件

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

  9. JamCam创业故事：辞掉工作，去开发一个应用

    编者按:这是JamCam创始人的自述.这家初创公司提供的应用很简单,但是极为成功:有了JamCam,你所录制的视频会自动添加你正在iPhone中聆听的音乐,作为视频的背景音乐.和朋友分享时是不是方便多 ...

  10. 四层运维工具nc

        nc命令全名为netcat,顾名思义就是通过TCP或UDP从网络读写数据. 很多事情不一定非得抓包,nc也能发挥巨大作用. 1.传输文件 使用<>重定向符(只适用单文件,不推荐.失 ...