javascript实现五星评分功能
更新时间：2022年09月01日 11:25:30 投稿：lijiao
这篇文章主要介绍了javascript实现五星评分功能，大家现在会见到许多五星评级，知道是如何实现的吗？文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文为大家分享了javascript实现五星评分功能的实例代码，大家可以参考学习一下，具体的实现办法如下
在分享javascript实现五星评价功能的实例代码之前，先看一看效果图：
star1.png
star1.png
具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>53</title>
<script src='js/jquery-1.11.1.js'></script>
<style>
*{
margin: 0;
padding: 0;
}
body{
padding: 20px;
}
.star1{
width: 70px;
height: 13px;
background: url('images/star1.png') repeat-x left center;
}
.star2{
/* width: 60%;*/
height: 13px;
background: url('images/star2.png') repeat-x left center;
float: left;
}
</style>
<script>
$(function(){
var fiveStars=function(num){
if(!num||num<3){
return '--';
}
return '<div class="star1"><div class="star2" style="width:'+num*20+'%"></div></div>';
}
var str=fiveStars(4)
$('body').html(str)
})
</script>
</head>
<body>
<!--<div class='star1'><div class="star2"></div></div> -->
</body>
</html>
希望本文对大家学习javascript程序设计有所帮助。
相关文章
JavaScript asp.net 获取当前超链接中的文本
今天用到，不会。网上找到一个方法，赶快记下来。可以获取超链接的链接文本。2009-04-04
移到这里，就会自动点击...2006-08-08
这篇文章主要为大家详细介绍了如何通过CSS、JavaScript和Vue分别实现逐字弹出(打字机)效果,文中的示例代码讲解详细,需要的小伙伴可以参考一下2024-01-01
这篇文章主要介绍了TypeScript 映射类型详情，一个类型需要基于另外一个类型， 又不想拷贝一份，这个时候可以考虑使用映射类型，映射类型建立在索引签名的语法上，下面文章我们就从回顾下索引签名展开TypeScript 映射类型的相关资料,需要的朋友可以参考一下2021-12-12
返回顶部功能在很多的网站上都有，判断滚动参数动态显示与隐藏，下面的示例很实用，喜欢的朋友可以收藏下2014-10-10
JavaScript回调(callback)函数概念自我理解及示例
此文适合JavaScript入门级选手阅读，在JavaScript里什么叫Callback“回调函数”，把方法b当做一个参数传递个方法a，当方法a执行完后执行另外一个指定函数（这里是b函数），感兴趣的朋友可以了解下哈2013-07-07
如果有一个数字498.8573945,如何把它格式化成两位小数据呢？用过asp的都知道,在vbscript里我们可以调用formatnumber,即用formatnumber(498.8573945,2)就可以输出：498.86。2008-12-12
这篇文章主要介绍了基于javascript实现随机颜色变化效果的相关资料,需要的朋友可以参考下2016-01-01
现如今，二维码无处不在，扫一扫送抽纸，那么基于js二维码是如何生成的呢？面对这一问题，下面小编给分享一代码介绍javascript生成二维码图片小结，感兴趣的朋友一起学习吧2015-12-12
Javascript 实现TreeView CheckBox全选效果
Javascript 实现TreeView CheckBox 选中父节点时所有子节点全选，取消时全部取消2010-01-01
最新评论