一般我们在一些购物以及美食的网站都会看到五星好评之类的，一下是使用js制作的五星好评！
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style type="text/css">
- *{
- margin:0;
- padding:0;
- }
- div{
- width:135px;
- height: 30px;
- z-index: 1;
- opacity: .8;
- background: url("images/star.gif") repeat-x;
- position: relative;
- }
- .one{
- height: 30px;
- position: absolute;
- top:0;
- left:0;
- background:url('images/star.gif') repeat-x 0 -30px;
- }
- </style>
- <script>
- window.onload=function() {
- var div = document.getElementsByTagName("div")[0];
- var p = document.createElement("p");
- p.setAttribute("class","one");
- div.appendChild(p);
- div.onclick=function(ev)
- {
- var oEvent=ev||event;
- var wid = oEvent.offsetX;
- if(wid>=135){
- wid = 135;
- }
- p.style.width=wid+"px";
- }
- }
- </script>
- </head>
- <body>
- <div></div>
- </body>
- </html>
直接复制粘贴 即可查看效果图：