js评价星级

最新推荐文章于 2022-06-24 17:41:25 发布

Seirohappy

最新推荐文章于 2022-06-24 17:41:25 发布

阅读量224

点赞数

分类专栏： js 文章标签：评星级

本文链接：https://blog.csdn.net/qq_41554955/article/details/100140058

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

以下内容分为html(含js),css;

1.html(含js,jquery,bootsratp):

jquery自己下jquery-3.3.1.min.js
bootstrap通过联网用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="../css_pro/degree.css" type="text/css"/>
	<script type="text/javascript" src="../jquery-3.3.1.min.js" ></script>
	<script>
  function	changecolor(e)
  {

  for(var i=1;i<=5;i++)
  {
  	
  	if(i<=e)
  	{
  		var	a="#star"+i;
  		//console.log("a="+a);
  		$(a).css("color","red");
  	}
  	else{
  		var	a="#star"+i;
  		//console.log("a="+a);
  		$(a).css("color","black");
  	}
  	
  }
  }
	</script>
	</head>
	<body>
		  <span class="glyphicon glyphicon-star"id="star1"onclick="changecolor(1)"></span>
		  <span class="glyphicon glyphicon-star"id="star2"onclick="changecolor(2)"></span>
		  <span class="glyphicon glyphicon-star"id="star3"onclick="changecolor(3)"></span>
		  <span class="glyphicon glyphicon-star"id="star4"onclick="changecolor(4)"></span>
		  <span class="glyphicon glyphicon-star"id="star5"onclick="changecolor(5)"></span>
	</body>
</html>

2.css:

#star1,#star2,#star3,#star4,#star5
{
	width:30px;
	heiht:30px;
	font-size: 30px;
	
}

3.效果如下:

在这里插入图片描述

Seirohappy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js评价星级

以下内容分为html(含js),css;1.html(含js,jquery,bootsratp):jquery自己下jquery-3.3.1.min.jsbootstrap通过联网用<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title...
复制链接

扫一扫