码迷,mamicode.com
首页 > Web开发 > 详细

评定星级的前端显示js

时间:2015-11-16 12:36:13      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:

  五颗星的星级评定:

  说明:假设是利用三种图片显示星级评定,即 1.满亮的星 2.半亮的星星 3.不亮的星星;

     满分是5分;(此处当然可以作为一个参数可变

     函数传入参数grade表示当前分值。

 

    function star_show(grade){
        var star = 0,// 点亮的星星数量
            half = 0,// 半亮星星  1是有半颗的情况
            nostar = 0;// 不亮的星星数量
        grade = parseFloat(grade);
        if (isNaN(grade) || grade <= 0) grade = 0;
        if (grade > 5) grade = 5;

        star = parseInt(grade);
        // 至少一颗  此处具体视情况而定
        if (star == 0) star = 1;
        // 说明存在半颗星
        if (grade - star > 0) half = 1;
        // 不亮的个数
        nostar = 5 - star - half;

        var path = "imgs.example.com/",    // 图片主路径
            star_img = path + "ok-xing.png",// 满星图片地址
            half_img = path + "nk-xing.png", // 半星图片
            nostar_img = path + "no-xing.png",// 不亮的图片地址
            html = ‘‘;// 方法返回的html

        // 满星
        for(var i=0; i< star; i++){
            html += ‘<img src="‘ + star_img + ‘"/>‘;
        }
        // 半星
        if (half == 1){
            html += ‘<img src="‘ + half_img + ‘"/>‘;
        }
        // 不亮的星
        for(var j=0; j < nostar; j++){
            html += ‘<img src="‘ + nostar_img + ‘"/>‘;
        }
        return html;
   }            

 

评定星级的前端显示js

标签:

原文地址:http://www.cnblogs.com/firstForEver/p/4968401.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!