js五星好评

一般我们在一些购物以及美食的网站都会看到五星好评之类的，一下是使用js制作的五星好评！

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style type="text/css">
  7. *{
  8. margin:0;
  9. padding:0;
  10. }
  11. div{
  12. 135px;
  13. height: 30px;
  14. z-index: 1;
  15. opacity: .8;
  16. background: url("images/star.gif") repeat-x;
  17. position: relative;
  18. }
  19. .one{
  20. height: 30px;
  21. position: absolute;
  22. top:0;
  23. left:0;
  24. background:url('images/star.gif') repeat-x 0 -30px;
  25. }
  26. </style>
  27. <script>
  28. window.onload=function() {
  29. var div = document.getElementsByTagName("div")[0];
  30. var p = document.createElement("p");
  31. p.setAttribute("class","one");
  32. div.appendChild(p);
  33. div.onclick=function(ev)
  34. {
  35. var oEvent=ev||event;
  36. var wid = oEvent.offsetX;
  37. if(wid>=135){
  38. wid = 135;
  39. }
  40. p.style.width=wid+"px";
  41. }
  42. }
  43. </script>
  44. </head>
  45. <body>
  46. <div></div>
  47. </body>
  48. </html>
 

直接复制粘贴 即可查看效果图：

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/ldlx-mars/p/6827008.html