码迷,mamicode.com
首页 > 其他好文 > 详细

淘宝售后评价中的评分代码

时间:2014-12-23 15:27:32      阅读:275      评论:0      收藏:0      [点我收藏+]

标签:

今天练习JS,写了个评价评分的代码,初学者,只当练手了.

技术分享
 1 ul {
 2                 border: 1px #0094ff solid;
 3                 text-align: center;
 4                 float: left;
 5                 list-style: none;
 6                 padding: 0px;
 7 
 8             }
 9             li {
10                 border: #0094ff 1px solid;
11                 width: 30px;
12                 height: 30px;
13                 line-height: 30px;
14                 float: left;
15             }
CSS部分
技术分享
1 <ul id="ult">
2             <li>1</li>
3             <li>2</li>
4             <li>3</li>
5             <li>4</li>
6             <li>5</li>
7         </ul>
Html部分
技术分享
 1 <script type="text/javascript">
 2     //取所有li标签元素
 3     var liList = document.getElementsByTagName("li");
 4     //定义当前被点击元素的变量
 5     var ifClick;
 6     //定义当前鼠标所在位置的变量
 7     var ifEnter;
 8     //为li标签添加鼠标移入移出及点击事件
 9     for (var i = 0; i < liList.length; i++) {
10         liList[i].xuHao = i;
11         liList[i].onmouseenter =function() {
12             objHuang(this);
13         }
14         liList[i].onmouseleave = leave;
15         liList[i].onclick = function () {
16             if (ifClick != undefined) {
17                 if (ifClick == this.xuHao) {
18                     objBai();
19                     ifClick = undefined;
20                 } else {
21                     objBai();
22                     objHuang(this);
23                     ifClick = this.xuHao;
24                 }
25             } else {
26                 ifClick = this.xuHao;
27                 objHuang(this);
28             }
29 
30 
31         }
32     }
33 
34     //鼠标移出事件
35     function leave() {
36         if (ifClick!=undefined) {
37             if (this.xuHao > ifClick) {
38                 for (var i = ifClick; i < liList.length; i++) {
39                     if (i + 1 < liList.length) {
40                       liList[i+1].style.backgroundColor = "#ffffff";  
41                     }                    
42                 }
43             }
44         } else {            
45             objBai();
46         }
47     }
48 
49     //标签还原白色
50     function objBai() {
51         for (var i = 0; i < liList.length; i++) {
52             liList[i].style.backgroundColor = "#ffffff";
53         }
54     }
55 
56     //鼠标移入事件中,从当前标签到最前标签变黄
57     function objHuang(litab) {
58         litab.style.backgroundColor = "yellow";
59         ifEnter = litab.xuHao;
60         var previousObj = litab.previousElementSibling;
61         do {
62             previousObj.style.backgroundColor = "yellow";
63             previousObj = previousObj.previousElementSibling;
64         } while (previousObj)
65     }
66 
67 
68 
69 </script>
js部分

 

淘宝售后评价中的评分代码

标签:

原文地址:http://www.cnblogs.com/fong/p/4180134.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!