微信小程序开发-rem转换rpx小工具

时间：2022-01-09 06:47:20

实现原理：

对样式进行格式化，然后根据 “rem” 进行拆分，这样就会拆分成一个数组 [str1,str2,str3...,str6],

除了最后一个元素，前边的元素都会以 “rem” 样式的数值结尾，

然后在对数组中的元素字符串进行再次根据 “：” 进行拆分，这样就把原rem样式的数字给提取出来了，然后就根据规则转换成rpx的数值，重新组合就好了。

css格式化工具：https://tool.lu/css/

源码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="../layui/jquery-3.2.1.min.js"></script>

        <style>

            div#newCss {

                border: 1px solid #999;

                width: 504px;

                height: 140px;

            }

        </style>

    </head>

    <body>

        <h4>rem样式</h4>

        <textarea id="css" cols="60" rows="10"></textarea>

        <br />

        <input type="button" value="rem转换rpx" onclick="rem2rpx()" />

        <h4>转换后的样式</h4>

        <div id="newCss"></div>

        <input id="aaa">

        <input id="bbb">

        <script type="text/javascript">

            function rem2rpx() {

                var oldCss = document.getElementById("css").value.trim(); //".similar_recommend .title{margin:.3rem 0 0;padding-top:.4rem;color:#666;font-size:.28rem;}"

                //对原样式根据rem进行拆分成数组，这样除了最后一个元素，数组前边的几个元素都是以原rem样式数值结尾

                //拆分后的格式：[".similar_recommend{background:#fff;border-radius:.1", ";height:7.4", ";margin-top:-.3", "}"]

                var newCssArr = oldCss.split("rem")

                var newCss = "" //转换后新的样式变量

                for(var i in newCssArr) {

                    if(i < newCssArr.length - 1) {

                        //非最后一个元素，对字符串按照:再次拆分，把rem样式的数值分离出来进行转换

                        var str = newCssArr[i]

                        var idx = str.lastIndexOf(':')

                        var prevStr = str.substring(0, idx + 1)

                        var nextStr = "" //nextStr格式为    -.3 , -3 , 3 , .3

                        if(str.indexOf('-.') > -1) {

                            //nextStr格式为-.3rem或-3rem

                            nextStr = str.substring(str.indexOf(':-') + 2, str.length)

                            //nextStr格式为.3rem或3rem

                            if(nextStr.indexOf('.') > -1) {

                                nextStr = "0" + nextStr

                            }

                            nextStr = "-" + parseInt(nextStr * 100) + "rpx"

                        } else {

                            nextStr = str.substring(idx + 1, str.length)

                            //处理 nextStr="1px .2"的情况

                            var index = nextStr.indexOf(' ')

                            if(index >= 0) {

                                let str1 = nextStr.substring(0, index)

                                let str2 = nextStr.substring(index + 1, nextStr.length)

                                str2 = str2.indexOf('.') > -1 ? "0" + str2 : str2

                                str2 = parseInt(str2 * 100) + "rpx"

                                nextStr = str1 + ' ' + str2

                            } else {

                                nextStr = nextStr.indexOf('.') > -1 ? "0" + nextStr : nextStr

                                nextStr = parseInt(nextStr * 100) + "rpx"

                            }

                        }

                        //重组数组内的样式字符串

                        newCss += prevStr + "" + nextStr

                    } else {

                        //追加最后一个数组元素

                        newCss += newCssArr[i]

                    }

                }

                document.getElementById("newCss").innerHTML = newCss

            }

            $("#bbb").keydown(function(event) {

                if(event.which == 13) {

                    console.log("ok")

                }

            });

        </script>

    </body>

</html>

相关文章