JavaScript 制作星星评分效果

第一种:

第一种星星效果

HTML:

  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <title>星星效果</title>
  5.         <script src="js/start.js"></script>
  6.         <style>
  7.         </style>
  8.     </head>
  9.     <body>
  10.         <div class="input-stars"></div>
  11.         <script>
  12.            var star =  new Stars(10,60)
  13.            star.show()
  14.         </script>
  15.     </body>
  16. </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.     for(var i = 0;i<stars.length;i++){
  32.         // endwidth确定此字符串实例的结尾是否与指定的字符串匹配
  33.         if(stars[i].src.endsWith('red.png')){
  34.             stars[i].src = 'img/star-yellow.png'
  35.         }
  36.     }
  37.     for(var i = 0;i <=index;i++){
  38.         stars[i].src = 'img/star-red.png'
  39.     }
  40.     score.innerText = Number.parseInt(index) + 1 + '分'
  41. }

第二种:

第二种星星效果

HTML:

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

演示效果:

第一种第二种

评论

  1. Windows Chrome 50.0.2661.102
    7年前
    2017-8-04 15:50:06

    第一种效果个人感觉比较好

    • 黄良钵
      博主
      懿古今
      Linux Firefox 53.0
      7年前
      2017-8-04 15:54:46

      以第一种为基础,第二张扩展

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇