评定星级的前端显示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;
}
评定星级的前端显示js的更多相关文章
- PDF.Js的使用—javascript中前端显示pdf文件
PDF.Js的使用—javascript中前端显示pdf文件 写于2018/12/6 起因是一个图片展示页面需要展示pdf格式的文件,所以查了半天决定使用pdf.js,我也不求有多了解它,能实现我想要 ...
- C#的百度地图开发(四)前端显示与定位
原文:C#的百度地图开发(四)前端显示与定位 有了这些定位信息,那要如何在前端的页面上显示出来呢?这需要用到百度地图的JavaScript的API.下面是示例代码. 前端代码 <%@ Page ...
- 分享非常好用的前端分页js工具类 灵活 简单易懂
分享自己封装的前端分页js工具类 下面是默认样式效果截图 可以随意更改js及css 很灵活 /** * pageSize, 每页显示数 * pageIndex, 当前页数 * pageCount 总 ...
- 前端05 /js基础
前端05 /js基础 昨日内容回顾 css选择器的优先级 行内(1000) > id(100) > 类(10) > 标签(1) > 继承(0) 颜色 rgb(255,255,2 ...
- C#调用WebService接口实现天气预报在web前端显示
本文使用web (C#)调用互联网上公开的WebServices接口: (http://www.webxml.com.cn/WebServices/WeatherWebService.asmx)来实现 ...
- Web前端-Vue.js必备框架(五)
Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...
- Web前端-Vue.js必备框架(四)
Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...
- Web前端-Vue.js必备框架(三)
Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...
- Web前端-Vue.js必备框架(二)
Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...
随机推荐
- bzoj P5016[Snoi2017]一个简单的询问——solution
Description 给你一个长度为N的序列ai,1≤i≤N和q组询问,每组询问读入l1,r1,l2,r2,需输出 get(l,r,x)表示计算区间[l,r]中,数字x出现了多少次. Input ...
- element-ui input组件源码分析整理笔记(六)
input 输入框组件 源码: <template> <div :class="[ type === 'textarea' ? 'el-textarea' : 'el-in ...
- 高性能JavaScript(加载和执行)
当浏览器遇到 <script> 标签时,它是没办法知道 JavaScript 是否会向DOM中添加内容或引入其他元素,甚至关闭某一个标签.因此这个时候浏览器就会停止处理页面,先执行Java ...
- ConcurrentDictionary的用法
private static ConcurrentDictionary<Guid, string> dictDbNames = new ConcurrentDictionary<Gu ...
- 【Kibana】Kibana入门教程
一.Kibana简介及下载安装 Kibana是专门用来为ElasticSearch设计开发的,可以提供数据查询,数据可视化等功能. 下载地址为:https://www.elastic.co/downl ...
- 风险指针(Hazard Pointer) 内存空间共享模型
WiredTiger是一种高性能的开源存储引擎,现已在MongoDB中作为内模式应用.WiredTiger支持行存储.列存储两种存储模式,采用LSM Tree方式进行索引记录 WiredTiger支持 ...
- MySQL大数据表水平分区优化的详细步骤
将运行中的大表修改为分区表 本文章代码仅限于以数据时间按月水平分区,其他需求可自行修改代码实现 1. 创建一张分区表 这张表的表字段和原表的字段一摸一样,附带分区 1 2 3 4 5 6 7 8 9 ...
- unknown host www.baidu.com 解决方法
今晚一开机发现无法更新yum了,本机是连着wife的,咋无法更新呢,作为小白,一脸懵逼.于是ping了一下百度,网络不可达.... 于是我查看了一下DNS,发现设置了,于是看了一下物理机的DNS,发现 ...
- java基础学习总结——异常处理
一.异常的概念 异常指的是运行期出现的错误,也就是当程序开始执行以后执行期出现的错误.出现错误时观察错误的名字和行号最为重要.
- [Spark SQL_3] Spark SQL 高级操作
0. 说明 DataSet 介绍 && Spark SQL 访问 JSON 文件 && Spark SQL 访问 Parquet 文件 && Spark ...