CSS+asp仿迅雷人气指数

大家都熟悉迅雷看看里面的电影人气指数这个小图标吧

先看看我的效果图

再看看迅雷的截图

比较好看，是根据电影的人气指数来显示热度，下面我们就来模仿一下

<style>
ul.point { 
    display:inline; 
width:30px; 
float:right; 
height:8px;
}
ul.point li { 
      float:left; 
   width:2px;
   height:6px; 
   overflow:hidden; 
   border:1px solid #000000; 
   margin-right:1px; 
   clear:none; 
   font-size:0px;
}
ul.point li.l0 { 
      border-color:#FFAD2E; 
   background:#FEFBD8;
}
ul.point li.l1 { 
      border-color:#FEAA26; 
   background:#FFF6C1;
}
ul.point li.l2 { 
      border-color:#EE8800; 
   background:#FFEA8F;
}
ul.point li.l3 { 
      border-color:#E77E01; 
   background:#FFE489;
}
ul.point li.l4 { 
      border-color:#DD6A00; 
   background:#FDCA89;
}
ul.point li.l5 { 
      border-color:#DDDDDD; 
   background:#FFFFFF;
    }
</style>
<ul class="point"><li class="l0"></li><li class="l1"></li><li class="l2"></li><li class="l5"></li><li class="l5"></li></ul><li><span><a href="#" target="_blank">[亲爱妈妈]</a></span><a target="_blank" href="#" >纪念伟大的岳母</a>(岳母)</li>
<ul class="point"><li class="l0"></li><li class="l1"></li><li class="l2"></li><li class="l5"></li><li class="l5"></li></ul><li><span><a href="#" target="_blank">[亲爱妈妈]</a></span><a target="_blank" href="#" >纪念伟大的孟母</a>(孟母)</li>
<ul class="point"><li class="l0"></li><li class="l1"></li><li class="l5"></li><li class="l5"></li><li class="l5"></li></ul><li><span><a href="#" target="_blank">[亲爱妈妈]</a></span><a target="_blank" href="#" >纪念杨开慧同志</a>(杨开慧)</li>
<ul class="point"><li class="l0"></li><li class="l5"></li><li class="l5"></li><li class="l5"></li><li class="l5"></li></ul><li><span><a href="#" target="_blank">[父爱如山]</a></span><a target="_blank" href="#" >纪念宋庆龄同志</a>(宋庆龄)</li>

可以看出来，从I0到I5的颜色是越来越浅。编排的顺序不一样显示出来的人气指数就不一样了。

我来一个截图，证实一下以上代码的静态效果。

那么怎么来灵活应用？根据数据库中的文章浏览量（数字）来确定人气指数自动显示呢？

下面编写一个ASP函数

Function show_hot_point(num)
    Dim view_number
view_number=CInt(num)
    If view_number="" Then 
    view_number=0 
    End If 
If view_number < 200 Then 
      show_hot_point= "<li class=""l0""></li><li class=""l5""></li><li class=""l5""></li><li class=""l5""></li><li class=""l5""></li>"
   End If
If view_number > 200 and view_number < 300 Then 
      show_hot_point= "<li class=""l0""></li><li class=""l1""></li><li class=""l5""></li><li class=""l5""></li><li class=""l5""></li>"
   End If
If view_number > 300 and view_number < 400 Then 
      show_hot_point= "<li class=""l0""></li><li class=""l1""></li><li class=""l2""></li><li class=""l5""></li><li class=""l5""></li>"
   End If
If view_number > 400 and view_number < 500 Then 
      show_hot_point= "<li class=""l0""></li><li class=""l1""></li><li class=""l2""></li><li class=""l3""></li><li class=""l5""></li>"
   End If
If view_number > 500 Then 
      show_hot_point= "<li class=""l0""></li><li class=""l1""></li><li class=""l2""></li><li class=""l3""></li><li class=""l4""></li>"
   End If
End Function

熟悉ASP的朋友应该明白这段代码的作用

在使用中调用函数即可，比如存储文章浏览次数的字段为viewnum：

Response.Write "<ul class=""point"">"& show_hot_point(rs("viewnum")) &"</ul>"