面向对象写的一个评价加星

最新推荐文章于 2019-04-23 21:40:47 发布

沐落羽

最新推荐文章于 2019-04-23 21:40:47 发布

阅读量420

点赞数 1

分类专栏： javscript 文章标签：结构 javascript面向对象

本文链接：https://blog.csdn.net/guoyuqi888/article/details/78845672

版权

javscript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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(){//鼠标按下的回调

        }
    })
}