javascript实现五星评分功能

2019-11-20 11:18:27

字体：大中小

来源：转载

供稿：网友

本文为大家分享了javascript实现五星评分功能的实例代码，大家可以参考学习一下，具体的实现办法如下

在分享javascript实现五星评价功能的实例代码之前，先看一看效果图：

star1.png star1.png

具体代码：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>53</title> <script src='js/jquery-1.11.1.js'></script> <style>  *{   margin: 0;   padding: 0;  }  body{   padding: 20px;  }  .star1{   width: 70px;   height: 13px;   background: url('images/star1.png') repeat-x left center;  }  .star2{/*   width: 60%;*/   height: 13px;   background: url('images/star2.png') repeat-x left center;   float: left;  } </style> <script>  $(function(){   var fiveStars=function(num){   if(!num||num<3){    return '--';   }   return '<div class="star1"><div class="star2" style="width:'+num*20+'%"></div></div>';   }  var str=fiveStars(4)  $('body').html(str)    }) </script></head><body><!--<div class='star1'><div class="star2"></div></div> --></body></html>

希望本文对大家学习javascript程序设计有所帮助。

上一篇：JavaScript函数的一些注意要点小结及js匿名函数

下一篇：javascript密码验证