仿淘宝实现多行星级评价

仿淘宝实现多行星级评价

最近再做一个评价功能,当时首先想到的是淘宝的评价功能,感觉那个不错,由于是初学者所以还不是很会,于是在网上百度了一下,我发现网上的都是只有一行星级评价功能,所以我在他

<script type="text/javascript" >
    var Class = {
    create: function() {
        return function() { this.initialize.apply(this, arguments); }
    }
}
var Extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
}
function stopDefault( e ) {
     if ( e && e.preventDefault ){
        e.preventDefault();
    }else{
        window.event.returnValue = false;
    }
    return false;
} 

var Stars = Class.create();
Stars.prototype = {
    initialize: function(star,options) {
        this.SetOptions(options); //默认属性
        var flag = 999; //定义全局指针
        var isIE = (document.all) ? true : false; //IE?
        var starlist = document.getElementById(star).getElementsByTagName('a'); //星星列表
        var input = document.getElementById(this.options.Input) || document.getElementById(star+"-input"); // 输出结果
        var tips = document.getElementById(this.options.Tips) || document.getElementById(star+"-tips"); // 打印提示
        var nowClass = " " + this.options.nowClass; // 定义选中星星样式名
        var tipsTxt = this.options.tipsTxt; // 定义提示文案
        var len = starlist.length; //星星数量
        

        for(i=0;i<len;i++){ // 绑定事件 点击 鼠标滑过
            starlist[i].value = i;
            starlist[i].onclick = function(e){
                stopDefault(e);
                this.className = this.className + nowClass;
                flag = this.value;
                input.value = this.getAttribute("star:value");
                tips.innerHTML = tipsTxt[this.value]
            }
            starlist[i].onmouseover = function(){
                if (flag< 999){
                    var reg = RegExp(nowClass,"g");
                    starlist[flag].className = starlist[flag].className.replace(reg,"")
                }
            }
            starlist[i].onmouseout = function(){
                if (flag< 999){
                    starlist[flag].className = starlist[flag].className + nowClass;
                }
            }
        };
        if (isIE){ //FIX IE下样式错误
            var li = document.getElementById(star).getElementsByTagName('li');
            for (var i = 0, len = li.length; i < len; i++) {
                var c = li[i];
                if (c) {
                    c.className = c.getElementsByTagName('a')[0].className;
                }
            }
        }
    },
    //设置默认属性
    SetOptions: function(options) {
        this.options = {
   //默认值
            Input:          "",//设置触保存分数的INPUT
            Tips:           "",//设置提示文案容器
            nowClass:   "current-rating",//选中的样式名
            tipsTxt:        ["1分-严重不合格","2分-不合格","3分-合格","4分-优秀","5分-完美"]//提示文案
        };
        Extend(this.options, options || {});
    }
}
var Stars1 = new Stars("stars1")
var Stars2 = new Stars("stars2")
var Stars3 = new Stars("stars3")
var Stars4 = new Stars("stars4")

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/113654.html原文链接:https://javaforall.net

(0)
上一篇 2021年10月14日 上午10:00
下一篇 2021年10月14日 上午11:00


相关推荐

  • vector>初始化_电脑初始化出现问题

    vector>初始化_电脑初始化出现问题1、默认初始化,vector为空,size为0,未开辟空间,可通过push_back()添加元素。vector&lt;int&gt;v;v.push_back(10);2、默认初始化,指定vector大小,元素初始值默认为0,元素增多时,同样可以通过push_back()来改变vector大小以增加元素。vector&lt;int&gt;v(5)3、指定初始化元素值为2…

    2026年1月16日
    4
  • 《深入浅出 Java Concurrency》—锁紧机构(一)Lock与ReentrantLock

    《深入浅出 Java Concurrency》—锁紧机构(一)Lock与ReentrantLock

    2021年12月17日
    45
  • 异步fifo设计注意事项有哪些(陈设设计)

    近日学习用到异步FIFO,故写下这篇博客记录学习心得。在我看来,异步FIFO的设计注意事项大体分为两点:亚稳态的处理空满状态的判断第一,来说一下亚稳态。亚稳态是指触发器无法在某个规定时间内达到一个可确认的状态。在FIFO的设计中,产生的原因主要由两点:一是逻辑电平的误判,也就是如果通过二进制作为指针来判断空满状态,因二进制数值变化引起的位数变化大,对电路的危害也随之增加,故在本设计中使…

    2022年4月15日
    61
  • 如何制作SWD接口接线,并使用keil4_Jlink烧录芯片

    如何制作SWD接口接线,并使用keil4_Jlink烧录芯片如何制作SWD接口接线,并使用keil4_Jlink烧录芯片。背景过程背景刚到一个新公司的第一个礼拜。通过web界面更新app总是导致bios失效。又因为是接手一个离职人的项目,调试线已经找不到,所以需要自己做一个。由于自己是个菜鸡,所以做出来的东西也是比较难看,由此记录一下,希望下次能做的美观一点。过程现在说一个我做上面一个东西需要查找那些东西。首先知道SWD需要Jlink的脚是GND(地线)、TMS(数据线)、TCK(时钟线)、NSRST(重启线)。所以得得将jlink这几个角引出来。这

    2022年4月25日
    65
  • es6数组处理方法整理

    es6数组处理方法整理数组常用.push().pop().unshift().shift().splice(i,n)删除,原数组被从i删除n个元素,返回被删掉的元素.slice(start,end)获取子数组,原数组不变,返回切出来的元素.concat().split()字符串变数组.sort()排序.reverse()翻转遍历处理.map(callback)遍历处…

    2022年5月24日
    42
  • Java中数字的四舍五入和取整

    Java中数字的四舍五入和取整Java中对数字进行四舍五入或取整处理经常使用Math库中的三个方法:ceilfloorround1ceil向上取整ceil英文释义:天花板。天花板在上面,所以是向上取整,好记了。Math.ceil函数接收一个double类型的参数,用于对数字进行向上取整(遇小数进1),即返回一个大于或等于传入参数的最小整数(但还是以double类型返回)。2floor向下取整floor英文释义:地板。地板在下面,所以是向下取整,好记了。Math.floor函数接收一个double

    2022年7月7日
    23

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号