rem【金沙官网线上】 js相关

!function(n){
    var  e=n.document,
         t=e.documentElement,
         i=720,
         d=i/100,
         o="orientationchange"in n?"orientationchange":"resize",
         a=function(){
             var n=t.clientWidth||320;n>720&&(n=720);
             t.style.fontSize=n/d+"px"
         };
         e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

刚写过一篇《20多行js代码写一个最简单的3x3拼图游戏》,受zswang的启发下改进了代码,现在做了一个任意M行N列(M,N大于等于2)的拼图,js代码30多行。

规则就是,调用函数,放两个参数,第一个参数,是设计稿的宽度,第二个参数是px与rem的转换比例,通常会写100(因为好算);当然了,要把这段js代码最好封装在一个单独的js文件里,并且放在所有的css文件引入之前加载。

先上图:

其中 var n=t.clientWidth||320;n>720&&(n=720);

 

的意思是:如果clientWidth的值获取不到,n就等于320,如果n>720成立就会执行n=720的操作

玩法:方向键,不用解释了。

M && N中,若M为假,则N不被执行;

直接体验就轻轻点击这里。

M||N中,若M为真,则N不被执行。

保证拼图有解的方法主要有2种:

上面这段js手机上在有表单的时候,在输入法弹出的时候会失灵

1.从结局开始移动若干次,浅显易懂,但是空格不在末尾了,如果要把空格移回末尾,还要多两个循环;

代码一

2.用算法检测随机开局是否有解,如果无解则调整为有解或重新开局。

(function(win) {
                            if(!win.addEventListener) return;
                            var html = document.documentElement;

                            function setFont() {
                                function setRem() {
                                    var cliWidth = html.clientWidth;
                                    var w = document.documentElement.clientWidth,
                                        h = document.documentElement.clientHeight;
                                    var val = 640;

                                    if(w >=640){
                                        cliWidth = 640;
                                    }
            //                        if(w > h) {
            //                            //横屏
            //                            val = 1334;
            //                        }
                                    html.style.fontSize = 100 * (cliWidth / val) + 'px';
                                }
                                setRem();
                                setTimeout(function() {
                                    setRem();
                                }, 300);

                            }
                            win.addEventListener('resize', setFont, false);
                            setFont();
                        })(window);

本篇采用了方法2,使用的算法叫做“逆序和”,保证有解、且空格在末尾。

金沙官网线上, 

 

本文由金沙官网线上发布于Web前端,转载请注明出处:rem【金沙官网线上】 js相关

您可能还会对下面的文章感兴趣: