平时记录汇总

遇到的问题记录

本地hosts地址路径:C:\Windows\System32\drivers\etc

破解千图网、昵图网、我图网免费下载账号密码地址

{

账号：2016061688998295
密码：1070
使用该卡密登录我们的网站自助下载
网站地址：http://o.enow.cn
视频教程：http://a019.enow.cn
【注意本账号非官网账号，不能直接登录昵图官网】
【需要登录我们平台使用，不懂请看视频教程】
所有昵图网共享分都是永久有效用完为止。已经开通了千图网和我图网的VIP下载权限，使用方法跟昵图网     一样。下载千图网的素材不会扣分，扣分仅针对昵图网素材。

昵图网：http://www.nipic.com/show/14308706.html
千图网：http://www.58pic.com/fuzhuang/15437823.html
我图网：http://www.ooopic.com/pic_12768984.html

}

微信端海报大小：640*1138

1-html排版解决inline-block出现的缝隙

html 常识问题

---html 排版不使用float，使用inline-block将块状标签属性(div/li/img....)转换为行内标签属性

正文

排版不使用float，使用inline-block将块状标签属性(div/li/img....)转换为行内标签属性需要做的前提工作如下：
1.父级元素应设置：font-size：0 ——————————>去除元素之间的间隙
2.自己元素应设置：display：inline-block；并且为了对齐美观，还应设置：vertical-align: top;

代码如下：
  
  

      
标题

      
标题

      
标题

      
标题

      
标题

      
标题

  

2-核心浏览器强制模式

{
强制IE从高优先

强制360切换极速模式

}

3-js 函数回调

{
function writeCode(callback){
//执行的事件
callback();
}
function intrduceBugs(){
//引入的漏洞
}
writeCode(intrduceBugs)
}

4-判断IE浏览器

//判断是IE浏览器
方法一：

        function isIE() { //ie?
                var ie = !!window.ActiveXObject || "ActiveXObject" in window;
                if (ie)  
                     return true;  
                else{
                    return false;  
                 }  
             }  
        alert(isIE())

// 判断IE9浏览器
if(navigator.appName =="MicrosoftInternetExplorer"&&parseInt(navigator.appVersion.split(";")[1].replace(/[ ]/g, "").replace("MSIE",""))<9){

alert("您的浏览器版本过低，请下载IE9及以上版本");

}  

方法二：

 var isIE = !-[1,];    var notIE = -[1,]; 
    if(isIE){
        alert('我是IE但是弹窗但是我弹不出来')
    }else{
        alert('我不是IE浏览器')
    }

5-匿名函数&&编译后的函数声明

匿名函数{

这种函数方式编译后变量声明there会“被提前”了，但是他的赋值（也就是return 'there'）并不会被提前
var there=function(){
    return 'there'
}
alert(there())      //alert 'here'
var there = function(){
    return 'here'
}                           

        ||
        ||
        
var there; //声明前置
there=function(){
    return 'there'
}
alert(there());   //alert 'here'
there = function(){  
    return 'here'
}

}

编译后的函数声明{

这种函数方式编译后函数声明和他的赋值都会被提前
function there(){
    return 'there'
}
alert(there())      //alert 'here'
function there(){
    return 'here'
}                   //第二个函数覆盖第一个函数


        ||
        ||
        
function there(){
    return 'there'
}
function there(){
    return 'here'
}   
alert(there())   //alert 'here'
//申明前置了，但因为这里的申明和赋值在一起，所以一起前置

}

6-利用循环获取js对象中的属性与值

  var dom ={
    name:'111',
    age:'22',
    year:'1111'
  }
  for(var key in dom){
    console.log(key+dom[key])   //key--->对象属性  dem[key]--->对象属性的值
  }

7-闭包函数实现未知情况下调用需要的对象

function apendFunction(js,java){
  js.getsjava=function(){
    return java;
  }

}

var js={
    name:'js-jsjsjsjjs',
    count:'这是个js'
};
var java={
    name:'java-javajavajava',
    count:'这是个java'
};
var javaEE={
    name:'javaEE-javaEEjavaEEjavaEE',
    count:'这是个javaEE'
}
apendFunction(js,java);
console.log(js.getsjava().count);
// 变更javaEE
apendFunction(js,javaEE);
console.log(js.getsjava().name);

8.这两个闭包函数等价

var module = function(){
    var content = 0;
    var m1 = (function(){
      alert('m1')
    })()
    var m2 = (function(){
      alert('m2')
    })()
  }
  console.log(module())
        ||
        ||
  var module = (function(){
    var content = 0;
    var m1 = function(){
      alert('m1')
    }
    var m2 = function(){
      alert('m2')
    }
    return{
      m1:m1,
      m2:m2
    }       //注意这里return了一个对象 m1(name)：m1(匿名函数m1)，m2(name)：m2(匿名函数m2)
  })()
  console.log(module.m1())  //这里的module是一个直接运行函数的名字。所以后面无需调用()，里面的匿名函数m1，m2是匿名函数，只有调用了才能执行。所以后面需跟上m1()||m2(). 一定要明白【module.m1()】调用的意义

9.匿名函数 || 编译后的函数声明

两者又分为：自执行函数 || 立即执行函数

1：匿名函数

var foo = function(){
    alert('我是匿名函数')
}();
上方时自执行函数，如要调用执行foo(),就ok！

2：编译后的函数声明

function foo(){
    alert('我是编译后的函数声明')
}
调用 foo()即可执行。
变为立即执行函数：
    (function foo(){
        alert('我是[立即执行]编译后的函数')
      }())

闭包函数

1.滕工的闭包例子：经典

function apendFunction(js,java){
      js.getsjava=function(){
        return java;   //实现读取javaEE
      }
  }
  var js={
    name:'js-jsjsjsjjs',
    count:'这是个js'
  };
  var java={
    name:'java-javajavajava',
    count:'这是个java'
  };
  var javaEE={
    name:'javaEE-javaEEjavaEEjavaEE',
    count:'这是个javaEE'
  }
  apendFunction(js,java);
  console.log(js.getsjava().count);
  // 变更javaEE
  apendFunction(js,javaEE);
  console.log(js.getsjava().name);
  /*
    ----  从java对象中访问javaEE对象  ----
          apendFunction(js,javaEE);
        console.log(js.getsjava().name);
  */

2.自己改版

function appendjs(js,java,java2){
    // 1 js对象调用java对象
    js.getjava=function(){
      return java
    };
    // 2.java对象调用js对象
    java.getjs=function(){
      return js
    };
    // 3.js对象调用java2对象
    js.getjava2=function(){
      return java2
    }
    //4.java2对象调用js对象
    java2.getjs=function(){
      return js
    }
    //5.java对象调用java2对象
    java.getjava2=function(){
      return java2
    }
    //6.java2对象调用java对象
    java2.getjava=function(){
      return java
    }
  }
  var js ={
    name:'Javascript',
    age:23
  }
  var java={
    name:'Java',
    age:23
  }
  var java2 ={
    name:'Java2E',
    age:23
  }
  appendjs(js,java,java2);
  console.log("1.js对象调用java对象"+js.getjava().name);
  console.log("2.java对象调用js对象"+java.getjs().name);
  console.log("3.js对象调用java2对象"+js.getjava2().name);
  console.log("4.java2对象调用js对象"+java2.getjs().name);
  console.log("5.java对象调用java2对象"+java.getjava2().name);
  console.log("6.java2对象调用java对象"+java2.getjava().name);
  console.log('
在闭包环境中实现对象之间的相互调用
');

3.闭包形式总结：

一：

var module = (function(){
    var content = 0;
    var m1=function(){
      alert('(m1)')
    }
    var m2=function(){
      alert('(m2)')
    }
    return {
      m1:m1,
      m2:m2
    }
  })()
  console.log('闭包函数'+module.m1());
               ||                         ---->等价
  var module = function(){
    var content = 0;
    var m1 = (function(){
      alert('m1')
    })()
    var m2 = (function(){
      alert('m2')
    })()
  }
  console.log(module())

二：模块儿总结包含闭包

什么是模块儿？
   ：只要把不同的函数（以及记录状态变量）简单的放在一起，就算是一个模块儿

<1>原始写法

 function m1(){
    console.log('m1')
  }
  function m2(){
    console.log('m2')
  } 

//需要时直接调用就OK。But这种写法污染了全局变量，容易造成冲突

<2>对象写法
为了解决以上缺点，将模块儿写在一个对象里面。所有模块儿成员都放在一个对象里面

var module = {
    _v:0,
    m1:function(){
      console.log('m1')
    },
    m2:function(){
      console.log('m2')
    }
  }
  module.m1();
  //上面的函数m1()和m2()，都封装在module1对象里。使用的时候，就是调用这个对象的属性。
  //但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值。



/*写法一：构造函数模式
      function Module1(){
          this.count=0;
          this.m1=function(){
              //...
          };
          this.m2=function(){
              //...
          };
      };
  写法二：工厂模式
      var module1 = function(){
          var obj=new Object();
          obj.count=0;
          obj.m1=function(){
              //...
          };
          obj.m2=function(){
              //...
          };
          return obj;
      };
  写法三:单列模式
      var module1 = {
          count: 0,
          m1: function () {
              //...
          },
          m2: function () {
              //...
          }
      };
  */

<3>立即执行函数

var module =(function(){
    var v_ = 0;
    var m1 = function(){
      console.log('m1')
    }
    var m2 = function(){
      console.log('m2')
    }
    return{
      m1:m1,
      m2:m2
    }
  })()
  module.m1() && module.m2()

// 使用这种写法外部外部代码无法读取内部的 v_0 变量

<4>放大模式
//如果一个模块儿很大，必须分成几部分，或者一个模块儿需要继承另外一个模块儿，这是就有必要使用“放大模式”

  var module1 = (function (mod) {
      mod.m3 = function () {
          //...
      };
      return mod;
  })(module1);

<5>宽放大模式 或叫 松耦合扩展

  var module1 = (function(mod){
      mod.m3 = function () {
          //...
      };
      return mod;
  })(window.module1||{})

<6>紧耦合扩展：可以覆盖原模块儿，实现重载功能

  var module1 = (function (mod) {
      mod.oldm3 = mod.m3;//保留原模块儿
      mod.m3 = function () {
          //...
      };
      return mod;
  })(module1);

例子（闭包函数之间的相互调用）

<1>闭包函数调用

    var 
        modd={
            a:'10',
            abc:function(){
                var aa='10';
                alert('I am modd');
            }
        },
        mod_={
            abc:function(){
                alert('I am mod_,is not modd!')
            }
        }
    ;
    var module1 = (function (modd){
    　　modd.m3 = function () {
    　　　　console.log('出来吧:宽放大模式A')
    　　};
        return modd.m3(); //modd.m3函数被读取到了
        alert(modd.a)//读取到对象modd下的a变量
        return modd.abc();//读取到对象modd下的abc函数
    })(modd);

<2>闭包函数调用

 var name='the windwos'
  var object={
    name:'hello',
    getNameFunc:function(){
      return function(){
        return this.name;
      };
    }
  }
alert(object.getNameFunc()())

总结什么是闭包？什么是模块儿？

闭包{

作用域：js变量分为局部变量与全局变量，js能够函数内部分支都能够读取最外部（顶层）的变量声明，但是顶层直接读取是读取不到分支内部函数的变量与结果，需要用到闭包知识的返回值才能拿得到。
函数：闭包就是能够读取其他函数内部变量的函数||定义在一个函数内部的函数

}

模块儿{

模块儿就是实现特定功能的一组方法。只要把不同的函数（以及记录状态的变量）放在一起就是一个简单的模块儿。
《Javascript模块化编程》理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。

}

3.闭包的优点与缺点：

优点:"设置私有的方法和变量，保护函数内的变量安全"。
缺点："闭包有一个很严重的问题，就是内存浪费问题。这个内存浪费不仅因为它常驻内存，而且如果处置不当，会造成无效内存的产生"。

原生js--（for循环&&for in遍历）

// 原生js获取josn对象的属性与value
      var dom ={
        name:'111',
        age:'22',
        year:'1111'
      }
      for(var key in dom){
        console.log(key+dom[key])
      }
    
//原生js--for遍历实现点击当前div显示当前div的序列
    

      
000000000000000000
          

      
111111111111111111
      

      
222222222222222222
    
    var dom=document.getElementsByTagName("p");
    for(var i=0;i

css

上下一直晃动

.sideBar-animate{
    -webkit-animation: two-up-down .8s ease infinite 80ms alternate;
    animation: two-up-down .8s ease infinite 80ms alternate;
}
@keyframes two-up-down{from{-webkit-transform:translate(0,80px);transform:translate(0,80px)}to{-webkit-transform:translate(0,-8px);transform:translate(0,-8px)}}

左右一直晃动

.activity-con{
    animation: atycon 3s infinite;
    -moz-animation: atycon 3s infinite;
    -webkit-animation: atycon 3s infinite;
    -o-animation: atycon 3s infinite;
}
@keyframes atycon {             //时间针定义
    0% {
        margin-left: -516px
    }
    50% {
        margin-left: -486px
    }
    100% {
        margin-left: -516px
    }
}

10.原生js向div之前追加div

 oDiv.insertBefore(divv,oDiv.childNodes[0])
原生js在class为wrap的内部h4标签之前追加了一个div，[divv是追加的div],{oDiv是追加div的容器}.{childNodes[0]}是追加的位置

11、原生js获取窗口滚动条的高度

var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
    scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
    scrollTop = document.body.scrollTop;
}

12、ready 和 onload 的区别

dom.ready：是在dom加载完成后就可以直接对dom进行操作。比如一张图片只要标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等

dom.load:在整个document文档（包括了加载图片等其他信息）加载完成后就可以直接对dom进行操作。比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等

13、localStorage的使用方法

我首先在开发者工具的Console中，输入了

localStorage.

然后就弹出了一些列宿主（浏览器）提供的localStorage自带的方法，摘录了一些常用的API如下表所示：

名称                  作用
clear           清空localStorage上存储的数据
getItem         读取数据
hasOwnProperty  检查localStorage上是否保存了变量x，需要传入x
key             读取第i个数据的名字或称为键值(从0开始计数)
length          localStorage存储变量的个数
propertyIsEnumerable    用来检测属性是否属于某个对象的
removeItem      删除某个具体变量
setItem         存储数据
toLocaleString  将（数组）转为本地字符串
valueOf         获取所有存储的数据

清空localStorage

localStorage.clear()    // undefined    
localStorage            // Storage {length: 0}

存储数据

localStorage.setItem("name","caibin") //存储名字为name值为caibin的变量
localStorage.name = "caibin"; // 等价于上面的命令
localStorage // Storage {name: "caibin", length: 1}

读取数据

localStorage.getItem("name") //caibin,读取保存在localStorage对象里名为name的变量的值
localStorage.name // "caibin"
localStorage.valueOf() //读取存储在localStorage上的所有数据
localStorage.key(0) // 读取第一条数据的变量名(键值)
//遍历并输出localStorage里存储的名字和值
for(var i=0; i

删除某个变量

localStorage.removeItem("name"); //undefined
localStorage // Storage {length: 0} 可以看到之前保存的name变量已经从localStorage里删除了

检查localStorage里是否保存某个变量

// 这些数据都是测试的，是在我当下环境里的，只是demo哦～
localStorage.hasOwnProperty('name') // true
localStorage.hasOwnProperty('sex')  // false

将数组转为本地字符串

var arr = ['aa','bb','cc']; // ["aa","bb","cc"]
localStorage.arr = arr //["aa","bb","cc"]
localStorage.arr.toLocaleString(); // "aa,bb,cc"
将JSON存储到localStorage里

var students = {
xiaomin: {
    name: "xiaoming",
    grade: 1
},
teemo: {
    name: "teemo",
    grade: 3
}

}

students = JSON.stringify(students);  //将JSON转为字符串存到变量里
console.log(students);
localStorage.setItem("students",students);//将变量存到localStorage里
var newStudents = localStorage.getItem("students");
newStudents = JSON.parse(students); //转为JSON
console.log(newStudents); // 打印出原先对象

切记 jquery 向上翻滚无缝滚动

// 最简单循环热点推送向上显示

textShow:function(){
    var textBox = $('.y-n-textBox');//父级元素
    function scroll(){
        textBox.find('p:frist').animate({   //找到第一个子元素设置marginTop负值
            'margin-top':'-.6rem'
        },
        1000,
        function(){//切记这个函数还是在animate对象里面，将当前第一个子元素appenTo最后位置，实现循环
            $(this).css('margin-top':'0rem');
            $(this).appendTo(textBox)
        }
        )
    }
    var time = setInterval(scroll,2000);
}

css3 内联元素float之后

内联元素{a,b,span....}float之后就变成了块儿级元素。

怎样清除float呢？sui是这样处理的
在父级元素加上Overflow：hideen就ok。

14、css3中的vh、vw属性

vh、vw，永远都是相对于视窗大小的，即便写在font-size里面也是按视窗大小。这个就会有很多很方便的地方了。
最主要能解决的一个问题就是原来想要做高度自适应很困难，现在很容易了。一个body{height: 100vh}就搞定了。

    function aa() {
        if(bool) {
           var test = 'hello man'
        } else {
          console.log(test)
        }
     }

15、css3鼠标拖选文字背景色与字体本身颜色的实现

::selection {background:pink; color:#fff;}

16、js中的上下文如何理解？

函数的级别是作用域，不同的作用域就是不同的上下文。最后都是指向了全局window。

17、js 让一个事件执行多个函数(3中情况分析，力荐第3种)

var dom = document.getElementById('dom')
    1. 
        dom.onclick = method1
        dom.onclick = method2
        dom.onclick = method3
    如果这样写只有method3执行
    2.
        dom.attachEvent('onclick',method1)
        dom.attachEvent('onclick',method2)
        dom.attachEvent('onclick',method3)
    如果这样写执行顺序为：method3>method2>method1,这样的方法不兼容火狐浏览器
    3. 
        dom.addEventListener('onclick',method1,false)
        dom.addEventListener('onclick',method2,false)
        dom.addEventListener('onclick',method3,false)
    如果这样写执行顺序为：method1>method2>method3,这样的写法兼容所有浏览器，执行顺序也正常
'注意：dom.addListener('onclick',method,false) 里面的method后面不能添加括号'  'addEventListener事件监听'

17、js判断手机端||电脑端

function getRem(pwidth,prem){
    var html = document.getElementsByTagName('html')[0];
    var oWidth =  window.screen.availWidth ||document.body.clientWidth;
    html.style.fontSize = oWidth / pwidth * prem +'px';
    console.log(oWidth);
}
function getReturn(size){
    var html = document.getElementsByTagName('html')[0]; 
    html.style.fontSize = size +'px';
}

var mb = '/css/mb.css';
var pc = '/css/pc.css';
var doc=document; 
function crearLink(url){
    var link=doc.createElement("link"); 
    link.setAttribute("rel", "stylesheet"); 
    link.setAttribute("type", "text/css"); 
    link.setAttribute("href", url); 
    document.getElementsByTagName('head')[0].appendChild(link);
}
function setMb(){
    crearLink(mb);
}
function setPc(){
    crearLink(pc);
}

window.onload = function(){
    if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) { //移动端
        console.log('手机');
        getRem(750,100);
        window.onresize = function(){
            getRem(750,100);
        }
        setMb();
    }else{
        window.onresize = function(){
            console.log('电脑');
            getReturn(12);
        }
        setPc();
    }
}
//核心代码块 /(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)
//注意手机端识别要用 window.screen.availWidth 利用分辨率才能识别，不支持PC端document.body.clientWidth