评定星级的前端显示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 (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;
   }            
时间: 2025-01-09 16:35:03

评定星级的前端显示js的相关文章

python 爬虫爬取几十家门店在美团外卖上的排名,并插入数据库,最后在前端显示

爬虫脚本: #!/usr/bin/env python # encoding: utf-8 """ @version: ?? @author: phpergao @license: Apache Licence  @file: meituan_paiming.py @time: 2016/8/1 15:16 """ import urllib,json,re import urllib.parse import http.cookiejar im

C#的百度地图开发(四)前端显示与定位

有了这些定位信息,那要如何在前端的页面上显示出来呢?这需要用到百度地图的JavaScript的API.下面是示例代码. 前端代码 [html] view plaincopy <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ViewMap.aspx.cs" Inherits="TEST.ViewMap" %> <!DOCTYPE html>

Java 用户资料完整度的前端显示(实现)

序 上一篇文章已经说了说大概的思路,这一篇文章主要就是对于第一种思路的实现,进行详细的说明.关于用户资料完整度的请求流程,这里就不再多说了,如果不了解的可以去看上一篇文章<Java 用户资料完整度的前端显示(思路)>. 正文 前边也说了,我这里采用的是第一种方案,前端使用 Bootstrap 的进度条组件显示百分比,后台读取权重并计算信息完整度,并将计算的结果返回给前端,供页面显示.方案很简单,下面具体来看代码. 前端 CSS <link href="static/sc/css

stb前端开发js性能优化总结

js性能优化 javascript是一种解释型语言,性能无法达到和C.C++等编译语言的水平,但还是有一些方法来改进. 1.循环 JavaScript中的循环方式有for(;;).while().for(in)3种.其中for(in)的效率极差,因为for(in)执行过程中需要查询散列键.for(;;)和while()比较,while循环的效率要优于for(;;). 2.局部变量和全局变量 局部变量的访问速度更快,因为全局变量其实是全局对象的成员,而局部变量是放在函数的堆栈当中的. 3.不使用e

解决SQL Server 2005数据库中datetime时间字段在前端显示时分秒的问题

SQL Server 2005中时间类型datetime的格式是"年月日时分秒",直接读出来该字段,为了不让它在前端显示"时分秒"若是显示在dataGridView中,可以修改控件的某一列格式,如: dataGridView1.Columns[10].DefaultCellStyle.Format = "yyyy-MM-dd"; 但是要在listview控件中的话,就有点困难了,貌似没有类似的属性,这样的话,考虑从数据源入手. 1.获取当前年月日

C# 实现程序只启动一次(多次运行激活第一个实例,使其获得焦点,并在最前端显示)

防止程序运行多个实例的方法有多种,如:通过使用互斥量和进程名等.而我想要实现的是:在程序运行多个实例时激活的是第一个实例,使其获得焦点,并在前端显示. 主要用到两个API 函数: ShowWindowAsync 该函数设置由不同线程产生的窗口的显示状态. SetForegroundWindow 该函数将创建指定窗口的线程设置到前台,并且激活该窗口.键盘输入转向该窗口,并为用户改各种可视的记号.系统给创建前台窗口的线程分配的权限稍高于其他线程. 代码如下:引用以下命名空间: using Syste

前端页面js与flash交互——js获取flash对象,并传递参数

背景介绍: 最近在搞一个项目,涉及到图片选取,裁剪,上传等,由于浏览器安全性问题,js无法获取到<input type="file">中选取的文件路径,而且对照片的裁剪,抠图等由HTML5实现的功能,对各大浏览器的兼容性,真是不敢太大胆.这个时候就引进了flash,然后所有js做不了的让flash来做,然后由js来控制页面元素.就这样开始了js与as的交互之旅,听做flash的大叔说,flash调js的函数式很好调的,而js调as不大容易.最终的情况是as调js错误层出不穷

《饿了么大前端 Node.js 进阶教程》—Javascript 基础问题—引用传递

<饿了么大前端 Node.js 进阶教程>地址:https://github.com/ElemeFE/node-interview 1.如何编写一个 json 对象的拷贝函数 function clone(obj){ var result; if (Array.isArray(obj)) { result = []; obj.forEach((item) => { result.push(clone(item)); }); } else if (typeof obj === 'objec

《饿了么大前端 Node.js 进阶教程》—Javascript 基础问题—作用域

<饿了么大前端 Node.js 进阶教程>地址:https://github.com/ElemeFE/node-interview 作用域从某种意义上来说是个难点,它需要你真真正正的了解JS的分词.词法分析,语法分析,代码生成,LHS查询,RHS查询等深层的东西. 如果不知道可以读一下<你不知道的JavaScript:上卷> let和var的区别 1.let只在声明的代码块中有效,{}中使用let声明变量,外面是访问不到的,这就是块级作用域 2.不存在变量提升问题 3.重复声明会报