五颗星的星级评定:

  说明:假设是利用三种图片显示星级评定,即 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;
}

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

  1. PDF.Js的使用—javascript中前端显示pdf文件

    PDF.Js的使用—javascript中前端显示pdf文件 写于2018/12/6 起因是一个图片展示页面需要展示pdf格式的文件,所以查了半天决定使用pdf.js,我也不求有多了解它,能实现我想要 ...

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

    原文:C#的百度地图开发(四)前端显示与定位 有了这些定位信息,那要如何在前端的页面上显示出来呢?这需要用到百度地图的JavaScript的API.下面是示例代码. 前端代码 <%@ Page  ...

  3. 分享非常好用的前端分页js工具类 灵活 简单易懂

    分享自己封装的前端分页js工具类  下面是默认样式效果截图 可以随意更改js及css 很灵活 /** * pageSize, 每页显示数 * pageIndex, 当前页数 * pageCount 总 ...

  4. 前端05 /js基础

    前端05 /js基础 昨日内容回顾 css选择器的优先级 行内(1000) > id(100) > 类(10) > 标签(1) > 继承(0) 颜色 rgb(255,255,2 ...

  5. C#调用WebService接口实现天气预报在web前端显示

    本文使用web (C#)调用互联网上公开的WebServices接口: (http://www.webxml.com.cn/WebServices/WeatherWebService.asmx)来实现 ...

  6. Web前端-Vue.js必备框架(五)

    Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...

  7. Web前端-Vue.js必备框架(四)

    Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...

  8. Web前端-Vue.js必备框架(三)

    Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...

  9. Web前端-Vue.js必备框架(二)

    Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...

随机推荐

  1. 安装 Java 开发工具包JDK(Windows版本)

    前言: 进行java开发,首先要安装jdk,安装完成之后,还需要进行环境变量配置,以下就介绍一下具体步骤 具体步骤: 1.进入官网(https://www.oracle.com/technetwork ...

  2. IDEA报错:Error starting ApplicationContext. To display the auto-configuration report re-run your application with 'debug' enabled. ('crmWatcherService'错误)

    单表插入项目,插入前正常,插入后运行webapplication报错: run: debug: 于webapplication报错: Injection of autowired dependenci ...

  3. go语言练习:指针

    指针是一个变量,存储的是另一个变量的地址 package main import "fmt" func main() { var a string = "hello&qu ...

  4. DevOps之域名-搭建工具

    唠叨话 关于德语噢屁事的知识点,仅提供精华汇总,具体知识点细节,参考教程网址,如需帮助,请留言. 域名系统DNS(Domain Name System) 关于系统,知识与技能的层次(知道.理解.运用) ...

  5. MySQL生产环境下的主从复制启动项

    MySQL的复制参数除了我们之前搭建主从时遇到的那几个之外,还有以下两个: 1.log-slave-updates 这个参数用来配置从库上是否启动了二进制日志的功能,默认是不开启的,如果开启了那么从库 ...

  6. 乘风破浪:LeetCode真题_035_Search Insert Position

    乘风破浪:LeetCode真题_035_Search Insert Position 一.前言 这次的问题比较简单,也没有限制时间复杂度,但是要注意一些细节上的问题. 二.Search Insert ...

  7. .net core 入坑经验 - 2、MVC Core之获取网站运行路径

    这次是建立了asp.net mvc core项目,在controller中想获取网站在硬盘中的路径,找了一圈Server.MapPath() 已不存在,HttpContent也一样,经过查阅资料发现是 ...

  8. sql注入--access

    access数据库结构: 表名  -->  列名  -->  数据 access注入攻击片段 联合查询法: (1)  判断注入点:  ?id=1 and 1=1 ; ?id=1 and 1 ...

  9. 【转】为什么Github没有记录你的Contributions

    【转】为什么Github没有记录你的Contributions 字数985 阅读0 评论0 喜欢0 记录下为什么github 提交的时候,没有记录到 github 的那个日历上。 Paste_Imag ...

  10. FastDFS分布式文件系统设计原理

    转载自http://blog.chinaunix.net/uid-20196318-id-4058561.html FastDFS是一个开源的轻量级分布式文件系统,由跟踪服务器(tracker ser ...