5星评分JS小实例

最新推荐文章于 2021-09-04 11:14:42 发布
最新推荐文章于 2021-09-04 11:14:42 发布
阅读量1.7k 收藏
点赞数 1
分类专栏： JS|JQ|CSS 文章标签： function xhtml html c# server table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/scorpionfz/article/details/6771701
版权 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <title></title>
</head>
<body οnlοad="initEvent()">
 <table id="tableRating"><tr><td>❤</td><td>❤</td><td>❤</td><td>❤</td><td>❤</td></tr></table>
</body>
</html>

<script type="text/javascript">
    function initEvent() {
        var tableRating = document.getElementById('tableRating');
        var tds = tableRating.getElementsByTagName('td');
        for (var i = 0; i < tds.length; i++) {
            var td = tds[i];
            td.onclick = TdOnclick;
            td.style.cursor = "pointer";
            }
    }


  function indexof(arr, element) {
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] == element)
                return i;
        }
        return -1;
    }


    function TdOnclick() {
        var tableRating = document.getElementById('tableRating');
        var tds = tableRating.getElementsByTagName('td');
        var index = indexof(tds, this);
        for (var i = 0; i <= index; i++) {
            tds[i].style.background = "red";
        }
        for (var i = index + 1; i < tds.length; i++) {
            tds[i].style.background = "white";
        }
        }
</script>
用JQ改进···········

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Js/jquery-1.6.2.js" type="text/javascript"></script>

<title></title>
</head>
<body>
<table id="ratings"><tr><td></td><td></td><td></td><td></td><td></td></tr></table>
</body>
</html>

<script type="text/javascript">
    $(function () {
         $("#ratings td").html("☆").mouseover(function () { $("#ratings td").html("★"); $(this).nextAll().html("☆"); });
    });
</script>









                

        

        

    




    

      

        

            

              
                
                  DrugScropion
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
HTML5+JS实现的全屏星空特效源码

				
			

			

				

					05-06
				

			

		

		

			
				
HTML5+JS实现的全屏星空特效源码HTML5+JS实现的全屏星空特效源码HTML5+JS实现的全屏星空特效源码HTML5+JS实现的全屏星空特效源码HTML5+JS实现的全屏星空特效源码

			
		

	



                

              
                



	

		

			

				
					
超简单的js 5星评论代码

				
			

			

				

					vicky_qiu的博客
				

				

					09-08
					
					2411
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>javascript星级评分</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    .wrapper{height:20px;padding:5px;width:130px;margin

			
		

	



                


  
              

                


	

		

			

				
					
js实现五星评分的效果

					
热门推荐

				
			

			

				

					jwf323594的博客
				

				

					09-14
					
					1万+
					
				

			

		

		

			
				
今天在做后台管理系统的时候，有一个需求是要给完成的任务评分，用星级显示，网上查找了一些实现方法，发现有两种方法相对来说比较简单有效。
我在这整理一下这两种方法，以后出现类似的需求可以直接拿来用了。
方法一：
 1.  创建一个html页面后，先是在body里面加入如下代码：
       






       这里的名为star图片是空心的五星图片，可以去阿里图库下载


			
		

	





	

		

			

				
					
c# 访淘宝星星评价

				
			

			

				

					01-02
				

			

		

		

			
				
c# 用listview实现模仿网站星型评价模式

			
		

	



		

			
		



	

		

			

				
					
JavaScript实现5星好评制作

				
			

			

				

					weixin_44567289的博客
				

				

					01-19
					
					634
					
				

			

		

		

			
				
JavaScript实现5星好评制作
&lt;style&gt;
         .s {
             background: #808080;
         }
      i{
          font-size:100px;
      }
    &lt;/style&gt;
    &lt;body&gt;
    &lt;div class="s"&gt;
  ...

			
		

	





	

		

			

				
					
JS实现带提示的星级评分效果完整实例

				
			

			

				

					10-23
				

			

		

		

			
				
主要介绍了JS实现带提示的星级评分效果,以完整实例形式较为详细的分析了JavaScript响应鼠标事件动态变换页面元素样式的相关技巧,非常简单实用的代码,需要的朋友可以参考下

			
		

	





	

		

			

				
					
原生JS实现-星级评分系统的简单实例

				
			

			

				

					10-21
				

			

		

		

			
				
下面小编就为大家带来一篇原生JS实现-星级评分系统的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
JavaScript实现星级评分

				
			

			

				

					10-20
				

			

		

		

			
				
本文主要分享了JavaScript实现星级评分的实例代码，具有一定的参考价值，下面跟着小编一起来看下吧

			
		

	





	

		

			

				
					
JS实现星星评分功能实例代码(两种方法)

				
			

			

				

					10-22
				

			

		

		

			
				
主要介绍了JS实现星星评分功能实例代码(两种方法)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下

			
		

	





	

		

			

				
					
jQuery案例之五星好评

				
			

			

				

					qq_40176258的博客
				

				

					11-30
					
					602
					
				

			

		

		

			
				

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
   

			
		

	





	

		

			

				
					
js五星好评

				
			

			

				

					zhangxy
				

				

					09-04
					
					183
					
				

			

		

		

			
				
var num = 5;
var star ="★★★★★☆☆☆☆☆";
star.slice(5 - num, 10 - num);






			
		

	





	

		

			

				
					
html+css+js实现类淘宝星级宝贝评价系统

				
			

			

				

					Shsgear的博客
				

				

					11-04
					
					1万+
					
				

			

		

		

			
				
1.先上效果图

鼠标悬浮效果


鼠标点击效果

点击后把鼠标移开依旧会恢复上次的评分


2.准备部分
    1.提示框倒三角的实现
    看这张图片
颜色比较丑。我们实现很多地方都要用到这种气泡型的东西，倒三角是它的实现思路。我们怎么制作一个倒三角呢？？用css background的话要加载图片，是不利于网站优化的.我这里用到的办法是采用css border来

			
		

	





	

		

			

				
					
JS五星好评案例

				
			

			

				

					shadowfall的博客
				

				

					11-09
					
					581
					
				

			

		

		

			
				
业务逻辑是我需要先创建出所有我需要用到的标签和样式再写出我们星星对应的行为,分数对应行为,笑脸对应行为,点击对应行为,抽象化出来,方便维护。并且在点击后我们抛出事件，记录下对应的name，分数等信息，保存在cookie中。
在编写过程中,一个是位置问题,很容易出现在没有创建就进行appendChild,第二个就是在添加行为时如何调整星星,笑脸的位置。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=

			
		

	





	

		

			

				
					
JavaScript之实现5星好评

				
			

			

				

					Chuzilun的博客
				

				

					11-28
					
					311
					
				

			

		

		

			
				
JavaScript实现5星好评
代码直接就上了，有什么问题可以问我
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <

			
		

	





	

		

			

				
					
jQuery实现5星好评制作

				
			

			

				

					weixin_44567289的博客
				

				

					01-19
					
					312
					
				

			

		

		

			
				
jQuery实现5星好评制作
 &lt;link href="~/Content/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" /&gt;@*星星*@
  &lt;script src="~/Content/bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"&gt;&lt;/scrip...

			
		

	





	

		

			

				
					
乘法表.php

				
			

			

				

					Vivian_shuang的博客
				

				

					08-15
					
					445
					
				

			

		

		

			
				
html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    me

			
		

	





	

		

			

				
					
JS 五星评价的代骊实现

				
			

			

				

					u011714373的专栏
				

				

					08-16
					
					378
					
				

			

		

		

			
				
/************************************************************************
*************************************************************************
@Name :        jRating - jQuery Plugin
@Revison :

			
		

	





	

		

			

				
					
javaScript实现五星好评代码

				
			

			

				

					畅游JAVA
				

				

					12-16
					
					7206
					
				

			

		

		

			
				
效果如图：
具体代码：





function test(myvalue){
for(var i=1;i
document.getElementById(""+i).innerHTML="☆";
document.getElementById(""+i).setAttribute("style","color:black");
}
for(var i=1;i
docu

			
		

	





	

		

			

				
					
html5 项目实例

					
最新发布

				
			

			

				

					10-20
				

			

		

		

			
				
前端使用HTML5、CSS3和JavaScript来构建网页，并且使用了一些HTML5的新特性。在网页中，商品以高清图片和详细描述的形式展示出来，用户可以通过搜索功能或者浏览商品分类来找到自己想要的商品。前端使用了响应式设计...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值