[JavaScript] js 迅雷评分效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!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(http://images.cnitblog.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>

posted on 2014-11-03 10:15  鬼鬼丫404  阅读(71)  评论(0)  编辑  收藏  举报

导航