JavaScript实现简单的星星评分效果
更新时间：2017年05月18日 09:51:53 作者：haozihaozi1234
这篇文章主要为大家详细介绍了JavaScript实现简单的星星评分效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
大概实现思路就是用一张灰色的星星作为背景，然后让有颜色的星星图片定位在灰色的星星图片上，控制有颜色星星图片的宽度即可达到基本效果。如下图：
下面上代码：
<html>
<head>
<meta charset="UTF-8">
<title>星星</title>
<style>
.starnone,.starWrap{
width: 100px;
height: 20px;
}
.starnone{
position: relative;
background: url(stars-none20px.png) no-repeat;
}
.star{
position: absolute;
top: 0;
left: 0;
width: 70%;
height: 20px;
background: url(stars20px.png) no-repeat;
}
#num{
width: 30px;
}
</style>
</head>
<body>
<div class="starnone">
<div class="starWrap">
<div class="star" id="star"></div>
</div>
</div>
<div>
<input type="text" id="num"> %
<button id="ok">OK</button>
</div>
<script>
window.onload = function(){
var star = document.getElementById("star");
var okBtn = document.getElementById("ok");
var num = document.getElementById("num");
okBtn.onclick = function(){
var value = parseFloat(num.value);
if (value>100) {
alert("请小于100");
return;
} else if(value<0){
alert("请大于0");
return;
}
star.style.width = value + "px";
}
}
</script>
</body>
</html>
用到的两个图片。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
js中将具有数字属性名的对象转换为数组，虽然不太常用，但我们的确可以给对象添加以数字为属性名的属性2011-03-03
这篇文章主要介绍了原生javaScript实现图片延时加载的方法,无需通过载入jQuery脚本即可实现图片的延时加载效果,是非常实用的技巧,需要的朋友可以参考下2014-12-12
这篇文章主要为大家详细介绍了JavaScript如何实现控制并发请求数量,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-02-02
本文主要介绍了TypeScript环境搭建的实现步骤，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
js控制div及相关属性，对于需要控制页面内的元素的朋友可以参考下。2009-12-12
这篇文章主要介绍了微信js-sdk界面操作接口用法,结合实例形式分析了微信界面操作的相关接口功能与使用技巧,需要的朋友可以参考下2016-10-10
让插入到 innerHTML 中的 script 跑起来的实现代码
在做 ajax 编程时，我们常常需要将 xmlhttp 获取到的页面内容通过 innerHTML 来赋给某个容器（比如 div、span 或者 td 等），但是这里存在一个问题，就是我们将要赋给 innerHTML 的页面内容如果包含有脚本程序，这些脚本程序不管是外部脚本，还是内部脚本，可能(1)都不会被执行。2006-07-07
为了提高网站的加载速度，有一个很重要的手段就是在用户浏览过程中的上游网站做一个文件的预加载。2010-04-04
如 TypeScript 官方文档所说，枚举类型是对 JavaScript 标准数据类型集的扩充,所以下面这篇文章主要给大家介绍了关于TypeScript中枚举类型的理解与应用场景的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-09-09
这篇文章主要为大家详细介绍了javascrpt密码强度校验函数，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
最新评论