五颗星的星级评定:

  说明:假设是利用三种图片显示星级评定,即 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. Python 并发编程(管道,事件,信号量,进程池)

    管道 Conn1,conn2 = Pipe() Conn1.recv() Conn1.send() 数据接收一次就没有了 from multiprocessing import Process,Pip ...

  2. 内联元素的padding和margin

    首先区分一下3类元素: 1)块级元素:div.p等这一类具有宽高属性,且单独占一行的元素: 2)占位元素:img.input这一类具有宽高属性.紧随上一个元素不单独占一行的元素: 3)内联元素:spa ...

  3. 高性能JavaScript(加载和执行)

    当浏览器遇到 <script> 标签时,它是没办法知道 JavaScript 是否会向DOM中添加内容或引入其他元素,甚至关闭某一个标签.因此这个时候浏览器就会停止处理页面,先执行Java ...

  4. 用JavaScript写弹窗

    每个弹窗的标识var x =0; var idzt = new Array(); var Window = function(config){ ID不重复 idzt[x] = "zhuti& ...

  5. SQLServer 2005客户端远程连接sql2008 数据库服务器

    SQL2005客户端远程连接sql2008 数据库服务器 by:授客 QQ:1033553122 准备工作: 客户端所在pc机配置: 配置数据源 控制面板-管理工具-ODBC数据源-系统DSN-添加- ...

  6. Android Studio 使用AChartEngine制作饼图

    前言: 在很多项目中都会使用到图表,具体表现形式为饼图.折线图.柱状图等,但是网上有很多图表架包都是需要收费的,而Google的AChartEngine是免费的,于是AChartEngine就变成了首 ...

  7. [Android] 修图工具Draw9patch使用小结(附ubuntu快捷截图方法)

    做项目的时候,素材图遇到点问题,然后老大大概给我讲了讲android下面图片格式.9.png和draw 9-patch的用法,感觉很清楚也很有用,所以记录一下. 原文地址请保留http://www.c ...

  8. 将window的shell脚本通过ftp传输到Linux服务器后, shell脚本中执行时提示“没有那个文件或目录”的解决办法

    出现bad interpreter:No such file or directory的原因,是文件格式的问题.这个文件是在Windows下编写的.换行的方式与Unix不一样,但是在vim下面如果不S ...

  9. @RequestMapping、@ResponseBody 和 @RequestBody 注解的用法与区别

    背景: 帮助同事解决文件上传的bug(文件上传成功,但是页面提示上传接口异常,数据的确是插入了),从前端layui页面找错误,然后浏览器调试,找了半天无果.layui文件上传格式code返回是数值,后 ...

  10. c#考勤统计

    现在项目需求,需要从多张表中获取数据,组装到一个实体对象中,并通过计算统计出每个员工的考勤记录.(全凭自己思考做的,不足的地方希望各位大神指正!毕竟自己能力有限,思考不全) 考勤统计列表: 明细列表: ...