五星评分，让我告诉你半颗星星怎么做

最新推荐文章于 2022-06-24 14:35:18 发布
置顶 最新推荐文章于 2022-06-24 14:35:18 发布
阅读量4.1k 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41938853/article/details/80182657
版权
这篇博客介绍了如何在微信小程序中实现五星评分，包括半颗星星的效果。作者通过wxml、js和css三个部分的代码展示了实现过程，旨在帮助开发者掌握这一常见功能的实现技巧。
摘要由CSDN通过智能技术生成

概述

我们在学习微信小程序或者做项目时，应该会遇到五星评分效果情况，那么这个五星评分,半颗星星怎么做功能我们应该怎么编写呢？
今天我们说下微信小程序五星评分,半颗星星效果的实现，今天分享这样的小教程。希望对大家有所帮助。

不多说了，阿杰要上图啦！


快去拿个小板凳，坐等跟多更新

wxml

 

    
 
  1. <!--index.wxml-->
    2. 
 
  2. <block wx:for="{
    {stars}}" wx:key="">
    3. 
 
  3.  <image class="star-image" style="left: {
    {
    item*150}}rpx" src="{
    {key > item ?(key-item == 0.5?halfSrc:selectedSrc) : normalSrc}}">
    4. 
 
  4.  <view class=
    5. 


                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  进步中的阿杰
                
              
            

            

                关注
              
            

        

        

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

      

      










                



	

		

			

				
					
这个五星评分,半颗星星怎么做功能我们应该怎么编写呢？

				
			

			

				

					极客小寨的博客
				

				

					04-16
					
					805
					
				

			

		

		

			
				
  
    
            




starBanner.png

概述
我们在学习微信小程序或者做项目时，应该会遇到五星评分效果情况，那么这个五星评分,半颗星星怎么做功能我们应该怎么编写呢？
今天我们说下微信小程序五星评分,半颗星星效果的实现，今天分享这样的小教程。希望对大家有所帮助。
不多说了，二当家要上图啦！







快去拿个小板凳，坐等跟多更新
wxml
&lt;!-...

			
		

	



                

              
                



	

		

			

				
					
星星打分/半星/半颗星操作

				
			

			

				

					06-02
				

			

		

		

			
				
最近发现网上的星星打分插件，都没有支持半颗星操作的。找了半天，干脆自己写了个共享出来了。总共不到20行jquery 代码

			
		

	



                


  
              

                


	

		

			

				
					
星星评分的实现

				
			

			

				

					weixin_43269298的博客
				

				

					04-25
					
					535
					
				

			

		

		

			
				
星星评分的实现实现原理js实现星星评分代码Vue实现星星评分代码小程序实现星星评分代码
实现原理
    首先看一下实现的效果图和代码。

 function f1(data, star) {
                var result = [];
                var score = Math.floor(data * 2) /...

			
		

	





	

		

			

				
					
js实现星星评分功能的实现（逻辑思路）

				
			

			

				

					克克克克业业的学习记录
				

				

					11-29
					
					1146
					
				

			

		

		

			
				
1.先得到要操作的网页元素的DOM对象
img的DOM对象，textarea的DOM对象
2.遍历图片的DOM对象集合，绑定事件，
绑定鼠标移上的事件，鼠标移开的事件
3.事件触发时，回调函数的执行
鼠标移上时，判断当前移上的图片是第几张图片，
获取当前图片的title属性
根据是第几张图，来决定如何切换图片
①  > 2 star2.png
②  < 2 star1.png
<...

			
		

	



		

			
		



	

		

			

				
					
前端笔记——五角星评分（半星+一星 鼠标移动版）

				
			

			

				

					一叶的博客
				

				

					03-22
					
					835
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
		...

			
		

	





	

		

			

				
					
微信小程序 五星评分(包括半颗星评分)实例代码

				
			

			

				

					12-28
				

			

		

		

			
				
要有半颗星的评分.   于是我做了个玩具.有空了做模块化,这代码看不下去了.    代码:   1.index.wxml   <!--index.wxml-->   <image class=star-image xss=removed src={{key> item ?(key-item == 0.5?halfSrc:...

			
		

	





	

		

			

				
					
javascript实现五星评分功能

				
			

			

				

					10-23
				

			

		

		

			
				
虽然示例代码给出了一个实现五星评分功能的方法，但实际开发中还需要考虑许多其他因素，比如评分的精确度（是否需要半星评分），评分的持久化（如何存储用户评分数据），以及界面的美观性等。此外，随着Web技术的...

			
		

	





	

		

			

				
					
HTML5 SVG星级评分动画特效

				
			

			

				

					07-31
				

			

		

		

			
				
5. **评分逻辑**：根据实际需求，可以添加评分逻辑，计算当前选择的星星数，并同步更新所有星星的动画状态。  6. **优化性能**：为了提高动画的流畅性，可以使用`requestAnimationFrame`来平滑地执行动画帧，确保在...

			
		

	





	

		

			

				
					
JQ实现星星评价（带半星）

				
			

			

				

					a610616898的博客
				

				

					07-28
					
					6474
					
				

			

		

		

			
				
JQ实现星星评价效果

			
		

	





	

		

			

				
					
原创js星星评分（10分5颗星）

				
			

			

				

					03-19
				

			

		

		

			
				
传了两次
博文链接：https://qian.iteye.com/blog/728421

			
		

	





	

		

			

				
					
js实现评分功能---打星（包含半星）

				
			

			

				

					polmJ
				

				

					01-18
					
					5576
					
				

			

		

		

			
				
结果展示图： 


所用的素材：   

我的实现原理很简单，就是根据点击事件更换背景图就好了。关键点就是5个背景图变换时相关联的，并不是独立的。。。就是这样

html代码实现：



&lt;div class="setgrade"&gt;  
    &lt;div class="grade"&gt;
        &lt;span id="getgrade"&gt;0.0&lt;/s

			
		

	





	

		

			

				
					
进阶篇之纯css+字体实现五角星（半颗星）评分 (实用）

				
			

			

				

					chelen_jak的专栏
				

				

					08-17
					
					858
					
				

			

		

		

			
				
原文：https://www.cnblogs.com/sxs161028/p/7249966.html


			
		

	





	

		

			

				
					
进阶篇之纯css+字体实现五角星（半颗星）评分

				
			

			

				

					ai09855的博客
				

				

					07-28
					
					303
					
				

			

		

		

			
				
1.前言之前写了一篇实现五角星打分效果的demo。这个demo用来实现打分效果绰绰有余，那么有时候我们在统计评分的时候，就会有半颗星或者1/3颗星星这样的那要如何实现呢？来来来，纯字体+css实现！2.详情1.下载字体webFontIcon我不会把压缩文件上传，会的童鞋可以教教我，感谢赐教，这样我就可以把字体上传以供大家下载了。2.css样式

        .clea...

			
		

	





	

		

			

				
					
JS 如何制作评论下的五角星

				
			

			

				

					qq_59494319的博客
				

				

					06-24
					
					326
					
				

			

		

		

			
				
JS 如何制作评论下的五角星

			
		

	





	

		

			

				
					
java前端实现打星评价_JS实现评价的星星功能

				
			

			

				

					weixin_42490307的博客
				

				

					02-27
					
					630
					
				

			

		

		

			
				
刚开始接触写星星评价时，哇！估计脑子刚被驴踢了，竟然想到了最笨的办法-手工画五角星。妈呀！ css样式都写了好大一串，还沾沾自喜终于画出来了，然后瞅一瞅旁边的妹子写得怎么样了，哇！人家机智的！直接用符号★就解决了！！！唉，智商捉急呀！先上图看看吧：虽然简单，还是有几个注意的地方：1. 未点击时的hover效果，星星会随鼠标移动亮起来喔。2. 点击后关闭hover效果。3. 点击同一颗星星，星星可以...

			
		

	





	

		

			

				
					
css实现简易五角星星级

				
			

			

				

					qq_45429152的博客
				

				

					12-27
					
					971
					
				

			

		

		

			
				
利用css实现简易五角星，评分及展示

			
		

	





	

		

			

				
					
vue五星评分展示效果

					
最新发布

				
			

			

				

					08-15
				

			

		

		

			
				
Vue.js中展示五星评分效果通常通过模板和数据驱动的方式实现。你可以创建一个包含五个星型图标或div元素的数组，并绑定到一个动态值上，比如用户评价的分数。下面是一个简单的示例：  ```html     (star, index) in ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值