<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #list { 350px; text-align: center; position: absolute; top: 70px; left: 50%; margin-left: -200px; } #list a { display: inline-block; 20px; height: 15px; background-color: goldenrod; border-radius: 3px; font-size: 12px; text-align: center; line-height: 15px; color: #fff; text-decoration: none; float: left; margin: 3px; } </style> </head> <body> <div style="margin: 50px auto; 200px;" id="pingfen"></div> <div id="list"> <span style="float: left">评分:</span> <a href="javascript:;">0</a> <a href="javascript:;">0.5</a> <a href="javascript:;">1</a> <a href="javascript:;">1.5</a> <a href="javascript:;">2</a> <a href="javascript:;">2.5</a> <a href="javascript:;">3</a> <a href="javascript:;">3.5</a> <a href="javascript:;">4</a> <a href="javascript:;">4.5</a> <a href="javascript:;">5</a> </div> <div class="grade"></div> <script src="Demo02/Demo02/js/jquery.min.js"></script> <script> var alist = $('#list a'); for(var i =0; i < alist.length; i++){ $('#list a').click(function(){ var txtf = $(this).text(); $('#pingfen').html(pinfen(txtf)); }) } $('#pingfen').html(pinfen(0)); function pinfen(num){ var html = ""; for(var i = 0; i < 5; i++){ if(num < 5 || num > 0){ if(i < parseInt(num)){ html += '<img src="Demo02/Demo02/img/manxing.png" />'; }else if(num - i > 0){ html += '<img src="Demo02/Demo02/img/banxing.png" />'; }else{ html += '<img src="Demo02/Demo02/img/kongxing.png" />'; } } } return html; } </script> </body> </html>