分值显示

最新推荐文章于 2024-07-17 18:00:00 发布
最新推荐文章于 2024-07-17 18:00:00 发布
阅读量114 收藏
点赞数
文章标签： html

通过五个五角星展示分数的效果，能实现根据长度显示星星内部的效果，比如只有2.1个星这样的效果，如图：



 

 

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
</head>
<body>
<style type="text/css">
.box215{width:215px;border-bottom:1px solid #e5e5e5;padding-bottom:10px;margin-left: 20px;}
.titPf{height:40px;line-height:40px;}
.scroCol{height:29px;padding-bottom:10px;}
.staL{float:left;display:inline;margin:10px 7px 0 0;background:#b4b3b1;width:99px;height:14px;}
.yelloS{background:#f2d03d;width:1px;height:14px;}
.scoR{float:left;display:inline;margin:5px 0 0 0;}
.scoB{font-family:Arial;font-size:18px;color:#cc0001;}
.scoP{color:#999999;}
</style>
<div class="box215">
<div class="titPf f14">打分：</div>
<div class="scroCol clearfix">
<div class="staL">
<div class="yelloS" id="score"><img src="http://dl2.iteye.com/upload/attachment/0100/8849/e3593dfa-6560-3008-9dbf-e052bc6fafb3.gif" width="99" height="14" /></div>
</div>
<div class="scoR"><em class="scoB" id="fen">4.8</em><em class="scoP"></em></div>
</div>


<script type="text/javascript">
var n = 2;//获取星星之间的间隔，比如会有3颗星星，中间的间隔就是2，因为星星之间是有间隙的，所以需要加上间隔的长度
var len = 6*n + 36;
document.getElementById("score").style.width = len + "px";
</script>
</div>
</body>
</html>

ycx0317
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html 评分星级显示,星级评分效果.html
weixin_29614223的博客
06-30 1828
jquery鼠标滑过星星区域显示评论信息、评论星星打分jquery特效|jsfoot网页特效 演示@charset "utf-8";/* reset */*{margin:0;padding:0;list-style-type:none;}a{blr:expression(this.onFocus=this.blur())}/*去掉a标签的虚线框，避免出现奇怪的选中区域*/:focus{outli...
计算机一级考试试题没做完 有分吗,全国计算机一级考试选择题有多项选择题吗，判断题有没有的？还有每个部分各占多少分？...
weixin_42498585的博客
07-08 2544
全国计算机一级考试选择题有多项选择题吗，判断题有没有的？还有每个部分各占多少分？以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！全国计算机一级考试选择题有多项选择题吗，判断题有没有的？还有每个部分各占多少分？没有多项选择题，判断题考试形式：完全采取上机考试形式，各科上机考试时间均为90分钟。考核内容：Ms Office和...
qt界面之QLabel可以分行显示数据
Littlehero_121的博客
09-12 3560
一：使用方式向label不断地写入数据，可以不断地追加数据（但是也有个问题就是数据会重复的添加） 在。h文件中 #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QVector> #include <QDebug> #pragma execution_c...
计算机ms分值,计算机ms分值
weixin_36474795的博客
07-24 570
当今社会信息技术高速发展，计算机作为常用工具之一，等级考试中ms分值分配如何呢。以下是由出国留学网编辑为大家整理的“计算机一级ms分值分配”，仅供参考，欢迎大家阅读。计算机一级ms分值分配单项选择题(计算机基础知识和网络的基本知识) 20 分。Windows 操作系统的使用10 分。Word 操作25 分。Excel 操作20分。PowerPoint 操作15 分。浏览器(IE)的简单使用和电子邮...
计算机cct分值,测验分数的评定转换与解释.DOC
weixin_34195649的博客
07-24 707
测验分数的评定转换与解释第七章　测验分数的评定、转换与解释测验分数的评定一、评分的标准化记分和解释的过程是将被试的反应数量化并赋予意义的过程，这个过程必须遵循标准化的原则。记分标准化关键是使评分的方法尽量客观化，使得不同评分者对同一测验反应(答案)赋予相近的分数。大多数心理测验采用选择题等客观题型，无疑使记分更简便、客观。一些标准化测验配有记分键，即标有标准答案及正确反应的说明，对于论文式做答的测...
计算机应用技术基础考试分值,计算机一级ms分值
weixin_35719518的博客
06-17 1157
当今社会信息技术高速发展，计算机作为常用工具之一，等级考试中ms分值分配如何呢。以下是由出国留学网编辑为大家整理的“计算机一级ms分值分配”，仅供参考，欢迎大家阅读。计算机一级ms分值分配单项选择题(计算机基础知识和网络的基本知识) 20 分。Windows 操作系统的使用10 分。Word 操作25 分。Excel 操作20分。PowerPoint 操作15 分。浏览器(IE)的简单使用和电子邮...
基于el-rate实现有多少分就显示多少⭐，并且分值紧跟最大⭐后面
m0_65448891的博客
01-31 468
基于el-rate实现有多少分就显示多少⭐，并且分值紧跟最大⭐后面。
算法 — 子串分值和
m0_59705760的博客
02-24 805
对于一个字符串 S，我们定义 S 的分值 f(S) 为 S 中出现的不同的字符个数。例如 f(“aba”)=2，f(“abc”)=3,f(“aaa”)=1。蓝桥杯/Java
360界面内分值图形
11-01
【描述】提到的"Qt编写的360安全位置内显示分值波浪滚动圆形控件"，意味着开发者可能使用了Qt的QGraphicsView和QGraphicsScene模块来构建自定义的图形视图组件。QGraphicsView提供了一个二维的渲染视口，可以用来...
ORACLE 11G OCM考试各场景分值分布表.pdf
08-14
考试结果只显示“PASS”或“FAIL”，不提供具体的分数，这也增加了备考的挑战性，考生必须在所有场景中都有所准备，不能轻易忽视任何一部分。 总的来说，Oracle 11g OCM考试对考生的综合能力有着高标准的要求。对于...
中考试题类型分值比重分析表.pptx
10-07
【知识点分析】 1. 论点的重要性：在中考试题...综上所述，中考试题类型分值比重分析表揭示了议论文阅读、论点识别、论据分析、课外阅读和自我反省等核心知识点，这些都是学生在备考过程中需要重点关注和掌握的技能。
泛微E9流程修改字段高亮显示
03-25
泛微E9流程修改字段高亮显示 通过Ecode 开发 只要人为修改表单数据 则会高亮显示
历年软件设计师考试分值分析统计
05-08
首先，从提供的数据显示，软件工程是考试中的核心部分，其分值占比最高，通常为13分。这部分内容涵盖了软件开发的全过程，包括需求分析、系统设计、编码、测试和维护等。考生需要熟悉软件开发模型，如瀑布模型、敏捷...
前端Js根据评价得分展示星级
weixin_49707634的博客
12-16 1267
前端Js根据评价得分展示星级 准备工作 需要一个具体评分字段 “x” (x代表多少分数，可以指定0 – 5分，会出现 （x.5） 半星的情况) 需要三张星星图片，1代表一张完整的金星，2代表左半边是金色，右边是灰色的星星，0代表一张灰色星星 具体应用 假如接口传过来的是x是3.5分，我们需要将3.5转换成[1 , 1 , 1 , 0.5 , 0],需要前三个是完整的金星，第四个是半金星，第五个是灰色。 转换的方法: 定义空数组arr准备存5个阶段的分数，for循环遍历1-5个数，然后进行
C# Word转换HTML（附在线转换工具）
最新发布
学习和分享
07-17 895
根据你的具体需求（如是否需要Microsoft Office、性能要求、成本考虑等），你可以选择使用或Aspose.Words来将Word文档转换为HTML。如果你正在寻找一个不依赖于Microsoft Office的解决方案，并且需要更多的灵活性和控制，那么Aspose.Words可能是一个更好的选择。
Html_Css问答集(11)
白话魔法师
07-16 846
html与css学习中的一些疑问，问答中轻松获取知识。
PhantomJs将html生成img|pdf
u014614478的博客
07-16 895
PhantomJS 生成图片，pdf，爬虫等功能
将DS1302计时时间的年、月、日、星期、时、分值显示于LCD，并适时更新显示。
05-12
这里给出一个基于Arduino的DS1302时钟模块的代码示例，可以将时间信息显示在LCD上并实时更新： ``` #include <LiquidCrystal.h> #include <DS1302.h> // 初始化DS1302模块 DS1302 rtc(2, 3, 4); // 初始化LCD模块 LiquidCrystal lcd(8, 9, 4, 5, 6, 7); void setup() { // 初始化LCD lcd.begin(16, 2); // 初始化DS1302时钟模块 rtc.halt(false); rtc.writeProtect(false); rtc.setDateTime(DS1302::DateTime(__DATE__, __TIME__)); } void loop() { // 获取当前时间 DS1302::DateTime now = rtc.getDateTime(); // 将时间信息显示在LCD上 lcd.setCursor(0, 0); lcd.print("20"); lcd.print(now.year); lcd.print("/"); lcd.print(now.month); lcd.print("/"); lcd.print(now.day); lcd.print(" "); lcd.print(getWeekday(now)); lcd.setCursor(0, 1); lcd.print(now.hour); lcd.print(":"); if (now.minute < 10) { lcd.print("0"); } lcd.print(now.minute); lcd.print(":"); if (now.second < 10) { lcd.print("0"); } lcd.print(now.second); // 等待1秒钟 delay(1000); } // 获取星期几的字符串表示 String getWeekday(DS1302::DateTime now) { switch (now.dayOfWeek) { case 1: return "Mon"; case 2: return "Tue"; case 3: return "Wed"; case 4: return "Thu"; case 5: return "Fri"; case 6: return "Sat"; case 7: return "Sun"; default: return ""; } } ``` 该代码中使用了LiquidCrystal库和DS1302库来控制LCD和DS1302时钟模块。在setup函数中，我们初始化了LCD和DS1302时钟模块，并将当前时间设置为编译时的时间。在loop函数中，我们不断获取当前时间并将时间信息显示在LCD上，然后等待1秒钟后再重复这个过程。为了方便显示，我们将日期和星期的字符串表示合并到了一起。getWeekday函数根据DS1302库返回的星期几数字返回对应的字符串表示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值