• 当前标签:星星效果

程序开发 JavaScript 制作星星评分效果

第一种: HTML: <html>     <head>         <meta charset="utf-8">         <title>星星效果</title>         <script src="js/start.js"></script>         <style>         </style>     </head>     <body>         <div class="input-stars"></div>         <script>            var star =  new Stars(10,60)            star.show()         </script>     </body> </html> JavaScript: function Stars(count,size){     this.box = document.querySelector('.input-stars')     this.count = count || 5     this.size = size || 30 } Stars.prototype.show = function(){     for(var i = 0;i<this.count;i++){         var star = document.createElement('img')         star.src = 'img/star-yellow.png'         star.style.width = this.size + 'px'         star.style.height = this.size + 'px'         star.style.marginRight = this.size / 2 + 'px'         star.dataset.index = i         star.onclick = this.onStartClick.bind(this)         this.box.appendChild(star)     }     var score = document.createElement('span')     score.style.display = 'inline-block'     score.style.height = this.size + 'px'     score.style.color = '#666'     score.className = 'input-stars-score'     score.style.verticalAlign = 'top'     score.style.fontSize = this.size*0.6 + 'px'     score.style.lineHeight = this.size *1.1 + 'px'     this.box.appendChild(score) } Stars.prototype.onStartClick = function(ev){     var stars = document.querySelectorAll('img')     var score = document.querySelector('.input-stars-score')     var index = ev.currentTarget.dataset.index     for(var i = 0;i<stars.length;i++){         // endwidth确定此字符串实例的结尾是否与指定的字符串匹配         if(stars[i].src.endsWith('red.png')){             stars[i].src = 'img/star-yellow.png'         }     }     for(var i = 0;i <=index;i++){         stars[i].src = 'img/star-red.png'     }     score.innerText = Number.parseInt(index) + 1 + '分' } 第二种: HTML: <html>     <head>         <meta charset="utf-8">         <title>星星效果</title>         <script src="js/start.js"></script>         <style>         </style>     </head>     <body>         <form action="/comment" method="get">            <input type="text" name="petname" placeholder="请输入昵称">            <div data-star='pq'></div>            <div data-star='sa'></div>            <div data-star='ls'></div>            <input type="submit" value='提交'>         </form>         <script>         //    new Stars('pq').show()         //    new Stars('sa').show()         //    new Stars('ls').show()         // new Stars('pq')         //  new Stars('sa')         //   new Stars('ls') </script> <script src="js/start.js"></script>     </body> </html> JavaScript: function Stars(name,count,size){     this.name = name     this.box = document.querySelector('[data-star=' + name +']')     this.count = count || 5     this.size = size || 30     this.show()     // 在构造函数中直接调用show方法     // 使用Stars对象的开发者就不需要再调用show方法了 } Stars.prototype.show = function(){     for(var i = 0;i<this.count;i++){         var star = document.createElement('img')         star.src = 'img/star-yellow.png'         star.style.width = this.size + 'px'         star.style.height = this.size + 'px'         star.style.marginRight = this.size / 2 + 'px'         star.dataset.score = i + 1         star.dataset.index = i         star.onclick = this.onStartClick.bind(this)         this.box.appendChild(star)     }     var score = document.createElement('span')     score.style.display = 'inline-block'     score.style.height = this.size + 'px'     score.style.color = '#666'     score.className = 'input-stars-score'     score.style.verticalAlign = 'top'     score.style.fontSize = this.size*0.6 + 'px'     score.style.lineHeight = this.size *1.1 + 'px'     this.box.appendChild(score)     var input = document.createElement('input')     input.value = 0     input.name = this.name + '-score'     // input.type = 'hidden'     // type = hidden 文本框在页面上是默认就是隐藏     // 它可在页面保存数据 这些数据会随表单一起提交到服务端     console.log(input.name)     this.box.appendChild(input) } Stars.prototype.onStartClick = function(ev){     console.log('ccc')     var stars = this.box.querySelectorAll('img')     // 标签元素也有queryselector等方法 比直接在document上使用它的     // 方法更精准 它可限制只在指定的标签内部查找元素     var scorespan = this.box.querySelector('.input-stars-score')     var score = ev.currentTarget.dataset.score      console.log(score)     for(var i = 0;i<stars.length;i++){         console.log(stars.length)         // endwidth确定此字符串实例的结尾是否与指定的字符串匹配         for(var i = 0; i < stars.length; i++){         if(stars[i].src.endsWith('red.png')){             stars[i].src = 'img/star-yellow.png'         }     }     }     for(var i = 0;i < score;i++){         stars[i].src = 'img/star-red.png'     }     scorespan.innerText = score + '分'     var input = this.box.querySelector('input')     input.value = score } // Array.prototype.slice.call将一个类数组对象转换为数组 Array.prototype.slice.call(document.querySelectorAll('[data-star]')).forEach(function(star){     new Stars(star.dataset.star) }) 演示效果: 第一种、第二种

2017-08-03 22:28:20 41 2 0
阅读详情
  • 1
前往