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>