报表 jquery

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>无标题文档</title>
  6 <style>
  7     body{
  8         padding:0;
  9         margin:0;
 10         font:"微软雅黑 Light" 15px;
 11     }
 12     #wrap{
 13         margin:0 auto;
 14         width:500px;
 15     }
 16     #amount{
 17         width:490px;
 18         height:400px;
 19         position:relative;
 20         background:#ED8284;
 21         padding-left:10px;
 22     }
 23     #amount div{
 24         width:50px;
 25         margin-right:20px;
 26         float:left;
 27         background:#2B1DDD;
 28         text-align:center;
 29         position:relative;/*没有此句话就没有作用了*/
 30     }
 31     #activity{
 32         clear:both;
 33         position:relative;
 34         width:500px;
 35         height:200px;
 36         background:#78E9A1;
 37         padding-top:10px;
 38     }
 39     #activity div{
 40         height:25px;
 41         background:#ED891A;
 42         position:relative;
 43         padding-right:20px;
 44         text-align:center;
 45         margin-bottom:10px;
 46         border-radius:10px;
 47         padding-top:6px;
 48     }
 49     #cont ul{
 50         list-style:none;
 51     }
 52     #cont ul li{
 53         display:block;
 54         float:left;
 55         width:50px;
 56         position:relative;
 57         border:1px solid #000;
 58         background:#F9D5D6;
 59         text-align:center;
 60     }
 61 </style>
 62 <script src="jquery-2.1.1.js" type="text/javascript"></script>
 63 <script>
 64 $(function(){
 65     //数量报表
 66     $('#amount div').each(function(index, element) {
 67         var h = Math.floor(Math.random()*390+10);
 68         $(this).height(h);
 69         $(this).css('top',400-h);
 70         $(this).html(h);
 71     });    
 72     
 73     //血量的显示
 74     $('#activity div').each(function(index, element) {
 75         var w = Math.floor(Math.random()*490+10);
 76         $(this).width(w);
 77         $(this).html(w+"px");
 78     });
 79     
 80     $(window).scrollTop(200);
 81     
 82     //改变心情
 83     //$('#cont ul li:selected')
 84 })
 85 </script>
 86 </head>
 87 
 88 <body>
 89 <div id="wrap">
 90     <div id="amount">
 91         <div></div>
 92         <div></div>
 93         <div></div>
 94         <div></div>
 95         <div></div>
 96         <div></div>
 97         <div></div>
 98     </div>
 99     <div id="activity">
100         <div></div>
101         <div></div>
102         <div></div>
103         <div></div>
104         <div></div>
105     </div>
106     <div id="cont">
107         <ul>
108             <li>高兴</li>
109             <li>伤心</li>
110             <li>尴尬</li>
111             <li>激动</li>
112             <li>颓废</li>
113         </ul>
114         <span>此刻心情是：你想死吗？</span>
115     </div>
116 </div>
117 </body>
118 </html>
View Code