1.首先是html结构,如下
<style>
.score_txt {
width: 500px;
margin: 200px auto;
border: 1px solid #ddd;
padding: 30px;
}
.score_txt p {
font-size: 20px;
color: #333;
}
</style>
<div class="score_txt">
<p>您的评分是:</p>
<div id="score" class="gyq-score"></div>
<input id="scoreVal" type="hidden" name="" value="">
</div>
2.接下来需要定义一个对象
var obj = new score()
3.接下里需要填写一个json获取我们以后需要修改的内容 这个json需要在score这个构造函数里面写,下面回调用的
function score() {
this.seet={
imgSrcOn:'',//选中
imgSrcOff:'',//未选中
scoreArr:'',//个数
dow:function(){}//鼠标按下的回调
}
}
4.接下来在对象里面添加方法
score.prototype.init = function(obj) {}
5.里面填写评星的功能,具体细节我也不说了 代码贴上
this.score = document.getElementById(obj.score);
this.scoreLen = this.seet.scoreArr.length;
this.html = ''
this.scoreVal = document.getElementById(obj.scoreVal);;
var This=this;
for (var i = 0; i < this.scoreLen; i++) {
this.html += "<img src='" + this.seet.imgSrcOff + "' alt=''>"
}
this.score.innerHTML = this.html;
this.scoreImg = this.score.getElementsByTagName('img');
for (var i = 0; i < this.scoreImg.length; i++) {
this.scoreImg[i].index=i;
this.scoreImg[i].onclick=function(){
This.change(this)
This.seet.dow();
}
}
6.有面向对象基础的人都知道onclick事件里面不应该直接写方法,所以这边另外起了一个方法 然后在里面调用
score.prototype.change=function(T){
for (var i = 0; i < T.index+1; i++) {
this.scoreImg[i].src=this.seet.imgSrcOn;
for (var j = T.index+1; j < this.scoreImg.length; j++) {
this.scoreImg[j].index=j;
this.scoreImg[j].src=this.seet.imgSrcOff;
}
}
this.scoreVal.value=this.seet.scoreArr.slice(T.index,T.index+1)
}
7.现在基本的都已经好了 然后需要让 init里面的值继承给score这个构造函数里面就可以愉快的调用啦 为了好看点 这边直接写好了一个方法以后写的时候可以直接调用
function extend(obj1,obj2){
for(var attr in obj2){
obj1[attr] = obj2[attr];
}
}
8.写好之后在init方法里面直接引用就可以了 下面贴上完整代码
function score() {
this.seet={
imgSrcOn:'',//选中
imgSrcOff:'',//未选中
scoreArr:'',//个数
dow:function(){}//鼠标按下的回调
}
}
score.prototype.init = function(obj) {
extend(this.seet,obj)
this.score = document.getElementById(obj.score);
this.scoreLen = this.seet.scoreArr.length;
this.html = ''
this.scoreVal = document.getElementById(obj.scoreVal);;
var This=this;
for (var i = 0; i < this.scoreLen; i++) {
this.html += "<img src='" + this.seet.imgSrcOff + "' alt=''>"
}
this.score.innerHTML = this.html;
this.scoreImg = this.score.getElementsByTagName('img');
for (var i = 0; i < this.scoreImg.length; i++) {
this.scoreImg[i].index=i;
this.scoreImg[i].onclick=function(){
This.change(this)
This.seet.dow();
}
}
}
score.prototype.change=function(T){
for (var i = 0; i < T.index+1; i++) {
this.scoreImg[i].src=this.seet.imgSrcOn;
for (var j = T.index+1; j < this.scoreImg.length; j++) {
this.scoreImg[j].index=j;
this.scoreImg[j].src=this.seet.imgSrcOff;
}
}
this.scoreVal.value=this.seet.scoreArr.slice(T.index,T.index+1)
}
function extend(obj1,obj2){
for(var attr in obj2){
obj1[attr] = obj2[attr];
}
}
- 之后再页面上直接调用就可以了
window.onload = function() {
var obj = new score()
obj.init({
score:'score',//结构id
scoreVal:'scoreVal',//值
imgSrcOn:'images/xx.png',//选中图片
imgSrcOff:'images/x-1.png',//未选中图片
scoreArr:[1,2,3,4,5],//个数里面填写需要获取的值
dow:function(){//鼠标按下的回调
}
})
}
好了 这样一个评价加星的效果就完成了 这是我第一次写 有问题的话希望大家提出来 我会改进的 第一次发帖 写的不好见谅