HTML:
1. <html>
2. <head>
3. <meta charset="utf-8">
4. <title>星星效果</title>
5. <script src="js/start.js"></script>
6. <style>
7.
8. </style>
9. </head>
10. <body>
11. <div class="input-stars"></div>
12. <script>
13. var star = new Stars(10,60)
14. star.show()
15.
16. </script>
17. </body>
18. </html>
JavaScript:
1. function Stars(count,size){
2. this.box = document.querySelector('.input-stars')
3. this.count = count || 5
4. this.size = size || 30
5. }
6. Stars.prototype.show = function(){
7. for(var i = 0;i<this.count;i++){
8. var star = document.createElement('img')
9. star.src = 'img/star-yellow.png'
10. star.style.width = this.size + 'px'
11. star.style.height = this.size + 'px'
12. star.style.marginRight = this.size / 2 + 'px'
13. star.dataset.index = i
14. star.onclick = this.onStartClick.bind(this)
15. this.box.appendChild(star)
16. }
17. var score = document.createElement('span')
18. score.style.display = 'inline-block'
19. score.style.height = this.size + 'px'
20. score.style.color = '#666'
21. score.className = 'input-stars-score'
22. score.style.verticalAlign = 'top'
23. score.style.fontSize = this.size*0.6 + 'px'
24. score.style.lineHeight = this.size *1.1 + 'px'
25. this.box.appendChild(score)
26. }
27. Stars.prototype.onStartClick = function(ev){
28. var stars = document.querySelectorAll('img')
29. var score = document.querySelector('.input-stars-score')
30. var index = ev.currentTarget.dataset.index
31.
32. for(var i = 0;i<stars.length;i++){
33. // endwidth确定此字符串实例的结尾是否与指定的字符串匹配
34. if(stars[i].src.endsWith('red.png')){
35. stars[i].src = 'img/star-yellow.png'
36. }
37. }
38. for(var i = 0;i <=index;i++){
39. stars[i].src = 'img/star-red.png'
40. }
41. score.innerText = Number.parseInt(index) + 1 + '分'
42. }
第二种：
HTML:
1. <html>
2. <head>
3. <meta charset="utf-8">
4. <title>星星效果</title>
5. <script src="js/start.js"></script>
6. <style>
7.
8. </style>
9. </head>
10. <body>
11. <form action="/comment" method="get">
12. <input type="text" name="petname" placeholder="请输入昵称">
13. <div data-star='pq'></div>
14. <div data-star='sa'></div>
15. <div data-star='ls'></div>
16. <input type="submit" value='提交'>
17. </form>
18.
19. <script>
20. // new Stars('pq').show()
21. // new Stars('sa').show()
22. // new Stars('ls').show()
23.
24. // new Stars('pq')
25. // new Stars('sa')
26. // new Stars('ls')
27. </script>
28. <script src="js/start.js"></script>
29. </body>
30. </html>
JavaScript：
1. function Stars(name,count,size){
2. this.name = name
3. this.box = document.querySelector('[data-star=' + name +']')
4. this.count = count || 5
5. this.size = size || 30
6. this.show()
7. // 在构造函数中直接调用show方法
8. // 使用Stars对象的开发者就不需要再调用show方法了
9. }
10. Stars.prototype.show = function(){
11. for(var i = 0;i<this.count;i++){
12. var star = document.createElement('img')
13. star.src = 'img/star-yellow.png'
14. star.style.width = this.size + 'px'
15. star.style.height = this.size + 'px'
16. star.style.marginRight = this.size / 2 + 'px'
17. star.dataset.score = i + 1
18. star.dataset.index = i
19.
20. star.onclick = this.onStartClick.bind(this)
21. this.box.appendChild(star)
22. }
23. var score = document.createElement('span')
24. score.style.display = 'inline-block'
25. score.style.height = this.size + 'px'
26. score.style.color = '#666'
27. score.className = 'input-stars-score'
28. score.style.verticalAlign = 'top'
29. score.style.fontSize = this.size*0.6 + 'px'
30. score.style.lineHeight = this.size *1.1 + 'px'
31. this.box.appendChild(score)
32.
33. var input = document.createElement('input')
34. input.value = 0
35. input.name = this.name + '-score'
36. // input.type = 'hidden'
37. // type = hidden 文本框在页面上是默认就是隐藏
38. // 它可在页面保存数据 这些数据会随表单一起提交到服务端
39. console.log(input.name)
40. this.box.appendChild(input)
41. }
42. Stars.prototype.onStartClick = function(ev){
43. console.log('ccc')
44.
45. var stars = this.box.querySelectorAll('img')
46. // 标签元素也有queryselector等方法 比直接在document上使用它的
47. // 方法更精准 它可限制只在指定的标签内部查找元素
48. var scorespan = this.box.querySelector('.input-stars-score')
49. var score = ev.currentTarget.dataset.score
50. console.log(score)
51. for(var i = 0;i<stars.length;i++){
52. console.log(stars.length)
53. // endwidth确定此字符串实例的结尾是否与指定的字符串匹配
54. for(var i = 0; i < stars.length; i++){
55. if(stars[i].src.endsWith('red.png')){
56. stars[i].src = 'img/star-yellow.png'
57. }
58. }
59.
60. }
61. for(var i = 0;i < score;i++){
62. stars[i].src = 'img/star-red.png'
63. }
64. scorespan.innerText = score + '分'
65. var input = this.box.querySelector('input')
66. input.value = score
67. }
68.
69. // Array.prototype.slice.call将一个类数组对象转换为数组
70. Array.prototype.slice.call(document.querySelectorAll('[data-star]')).forEach(function(star){
71. new Stars(star.dataset.star)
72. })
演示效果：
第一种、第二种