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)
})