首页 > 代码库 > 报表 jquery

报表 jquery

2024-07-17 04:43:46   224人阅读

  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

 


联系
我们