评定星级的前端显示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 ...
随机推荐
- 初识Java作业
初识Java作业 一. 填空题 Java技术按照用途不同分为三大版本,分别是JavaSE. javaEE 和JavaMe Java虚拟机就是一个虚拟的用于执行 .class ...
- python学习笔记——python JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读和编写. 1.JSON 函数 使用 JSON 函数需要导入 json 库:import json ...
- WiFi 统一管理以及设备自动化测试实践
ATX 安卓设备 WiFi 统一管理以及设备自动化测试实践 (零散知识梳理总结) 此文为转载,感谢作者 目录 众所周知,安卓单台设备的UI自动化测试已经比较完善了,有数不清的自动化框架或者工具.但 ...
- 使用ES6+Vue+webpack+gulp构建新一代Web应用
1.推荐学习网站:Vue.js中国 2.Demo环境搭建: 2.1环境配置 安装nodejs环境,具体内容可以百度: 新建一个文件夹: mkdir VUE-ES6-WebPack 全局安装gulp: ...
- 《JavaScript面向对象编程指南》
第一章.引言 1.5 面向对象的程序设计常用概念 对象(名词):是指"事物"在程序设计语言中的表现形式. 这里的事物可以是任何东西,我们可以看到它们具有某些明确特征,能执行某些动作 ...
- 在 Azure 中管理 Windows 虚拟机的可用性
了解如何设置和管理多个虚拟机,以确保 Azure 中 Windows 应用程序的高可用性. 也可以管理 Linux 虚拟机的可用性. Note Azure 具有用于创建和处理资源的两个不同的部署模型: ...
- 访问url地址 但tomcat会发两次请求??
statDate===2017-06-27================2017年7月11日 16:06:43执行成功,共删除0条.2017年7月11日 16:06:43执行成功,共插入48835条 ...
- Bitlocker驱动器加密使用
前言 Bitlocker驱动器加密可以将磁盘加密,确保数据的安全.如果被加密保护的磁盘是Windows Server 2012操作系统磁盘,即使他被拿到另外一台计算机启动,除非已解锁,否则无法启动 ...
- 关于QT的QCombox的掉坑出坑
最近项目中开发在用到QCombox,然而在开发中,踩到了一个坑,花了一个晚上,一直在想,好在最后找到问题所在了. 这是业务的流程.直接说重点:QCombox在下拉窗更新数据的时候,会默认把下拉窗的第一 ...
- JSONCPP to Visual Studio
I am having some trouble getting the JSONCPP Library into Visual Studio. I have downloaded the libra ...