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>
用到的两个图片。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了javascript框架设计之浏览器的嗅探和特征侦测的相关资料,需要的朋友可以参考下2015-06-06
p5.js 是一个JavaScript的函数库，它在制作之初就和Processing有同样的目标。本文将利用p5.js 制作出一束动态花束，感兴趣的可以尝试一下2022-06-06
Option 对象代表 HTML 表单中下拉列表中的一个选项。在 HTML 表单中 <option> 标签每出现一次，一个 Option 对象就会被创建。您可通过表单的 elements[] 数组访问一个 Option 对象，或者通过使用 document.getElementById()。2015-05-05
这篇文章主要为大家详细介绍了小程序实现商品属性选择或规格选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
做前端或者js程序员的同学应该都有感受，在日常工作中，用的最多的功能，一个是ajax与后台的数据接口，另一个就是对Dom元素的style控制，来达到不同的变换效果。2010-10-10
这篇文章主要为大家详细介绍了JavaScript实现省市联动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了网页挂马方式整理及详细介绍的相关资料,这里整理了不少方式，大家可以看下如何实现的，需要的朋友可以参考下2016-11-11
这篇文章主要介绍了JS如何实现一个单文件组件，对单文件组件感兴趣的同学，可以参考下2021-05-05
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
这篇文章主要介绍了使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
JS 事件绑定函数代码，解决了浏览器兼容，现在可以兼容IE6 7 8 FF 谷歌2010-04-04
最新评论