评论 - lizhenqiu blog

#⁹⁵¹

作者：广西南宁市

    function androidInputBugFix(){
        // .container 设置了 overflow 属性, 导致 Android 手机下输入框获取焦点时, 输入法挡住输入框的 bug
        // 相关 issue: https://github.com/weui/weui/issues/15
        // 解决方法:
        // 0. .container 去掉 overflow 属性, 但此 demo 下会引发别的问题
        // 1. 参考 http://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element
        //    Android 手机下, input 或 textarea 元素聚焦时, 主动滚一把
        if (/Android/gi.test(navigator.userAgent)) {
            window.addEventListener('resize', function () {
                if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
                    window.setTimeout(function () {
                        document.activeElement.scrollIntoViewIfNeeded();
                    }, 0);
                }
            })
        }
    }

Run code

Cut to clipboard

文章：WeUI微信小程序前端框架ui简明入门指南发表时间：2017-09-21, 12:52:43

展开↯

#⁹⁵²

作者：广西南宁市

文章：WeUI微信小程序前端框架ui简明入门指南发表时间：2017-09-21, 12:43:37

展开↯

#⁹⁵³

作者：广西南宁市

"不可证伪"即为宗教, 现实中好多人是"永远正确"的,对这些人怎么摆事实讲道理都没用,他们总会找到理由(即使这理由蠢到让人伤心).少看心灵鸡汤,多看科学方法.

文章：张朝阳：中国教育的失败是一直在宣扬答案的「唯一性」发表时间：2017-09-20, 10:57:33

展开↯

#⁹⁵⁴

作者：广西南宁市

我认为还失败在没有广泛地传授哲学、思辨等开启智慧的课程。

文章：张朝阳：中国教育的失败是一直在宣扬答案的「唯一性」发表时间：2017-09-20, 10:57:10

展开↯

#⁹⁵⁵

作者：广西南宁市

张朝阳：聪明人有思维的勇敢性和精确性，而组织起他们，才能创新

文章：张朝阳：中国教育的失败是一直在宣扬答案的「唯一性」发表时间：2017-09-20, 10:54:34

展开↯

#⁹⁵⁶

作者：广西南宁市

作为聪明人的领导者，你首先应该思维上所向披靡，思维在第一线上。要让聪明人组成的团队能明白，你是能够理解他们正在做的事情的。

文章：张朝阳：中国教育的失败是一直在宣扬答案的「唯一性」发表时间：2017-09-20, 10:54:25

展开↯

#⁹⁵⁷

作者：广西南宁市

使用闭包的注意点
1.对捕获的变量只是个引用，不是复制；

function f() {
        var num = 1;

        function g() {
            //函数f()被执行之后，运行到此行，g.Scope =>f.LE;
            alert(num);
        }

        num++;
        g();//当函数g()第一次被执行时，f.LE里num=2；
    }
    f();//弹出2；说明弹出的num是对f.LE里num的引用，而不是复制

Run code

Cut to clipboard

2.父函数每调用一次，都会创建一个新的词法环境，会产生不同的闭包；

function f() {
       var num = 1;
       return function () {
           num++;
           alert(num);
       }
    }
    var result1= f();//f()第一次被调用，创建了一个新的词法环境 result1.Scope => f.LE

    result1();//2
    result1();//3

    var result2 = f();//f()第二次被调用，又创建了一个新的词法环境 result2.Scope => f.LE

    result2();//2
    result2();//3

Run code

Cut to clipboard

3.循环中问题

<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>

Run code

Cut to clipboard

for(var i = 0;i<=3;i++){
    //因为JS中没有块级作用域的概念，所以代码扫描到for循环这里时，
    //i是一个全局变量，并且，i=4；for循环只是给ele循环绑定了点击事件；
    //也就是说，onclick事件没有执行的时候，i的值已经是4了
    var ele = document.getElementById("i");
    ele.onclick = function () {
        alert(i);//所以当点击时，都弹出4
    }
}

Run code

Cut to clipboard

应用闭包

var i;
    for(i =1;i<=3;i++){
        var ele = document.getElementById(i);
        ele.onclick = (function (id) {
            return function () {//return一个函数给onclick事件
                alert(id);//捕获父函数的id的值
            }
        })(i);//循环第一次的时候，i=1，立即调用，产生一个闭包，将i作为参数传入，依次
    }

Run code

Cut to clipboard

文章：简说javascript的this的指向4个运用场景发表时间：2017-09-19, 17:48:12

展开↯

#⁹⁵⁸

作者：广西南宁市

文本内容比较 Notepad++
Notepad++文本比较插件：Compare
下载该“ComparePlugin.dll”文件后，复制到Notepad++安装目录下的\plugins目录即可。

#,广西南宁市,2017-09-19,16:55:13, notePad++ compare插件 64位

#,广西南宁市,2017-09-19,17:06:14, notepad++ FTP插件

文章：电脑中所有html都有DropFileName = "svchost.exe"病毒解决方法发表时间：2017-09-19, 16:48:44

展开↯

#⁹⁵⁹

作者：广西南宁市

文章：weiphp微信多客服系统插件发表时间：2017-09-19, 16:19:06

展开↯

#⁹⁶⁰

作者：北京市

人可以随时转身，但不可以一直后退

#,广西南宁市,2017-09-18,14:59:35, 只要获得安身立命的基础，那就有可能等到巨头犯错的机会。

#,广东省揭阳市,2017-09-19,01:43:48, 佛：随便你说，我已超脱。

#,广西南宁市,2017-09-19,12:19:14, 没有高下之分，只有左右之别

#,广西南宁市,2017-09-19,12:20:42, 永远要向有结果的人学习，因为结果不会撒谎

文章：@意见反馈/技术支持/伊网/安企网发表时间：2017-09-16, 20:40:15

展开↯

#⁹⁶¹

作者：广西南宁市

如果是你php内容不在同一个文件，肯定首先都是要先引入的，要先引入肯定要先知道文件路径这是必不可少的，如果你已经知道文件内容了，而不想引入方式来解决，直接写到一个文件里面不就可以了么？
eval函数可以直接把字符串作为php代码执行，如 eval('$A=1;'); echo $A;输出1；
但是不建议这样用，比较你的需求是已经知道代码内容了，只是不想引入，不想引入写到一个文件就行了，你说文件太多，写到一个里面太乱，太长，那肯定是鱼和熊掌不能兼得的事情。
另外也可以试试文件导入缓存机制，第一次引入文件需要读取io重复读取不用读取io

function includes($file){
     $static $cache = [];
     if(isset($cache[$file])){
         return $cache[$file];
    }else{
        return $cache[$file] = include $file;
    }
}

Run code

Cut to clipboard

文章：ThinkPHP中实现微信支付(jsapi支付)流程发表时间：2017-09-19, 11:54:40

展开↯

#⁹⁶²

作者：广西南宁市

div设置overflow-y:scroll时怎么阻止body页面的滚动？
js body滚动冒泡
js滚动冒泡

对局部需要滚动条的元素，尝试使用这个css属性：
-webkit-overflow-scrolling: touch;

Run code

Cut to clipboard

两种方法，1.设置body：fixed.2.设置body height:100%,设置body的子元素div高度100%，overflow：hidden

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-09-19, 11:51:43

展开↯

#⁹⁶³

作者：广西南宁市

javascript中的this和e.target的深入研究
this 是javascript的一个关键字，当函数运行时在内部自动生成。this是会变化的，在不同的场合，代表的东西就不一样。简单点来说，this指调用这个函数的对象。当你使用this代表的当前html元素，这样你就可以使用这个元素的属性和方法呢。
e.target 中的e是可以自己随意取名的，现在关键讲的是target。简单点说就是触发这个事件的目标元素。它和this的区别就在于this是会变得，而target是不会变得，target的认定了目标就不会发生变化了。this其实就等于e.currentTarget.

#,广西南宁市,2017-09-19,11:37:04,
this和event.target的区别：
js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
.this和event.target都是dom对象

#,广西南宁市,2017-09-19,11:37:38,
　　$(this)是触发执行当前函数块（事件处理函数）最内层（距离最近的）的jQuery对象，在你的代码中就是触发了mouseover事件的对象。
　　function(e)中的参数e是事件对象，根据事件的不同，具有对应的子属性，比如键盘事件和鼠标事件等，你的代码中对应的是鼠标事件。

#,广西南宁市,2017-09-19,11:40:47, .click(function(event) 中的event ，是什么意思？

$('#video_popup .close').click(function(event) {
event.preventDefault();
$('#video_popup').hide();
});

Run code

Cut to clipboard

请各位大哥详细分析？
click(function(event) 中的event是事件对象的意思，event这里因为是单击，就是mouseEvent(鼠标事件)。
event.preventDefault();这是阻止默认事件，比如在浏览器中点击右键，会弹出一个菜单，加了这句之后就不会弹出这个菜单了，还有单击链接，会跳到相应的地址，加了这句就不会跳转了，这句等效于return false。

#,广西南宁市,2017-09-19,11:42:49,

input.onclick = function (evt) { //接受 event 对象，名称不一定非要 event  
    alert(evt); //MouseEvent，鼠标事件对象 IE不支持   但是IE中，不支持直接接收，而是通过window.event来接收。
};

Run code

Cut to clipboard

文章：简说javascript的this的指向4个运用场景发表时间：2017-09-19, 11:36:39

展开↯

#⁹⁶⁴

作者：广西南宁市

三栏布局的实现方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Three Column Layout</title>
    <style>
    .left, .right{
        width: 100px;
        height: 100px;
        background-color: #B48649;
    }
    .main{
        height: 100px;
        background-color: #1D95A5;
    }

    .selfFloat .left{
        float: left;
    }
    .selfFloat .right{
        float: right;
    }
    .selfFloat .main{
        margin: 0 100px;
    }
    .absolutePosition {
        position: relative;
    }
    .absolutePosition .left{
        position: absolute;
        top: 0;
        left: 0;
    }
    .absolutePosition .right{
        position: absolute;
        top: 0;
        right: 0;
    }
    .absolutePosition .main{
        margin: 0 100px;
    }
    .marginColumn .main{
        width:100%;
        float: left;
    }
    .marginColumn .main .content{
        margin: 0 100px;
    }
    .marginColumn .left{
        margin-left: -100%;
        float: left;
    }
    .marginColumn .right{
        margin-left: -100px;
        float: left;
    }
    .flexContent{
        display: flex;
    }
    .flexContent .main{
        flex:1;
    }
    </style>
</head>
<body>
    <p>自身浮动</p>
    <div class="selfFloat">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
    <p>绝对定位</p>
    <div class="absolutePosition">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
    <p>margin负值法</p>
    <div class="marginColumn">
        <div class="main">
            <div class="content"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <p>flex</p>
    <div class="flexContent">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
</html>

Run code

Cut to clipboard

文章：CSS布局居中方法发表时间：2017-09-19, 11:35:25

展开↯

#⁹⁶⁵

作者：广西南宁市

文章：Weiphp微官网框架修改使用说明发表时间：2017-09-19, 11:33:38

展开↯

#⁹⁶⁶

作者：广西南宁市

DOM操作相关事件和方法

1. 获取元素方法

        1.根据 id
                var element = document.getElementById("idName");

        2.根据 标签名
                var elements = document.getElementsByTagName("标签名");

        3.根据 类名
                var elements = document.getElementsByClassName("类名");

        4.H5新增 获取方法
                document.queryselector("");
                document.queryselectorAll("");

        5.获取 body 元素
                document.body

2. 事件

        1.点击事件(双击事件ondblclick)
                ele.onclick = function(){};

        2.鼠标事件
                1.鼠标悬浮(经过) ele.onmouseover = function(){};

                2.鼠标离开 ele.onmouseout = function(){};

        onmouseenter和onmouseleave是DOM2的方法, 有兼容问题

        onmouseover  鼠标经过盒子的时候执行1次

        onmousemove  鼠标只要移动的时候就会执行
                
                3.鼠标按下 ele.onmousedown = function(){};

                4.鼠标弹起 ele.onmouseup = function(){};
                
                5.鼠标滚动 ele.onmousewheel = function(){};

        3.焦点事件
                1.失去焦点 ele.onblur = function(){};

                2.获得焦点 ele.onfocus = function(){};

                3.输入事件 ele.oninput = function(){};
        
                onkeyup和oninput  联想搜索

                4.内容发生改变 ele.onchange = function(){};
                
                一般做验证或者下拉框选择会使用onchange

        4.键盘事件

                1.键盘键入 ele.onkeydown = function(){};

                2.键盘弹起 ele.onkeyup = function(){};

                3.键盘按下 ele.onleypress = function(){};

                onkeydown优先于onkeypress执行

                onkeypress不识别系统按键

                onkeypress区分大小写

        5.window 事件

                1.键盘事件 event.keyCode
                键盘对应的编码

                2.页面滚动 window.onscroll = function(){};
        
                window.scroll必须有滚动条才触发, 一般配合$(window).scrollTop()

                window.onmousewheel / document.onmousewheel无论有没有滚动条都能触发
        
                3.窗口大小变化 window.onresize = function(){};

3. 字符串 相关方法

        1.replace() 字符串替换

                xxx = xxx.replace(searchValue, replaceValue);

                只找第一个匹配的替换

        2.indexOf() --- lastIndexOf() 搜索(找到 对应的 返回位置) 
                一个参数从第一个找
                两个参数从指定的位置找
                不存在返回 -1, 查找的是""返回 0

        3.trim() 删除左右空格 

        4.split("") 字符串 转换成 数组  引号里确定用什么分割

        5.charAt() 获取指定位置处字符

        6.slice()  从start位置开始，截取到end位置，end取不到

        7.substring() 从start位置开始，截取到end位置，end取不到

        8.substr()    从start位置开始，截取length个字符

        9.toUpperCase()  str转换为大写

        10.toLowerCase()  str转换为小写

4.数组 相关方法

        1.join("") 数组 转换成 字符串 引号里确定用什么拼接(默认逗号) 

        2.toString() 数组 转换为 字符串 (去掉[])

        3.valueOf() 返回数组对象本身

        4.Array.isArray(xxx) 检测xxx是否是数组

        5.xxx instanceOf Array 检测xxx是否是数组

        6.push() pop()  从后边增删

        7.unshift() shift() 从前边增删

        8.reverse() 翻转数组

        9.slice() 从数组中截取一部分内容

        10.splice() 从数组中删除或替换数组中的一部分
        
        11. xxx.indexOf()  寻找指定元素在数组中的位置,如果没找到返回-1 

        12. xxx.lastIndexOf()  从后面找

        13.xxx.filter(function(){ }) 迭代过滤/筛选

        14.xxx.forEach(function(){ }) 遍历

        15.xxx.map(function(){ }) 映射

        16.xxx.some(function(){ }) 数组中至少有一个数据符合要求

        17.xxx.every(function(){ }) 数组中所有数据符合要求

        18.concat() 把一个数组和另一个数组拼接在一起

        19.sort() 进行冒泡排序 b-a倒序 a-b升序

Run code

Cut to clipboard

文章：简说javascript的this的指向4个运用场景发表时间：2017-09-19, 11:31:24

展开↯

#⁹⁶⁷

作者：广西南宁市

chrome table + svg，刷新一闪一闪的
解决方法，给svg高度和字体大小一致

<style>	
	embed{font-size: 25px;height: 25px;}
</style>

Run code

Cut to clipboard

#,广西南宁市,2017-09-19,10:21:00,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>

    table{
        height: 50px;
        background: #000;
        color: white;
        font-size: 25px;
    }
</style><style>	
	embed{font-size: 25px;height: 25px;line-height:25px;}
</style>
<body>

    <table width="100%">
        <tr>
            <th>
                <embed src="http://23.105.205.22/search.svg" type="image/svg+xml" />
            </th>
        </tr>
    </table>


</body>
</html>

Run code

Cut to clipboard

文章：常用html、demo代码发表时间：2017-09-19, 10:18:35

展开↯

#⁹⁶⁸

作者：广西南宁市

不需要图片，纯css创建三角形

<html>
<head>
      <title></title>
      <meta name="" content="">
      <style style="text/javascript">
               .content{
                    width:0px;
                    height:0px;
		            border-left:10px solid transparent;
		            border-top:10px solid transparent;
		            border-bottom:10px solid transparent;
		            border-right:10px solid #151313;
               }
      </style>
</head>
<body>
             <div class="content">
             </div>
</body>
</html>

Run code

Cut to clipboard

其实原理很简单，首先，border边框是以矩形无缝拼接的,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
      <title></title>
      <meta name="" content="">
      <style style="text/javascript">
               .content{
                    width:10px;
                    height:10px;
					border-left:50px solid #432a23;
					border-top:50px solid #38a578;
					border-bottom:50px solid #38c7c7;
					border-right:50px solid #151313;
               }
      </style>
</head>
<body>
             <div class="content">
             </div>
</body>
</html>

Run code

Cut to clipboard

这样，当div的面积越来越小到为零的时候，梯形的上底也接近于零，也就变成了三角形了，这个时候，再用border的transparent属性将不想要的边框设为透明，即可获得你想要的方向的三角形啦！

文章：CSS小三角形和阴影效果发表时间：2017-09-18, 17:28:25

展开↯

#⁹⁶⁹

作者：广西南宁市

jq版，鼠标拖拽

<!DOCTYPE html>
<html onselectstart="return false">
<head lang="en" >
    <meta charset="UTF-8">
    <title></title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        #main{
            width: 300px;
            height: 300px;
            left: 50%;
            top: 50%;
            position: absolute;
            background: antiquewhite;
        }
        #main-top{
            width: 300px;
            height: 50px;
            background: #c7cecd;
            cursor: move;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="main-top">拖拽我</div>
        <div id="main-bottom"></div>
    </div>

    <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
    <script>
        $(function(){
            var main=$("#main");
            var box=$('#main-top');
            var offx=0;
            var offy=0;
            var mainw=main.width();
            var mainh=main.height();
            //鼠标按下
            box.mousedown(function(ev){
                var ev=ev||window.event;
                //算出点击内容  里面的位置
                offx=ev.pageX-main.offset().left;
                offy=ev.pageY-main.offset().top;

                //按下过程中
                $(document).bind("mousemove",function(ev){
                    var ev=ev||window.event;
                    //isdraging=true;
                    //当前鼠标的位置
                    var mousex= ev.pageX;
                    var mousey= ev.pageY;

                    //    动态算出盒子距离屏幕边缘的距离
                    var xinx=mousex-offx;
                    var xiny=mousey-offy;

                    //可视区宽高
                    var pagewidth=document.documentElement.clientWidth;
                    var pageheight=document.documentElement.clientHeight;

                    //算出盒子边缘距离屏幕的距离
                    var maxx=pagewidth-mainw;
                    var maxy=pageheight-mainh;

                    //xinx>0   并且 xinx<（页面最大宽度 - 浮层的宽度）
                    //xiny>0   并且 xiny<(页面最大宽度 -浮层的高度)
                    xinx=Math.min(maxx,Math.max(0,xinx));
                    xiny=Math.min(maxy,Math.max(0,xiny));

                    //    盒子的偏移量
                    main.css({left:xinx+"px"})
                    main.css({top:xiny+"px"})
                })
            })
            //抬起
            $(document).mouseup(function(){
                $(this).unbind('mousemove');
            })
        })
    </script>
</body>
</html>

Run code

Cut to clipboard

文章：纯生JS图片拖拽发表时间：2017-09-18, 17:26:30

展开↯

Records:2802 51/148 «‹47 48 49 50 51 52 53 54 55 ›»