打卡拼图算法

2022-03-25 0 960

假设需要打卡的总天数为X

当 1≤X<2²时,每行默认显示1个

当2²≤X<3²时,每行默认显示2个

当3²≤X<4²时,每行默认显示3个

……

当9²≤X<10²时,每行默认显示9个

计算规则:用需要计算的数除以每行的个数,计算结果如果为整数的话,那么计算就一步完成了。计算结果如果不为整数,那么将结果向下取整,得到所需行数,每一行显示的数量需根据原始数据除以总行数来判断,原始数据除以总行数如果不为整数,那么第一行就显示默认数量,计算第二行的显示数量时,用当前剩余数量除以剩余行数,如果结果不为整数的话就还是显示默认数量,以此类推,直到余数除以剩余行数的结果为整数为止。

举例:需要打卡的天数为21天,根据最上面的规则,可以知道数字为21天时,每行默认显示4个。下面计算所需行数。21/4=5.25,不为整数,那么就将5.25向下取整,得到所需行数为5. 接下来计算每行展示的方块数量:

第一行:21/5=4.2,不为整,所以第一行显示4个

第二行:(21-4)/(5-1)=4.25,不为整,所以第二行显示4个

第三行:(21-4-4)/(5-1-1)=4.33,不为整,所以第三行显示4个

第四行:(21-4-4-4)/(5-1-1-1)=4.5,不为整,所以第四行显示4个

第五行:(21-4-4-4-4)/(5-1-1-1-1)=5,最后一行显示5个

假如需要打卡的天数为29天,那就是每行默认显示5个,29/5=5.8,不为整数,将5.8向下取整得到所需行数为5. 接下来计算每行展示的方块数量:

第一行:29/5=5.8,不为整,所以第一行显示5个

第二行:(29-5)/(5-1)=6,为整,所以剩下4行每行显示6个

/**
     * 页面的初始数据
     */
    data: {
        height: 0,
        complete: false, //是否打卡完成
        times: 21, //总共打卡天数
        list: [],
        clock: 5, //打卡第几天
        is_show_complete:0,
    },
//这里页的需要优化
defaultColumn: function(){
        let times = this.data.times
        var column = 1
        if (1 <= times && times < Math.pow(2,2)) {
            column = 1
        } else if (Math.pow(2,2) <= times && times < Math.pow(3,2)) {
            column = 2
        } else if (Math.pow(3,2) <= times && times < Math.pow(4,2)) {
            column = 3
        } else if (Math.pow(4,2) <= times && times < Math.pow(5,2)) {
            column = 4
        } else if (Math.pow(5,2) <= times && times < Math.pow(6,2)) {
            column = 5
        } else if (Math.pow(6,2) <= times && times < Math.pow(7,2)) {
            column = 6
        } else if (Math.pow(7,2) <= times && times < Math.pow(8,2)) {
            column = 7
        } else if (Math.pow(8,2) <= times && times < Math.pow(9,2)) {
            column = 8
        } else if (Math.pow(9,2) <= times && times < Math.pow(10,2)) {
            column = 9
        } else {
            column = 10
        }
        return column;
    },
    getColumn: function(total, totalRow, column, row, ids){
        let rowColumn = Math.floor(total / (totalRow - row))
        if (rowColumn * column === total) {
            for (let i = 0; i < rowColumn; i++) {
                ids += rowColumn+","
            }
            return ids
        } else {
            const nTotal = total - rowColumn;
            ids += rowColumn+","
            if (nTotal > 0) {
                ids = this.getColumn(nTotal, totalRow, column, row + 1, ids)
                return ids
            } else {
                return ids
            }
        }
    },
    calculate: function(){
        let times = this.data.times;
        var list = []
        if (times > 0) {
            let column = this.defaultColumn();
            let totalRow = Math.floor(times / column)
            let ids = this.getColumn(times, totalRow, column, 0, "");
            let tmp = ids.split(",");
            var h = 100
            if (tmp.length > 1) {
                h = (100 / (tmp.length - 1)).toFixed(2)
            }
            let total = 0;
            let clock = this.data.clock
            for (var i = 0; i < tmp.length; i++) {
                if (tmp[i] != "") {
                    list[i] = {}
                    list[i]['height'] = h
                    list[i]['row'] = []
                    let w = (100 / tmp[i]).toFixed(2)
                    for (var j = 0; j < tmp[i]; j++) {
                        total += 1
                        list[i]['row'][j] = {
                            width: w,
                            is_complete: total <= clock ? 1 : 0,
                            next: total == clock+1 ? 1 : 0
                        }
                    }
                }
            }
            console.log(list)
        }
        this.setData({
            list: list
        })
    }

 

收藏 (0) 打赏

感谢您的支持,我们会继续努力的!

打开支付宝/微信/QQ扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (1)

1. 本站所有教学内容和资源均来源于本站原创和网络收集以及用户自主上传,如有侵权请带证联系本站客服进行处理!邮箱:team@lcwl.fun
2. 对于非本站原创的资源不保证所提供下载资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系本站客服处理,有奖励!
3. 除本站原创教学或资源外其余资源您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 本站原创资源如需商用还请申请商业授权,否则本站有权追究其法律责任!
5. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有学币奖励额外收入!

凌晨资源网 互联网技术 打卡拼图算法 https://www.lingchenw.cn/1442.html

常见问题
  • 本站所有付费教程均可单独付费或者开会员学习,自己购买或者开了会员就可以学习,来凌晨学院报名学习送会员,并且有讲师一对一辅导培训教学,师生互动化,定期布置作业等
查看详情
  • 本站所有资源版权均属于原作者所有,资源中标注可商用的可以商用的代表是本团队自主研发公布可商用的产品,未标注可商用所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

学习手机编程软件开发
手机编程软件开发

你知道吗?用手机也能开发制作软件,满足自己的编程心,做属于自己的软件

报名学习
自媒体短视频
副业做自媒体短视频

想做自媒体短视频剪辑给自己多一份副业,只需一部手机你也可以

报名学习
搭建网站必备云互联主机
链未云互联

搭建网站,后台云服务等必备云服务器互联主机,IDC云主机

现在使用
Fa快捷助手
用手点一点就能开发做软件

不用记编程语法,不用一行一行手敲代码,用手点一点就能开发制作软件

点击下载