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. width: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>

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