zoukankan      html  css  js  c++  java
  • 评定星级的前端显示js

      五颗星的星级评定:

      说明:假设是利用三种图片显示星级评定,即 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 (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;
       }            
  • 相关阅读:
    面试题(三)
    面试题(二)
    经典面试题(一)
    $.ajax()实现简单计算器
    [hdu5373 The shortest problem]模拟
    [hdu5371 Hotaru's problem]最大回文半径
    [hdu5372 Segment Game]树状数组
    [zoj3813]Alternating Sum 公式化简,线段树
    [hdu5348]图上找环,删环
    [hdu5360]贪心
  • 原文地址:https://www.cnblogs.com/firstForEver/p/4968401.html
Copyright © 2011-2022 走看看