当前位置:首页 > 日记 > 正文

一个简单的星光评分效果的javascript实现

一个简单的星光评分效果的javascript实现
可能的想法是使用一个灰色的恒星作为背景,然后让彩色恒星定位在灰色的明星的图片,和宽度的彩色星星可以控制,以达到基本效果:
以下代码:

星星

。starnone,starwrap {。
宽度:100px;
身高:20px;
}
starnone {。
职位:相对;
背景:URL(stars-none20px。PNG)不重复;
}
.星
位置:绝对;
顶部:0;
左:0;
宽度:70%;
身高:20px;
背景:URL(stars20px。PNG)不重复;
}
# Num {
宽度:30px;
}

%
好啊
在window.onload =函数(){
VaR星= document.getelementbyid(明星);
无功okbtn = document.getelementbyid(好);
VaR Num = document.getelementbyid(民);
okbtn.onclick =函数(){
VaR值= parseFloat(num.value);
如果(值> 100){
警报(请小于100 );
返回;
}如果(值< 0){
警报(请大于0 );
返回;
}
star.style.width =价值+PX;
}
}

这两张照片用了。

以上是本文的全部内容,希望能对您有所帮助,希望大家多多支持。

相关文章

PS如何降低实验室模式下的下降效应

PS如何降低实验室模式下的下降效应

效应,实验室,模式下,电脑软件,PS,PS中颜色匹配的方法不同,调色板的应用也很多。现在我介绍另一种容易学的实验室方法。我把这种颜色叫做糖色,你想让你的女朋友做一个大的改变,和我一起学习今天的教程吗 PS降级在实验室模式光明秋季效果教程 …

的Win8.1系统被发现有严重的内核漏

的Win8.1系统被发现有严重的内核漏

内核,漏洞,系统,发现有,电脑软件,据报道,国外安全机构Bromium实验室暴露了Win8.1系统的核心缺陷。有了这个漏洞,黑客可以突破所有安全软件的多重保护。 相关专业研究发现沙箱技术、杀毒软件、Rootkit扫描器,主动防卸系统,微软的安全机制等方面…

javascript实现购物车的基本功能

javascript实现购物车的基本功能

购物车,基本功能,电脑软件,javascript,javascript购物车最基本的功能,有一定的参考价值,有兴趣的小伙伴可以参考一下。 表{ 边界塌陷:塌陷; } TH { 宽度:80px; 身高:30px; } TD { 文本对齐:中心; 行高:30px; } 选择 商品 价格 数 总 操作 焖鸡饭1 十 — …

ps快速绘制图标

ps快速绘制图标

图标,绘制,快速,电脑软件,ps,今天的教程是教你画一个漂亮的图标,当然不难,主要是使用图层样式,熟练的话可以在15分钟内完成。让我们向小编辑器学习。 15分钟快速的画出一个快速的图标版本…

Bootstrap插件TreeView选择父节点

Bootstrap插件TreeView选择父节点

选择,父节点,插件,子节点,功能,项目需要实现权限管理和使用前端框架的引导,引导的TreeView扩展插件是直接选择第一个图片: 当选择父节点时,也会选择父节点下的所有子节点来查看代码。 1,HTML代码 TreeView的使用 2,JSON数据 功能gettvstateda…

PS如何设计一个简单的耳机图标

PS如何设计一个简单的耳机图标

图标,耳机,简单,电脑软件,PS,PS如何设计一个简单的耳机图标让我们来看一下用角工具和钢笔工具快速画图的方法。详情如下。 软件名称:Adobe PS图象处理软件8全绿色中文版软件大小:150.1mb更新时间:2015-11-04 1。打开ps新文档以找到角工具 2…

PS过滤功能使铁树花效果的使用教程

PS过滤功能使铁树花效果的使用教程

使用教程,过滤,铁树,效果,功能,今天,使滤波器的铁树花效果的教程使用的主要工具,生产过程非常简单,请看下面的细节。 软件名称:Adobe PS图象处理软件8全绿色中文版软件大小:150.1mb更新时间:2015-11-04 1、首次启动PS图象处理软件CS5,执行文件-新…

WindowsServer2012的安装配置方法

WindowsServer2012的安装配置方法

教程,安装配置,方法,电脑软件,Oracle12C,分享Oracle 12c的安装配置方法教程,详情如下 1。我们打开虚拟机 2、Windows服务器2012启动。 三.见Windows服务器2012的桌面。 4。我们将两个文件解压缩,winx64_12c_database_1of2.zip,winx64_12c_dat…

插画简单风格卡通飞机图标

插画简单风格卡通飞机图标

图标,插画,飞机,卡通,风格,今天,我想和大家分享一下插画的卡通图标设计,这是一个简单的风格。教程很简单,制作的图标非常漂亮。建议像你这样的朋友可以参考这篇文章并看一看。 步: 本教程结束,以上是插画绘制简单风格的卡通飞机图标教程,方法很…

在excel中使用除法函数公式的运算

在excel中使用除法函数公式的运算

运算,除法,函数,方法,公式,excel的计算功能非常强大。现在教你一个excel的除法公式是非常实用和方便的,以后你可以灵活使用它!今天,小编辑教你如何在excel中使用除法函数公式,希望能对你有所帮助! excel中除法函数公式的运算步骤 打开一个空白…

PS很快把胡戈变成一个好的水彩画效

PS很快把胡戈变成一个好的水彩画效

水彩画,效果,课程,胡戈,电脑软件,方法制作水彩人物画的方法非常简单:首先选择深色区域,用水彩材料重叠,先画水彩肖像;然后在背景区域添加一些水彩纹理;最后,根据喜好,调整色彩和清晰度。 最终效果: 主要过程: 1。选择人物的图片。 2,选择水彩颜料。…

旋转的在Word2010两方法

旋转的在Word2010两方法

方法,电脑软件,对于Word 2010文档中的图片,用户可以根据实际需要旋转所选图片,Word 2010文档中有多种旋转图片的方法。让我们与你在Word2010旋转图片的技巧分享,希望能帮助你。 Word2010旋转图片的方法1: 第一步:选择图片,将鼠标切换到功能区;格…