小程序中,打星星的方法

1、常见的黄白情况

2、存在半个的情况

这种情况下,1代表黄色星星,2代表半个黄色半个白色;0代表白色星星。

代码如下:

function converToStarsArray(stars){
        var array=[];
        //如果为整数0,1,2,3,4,5
        if(stars.toString().length==1){
            var num=stars.toString().substring(0,1);
            for(var i=1;i<=5;i++){
                if(i<=num){
                    array.push(1);
                }else {
                    array.push(0);
                }
            }
        }else{
            //如果是0.5,1.5,2.5,3.5,4.5
            var num=stars.toString().substring(0,1);
            for(var i=1;i<=5;i++){
                if(i<=num){
                    array.push(1);
                }else {
                    array.push(0);
                }
            }
            array[num]=2;
        }
        return array;
    }
    console.log(converToStarsArray(1.5));

3、还可以使用雪碧图的方法;

微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片;base64图片设置步骤如下:

1.在网站http://imgbase64.duoshitong.com/上将图片转成base64格式的文本

2.在WXSS中使用以上文本:

background-image: url("data:image/png;base64,iVBORw0KGgo=...");

3.为了是背景图片自适应宽高,可以做如下设置:

background-repeat:no-repeat; 
background-size:100% 100%;
-moz-background-size:100% 100%;

然后通过不同的calss来控制,这个方法存在问题,就是如果单纯是黄色没问题;

4、通过image在线引用之后,使用left及overflow:hidden的方法,加上class类进行控制,可以实现黄色及白色的情况,但是对于一半黄色,一半白色,就显得那么无能微利了。

建议最好的办法,还是使用第二种方法,在小程序中,这个思路是最佳的方法

本文分享自微信公众号 - 李才哥(liqi13695515224)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-08-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯NEXT学位

程序员为什么要一直写bug ,不能一次性写好吗?

? 知道上面是啥吗 没错 计算机诞生以来的第一个bug —— 一只蛾 知道我为什么今天要把它亮出来吗 原因如下 ? (疯狂作响的微信消息) ↓↓↓ 于是壮...

20120
来自专栏嵌入式大杂烩

【RT-Thread笔记】裸机系统与多线程系统

轮询系统即是在裸机编程的时候,先初始化好相关的硬件,然后让主程序在一个死循环里面不断循环,顺序地做各种事情,大概的伪代码具体如代码清单 1-1所示:

14530
来自专栏晏霖

Spring Cloud Gateway基于CPU使用率实现限流

在项目里利用 cpu 的使用率来做限流其实不是很常用,或者基本不会使用这种方法进行,限流,除非该项目有他特殊 的需要,因为我们不能保证是其他 应用或者服务引起的...

21530
来自专栏晏霖

【Nacos系列第二篇】-Nacos之Spring Boot Discovery

个人比较看好Spring Cloud Alibaba家族。此系列以Nacos为主题,从Spring、Spring boot、Spring Cloud多个方面逐步...

12120
来自专栏腾讯云智慧零售

家乐福全球首家新业态开业,全是腾讯的“秘密武器”!

昨天,家乐福全球首家主打餐饮、生鲜、进口商品、自有品牌的新业态在上海落地。 ? 同时,这也是也是腾讯智慧零售工具最齐全的微信支付智慧零售旗舰店门店:小程序、微...

14530
来自专栏用户4744681的专栏

手机如何将语音转文字?这几种方法真简单,安卓苹果通用

手机上很多输入法都是自带语音转文字的功能的,操作方法也大同小异,所以这里就不详细推荐具体哪种输入法了,只说下具体操作:

62520
来自专栏Fundebug

监控微信小程序中的慢HTTP请求

Fundebug 的微信小程序监控插件在 0.5.0 版本已经支持监控 HTTP 请求错误,在小程序中通过wx.request发起 HTTP 请求,如果请求失败...

13140
来自专栏晏霖

【Nacos系列第一篇】-Nacos之Spring Discovery

个人比较看好Spring Cloud Alibaba家族。此系列以Nacos为主题,从Spring、Spring boot、Spring Cloud多个...

11020
来自专栏Fundebug

在小程序中实现 Mixins 方案

在原生开发小程序的过程中,发现有多个页面都使用了几乎完全一样的逻辑。由于小程序官方并没有提供 Mixins 这种代码复用机制,所以只能采用非常不优雅的复制粘贴的...

8240
来自专栏java技术大本营

java练习本(2019-06-21)

7420

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励