分值显示

通过五个五角星展示分数的效果,能实现根据长度显示星星内部的效果,比如只有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://images.cnitblog.com/blog/663787/201409/051536243445294.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>

时间: 2024-10-02 11:32:37

分值显示的相关文章

Cocos2d-x 3.2 学习笔记(十一)Game 2048

一.规则 游戏2048的规则很简单 2+2=4  4+4=8 8+8=16 16+16=32 ……1024+1024=2048 这游戏挺火的……不过做起来也不难,就用cocos2dx做一下,首先我也没看过别人 怎么做的,当然写的也不是很好,能玩…… 二.游戏 游戏的界面是用画的,数字是写上去的,卡片的移动效果没有做,加入了声音,玩起来还行. 1.主要的类只有四个: GameScene 主场景(分值显示.菜单按钮.游戏区域) GameLayer 游戏操作区域(数值变化.逻辑控制) GameItem

安卓2048小游戏源码

http://git.oschina.net/scimence/sci_2048/wikis/home package com.example.sci_2048; import java.util.Random; import android.app.Activity; import android.app.AlertDialog; import android.content.DialogInterface; import android.graphics.Color; import andr

Redis常用操作

一.string类型的常用命令 set key1 com #一个key对应一个value,多次复制,会覆盖前面的value setnx key1 zhangsan #如果key1不存在则创建key1,并返回1,如果可以key1存在,则不会覆盖key1的值,并返回0 setex key3 100 fansik #创建key3设置过期时间为100秒 ttl key3 #查看key还有多久过期 mset key4 123 key5 213 #同时设置多个值 mget key1 key2 key4 ke

自己写的一部分斗地主的程序,没有去写界面,临时是用黑框来显示的

这几天比較空,所以想写一点东西. 斗地主的程序一直以来都想写,但感觉规则推断比較复杂,一直没有较多的时间来写. 这次主要是把跟牌和牌型的推断写出来了.写了一个比較弱智的AI,属于有牌就出的那种.对于AI算法,临时没有什么好的想法,所以打算临时放一放. 后期补上界面之后再进行优化. 在这就把基本的函数和算法列出来吧. 首先是主程序,主要控制显示和游戏的流程. #include <iostream> #include "PokerDesk.h" using namespace

[笔记]格式化jqGrid中的日期与时间,解决时分秒都显示为0

项目中的一个jqGrid列表页面的一列需要显示日期和时间,如:2011-08-10 10:20:30,查阅官方wiki文档的说明和例子,然后在colModel的需要格式化时间的列的formatter:'date'的后面加了一些 formatoptions配置,但IE和FF浏览器中都没有效果,也没提示什么错误~ 无奈官方wiki文档的日期时间格式化部分的说明和例子对我来说不够细,只好查看jquery.fmatter.js中的源代码的DateFormat部 分,还好查出来了,原来srcformat和

评定星级的前端显示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 <=

linux进程内存到底怎么看 剖析top命令显示的VIRT RES SHR值

引 言: top命令作为Linux下最常用的性能分析工具之一,可以监控.收集进程的CPU.IO.内存使用情况.比如我们可以通过top命令获得一个进程使用了多少虚拟内存(VIRT).物理内存(RES).共享内存(SHR). 最近遇到一个咨询问题,某产品做性能分析需要获取进程占用物理内存的实际大小(不包括和其他进程共享的部分),看似很简单的问题,但经过研究分析后,发现背后有很多故事-- 1 VIRT RES SHR的准确含义 三个内存指标,VRIT,RES,SHR准确含义是什么?谁能告诉我们?MAN

剖析top命令显示的VIRT RES SHR值

http://www.fuzhijie.me/?p=741 引 言: top命令作为Linux下最常用的性能分析工具之一,可以监控.收集进程的CPU.IO.内存使用情况.比如我们可以通过top命令获得一个进程使用了多少虚拟内存(VIRT).物理内存(RES).共享内存(SHR). 最近遇到一个咨询问题,某产品做性能分析需要获取进程占用物理内存的实际大小(不包括和其他进程共享的部分),看似很简单的问题,但经过研究分析后,发现背后有很多故事-- 1 VIRT RES SHR的准确含义 三个内存指标,

win7设置固定IP重启后无法上网,ipconfig显示为自动配置IPV4 169.254的地址

近日安装原版Win7系统打完网卡驱动补丁后,给电脑设置了固定的IP地址后一切正常,但是电脑重启后发现上不了网了,右下角网络图标有个感叹号,打开网络和共享中心-->本地连接-->详细信息-->发现IPv4的地址与ipconfig /all得到的IP地址一致,均显示为:自动配置IPv4地址:169.254.123.188(首选) 但是查看本地连接-->属性里看到之前设置的固定IP地址是没有问题的, 所以想到了应该是电脑启用了自动配置IPv4功能,导致了固定IP无法分配给电脑, 尝试用命