孙肖宁 发布的文章

全局变量（成员变量）

在整个程序中，哪里都可以访问到的变量。
定义形式：进入script立即定义的变量和没有var的变量。

局部变量

函数内部 的变量，只有函数内部可以访问到。
定义形式：函数内部用var定义的变量和形参）

隐式全局变量

隐式全局变量就是隐藏的全局变量不好被发现。
示例：

function  fn（）{
var  a  =  b  =  c  =  1;   // b和c就是隐式全局变量
}

注意:

function  fn（）{
var  a  =  b  =  c  =  1;   // b和c就是隐式全局变量（等号）
var  a = 1;  b = 2;  c = 3;     // b和c就是隐式全局变量（分号）
var  a = 1 ,  b = 2 ,  c = 3;    // b和c就不是隐式全局变量（逗号）
}

变量声明提升（出现原因：预解析）

函数中，定义变量在使用变量之后。
只提升变量名，不提升变量值，容易出现undefined。计算后形成NaN。
变量声明提升：在预解析的时候，成员变量和函数，被提升到最高位置，方便其他程序访问。
变量声明提升特点：成员变量只提升变量名，不提升变量值。但是，函数是所有内容全部提升。（function直接定义的）
函数范围内照样会出现变量声明提升。
什么情况容易出现变量声明提升：使用变量在定义变量之前。

函数

函数：函数就是可以重复执行的代码块，如果函数名相同，后面的函数会覆盖前面的函数。（函数名，不能一样。JavaScript没有函数的重载。函数不调用不执行。加载函数的时候，只加载函数名，不加载函数体。函数也是一种数据类型。
调用一个函数就等于执行这个函数并且得到这个函数的返回值。
函数名就是整个函数。
两个平级的函数中的变量不会相互影响（可以使用同样的形参名）
JS加载的时候，只加载函数名，不加载函数体。所以如果想使用内部的成员变量，需要调用函数。
函数的定义：
关键字：function。
第一种

function 函数名(参数)
{  
    程序块;   
}

第二种(匿名函数)

    var  函数名 = function (){
        程序块; 
    }

第三种

    var 函数名 = new Function( 程序块);

参数

参数：参与运算的变量。为了增强函数的功能性，和程序员的交互性，和函数的可拓展行。参数相当于局部变量。

  • 形参
    形式上参与运算的变量，无实际值，为实参占位置，就像一个躯壳一样。（可以理解为函数的内部变量外部无法访问）

  • 实参
    实际参与运算的变量。形参为他占位置，真实参与运算的变量。
    注意：如果形参个数与实参个数不匹配（一般情况下，不会让形参和实参不匹配）
    1.相等的话，正常执行。
    2.实参大于形参，正常执行。（多余的实参，函数不使用）
    3.实参小于形参，要看你的程序是否报错。（报错，NaN，undefined）
    4.未给定实参的形参为undefined;

    返回值

  • 有return函数就有值；没有return函数就没值；
  • 函数程序运行后的结果外部需要使用的时候，我们不能直接给与，需要通过return返回。
  • 总结：函数内部，return后面的值就是返回值；
  • 作用：函数执行后剩下结果就是返回值。
  • 函数执行完毕，会不会留下点儿什么，取决于有没有返回值。

注意:

  1. 如果函数没有显示的使用 return语句 ，那么函数有默认的返回值：undefined
  2. 如果函数使用 return语句，那么跟再return后面的值，就成了函数的返回值
  3. 如果函数使用 return语句，但是return后面没有任何值，那么函数的返回值也是：undefined。
  4. 函数使用return语句后，这个函数会在执行完 return 语句之后停止并立即退出，也就是说return后面的所有其他代码都不会再执行。

匿名函数

定义：匿名函数就是没有名字的函数。
作用：
1.不需要定义函数名的时候。
2.书写起来更简便。
匿名函数的调用有三种方法：

  • 直接调用或自调用。(function(){alert(1)})()

  • 事件绑定。

    document.onclick = function () {
      alert(1);
  }

  • 定时器。

      setInterval(function () {
      console.log(444);
  },1000);

    回调函数

    执行函数就等于：函数名+(); 整个函数+();
    回调函数就是函数作为参数进行传递。
    回调函数一般是用于定义一个规则来使用的。
    规则的传递只能通过函数实现。通过变量无法达成。所以我们需要传递规则的时候必须使用回调函数。

      //回调函数:函数作为参数进行传递和使用。
  function fn(demo){
      demo();
  }
  function test(){
      console.log("我是被测试的函数！");
  }

&&和||的结果不一定是boolean值
&&连接两个boolean类型，有一个是false结果就是false。
连接值不是布尔类型时，按照成布尔类型计算，结果本身不变。（非布尔）
例子： 1 = 2&&1; 0 = 0 && 1; 都是true取后面，都是false取前面。
||链接两个boolean类型，有一个是true结果就是true。
连接值不是布尔类型时，按照成布尔类型计算，结果本身不变。（非布尔）
例子： 2= 2||1; 1 = 0 || 1; 都是true取前面，都是false取后面。

用菱形制作上箭头

css部分

        *{
            padding: 0;
            margin: 0;
        }
        .box{
            position: relative;
        }
        i{
            position: absolute;
            height: 7px;
            width: 15px;
            overflow: hidden;
        }
        s{
            position: absolute;
            top: 0px;
            font: 400 13px/15px Consolas;
        }

html部分

    <div class="box">
        <i><s>◇</s></i>
    </div>

CSS的盒子层次问题

  • 标准流盒子，低于浮动的盒子，浮动的盒子又低于定位的盒子（除去static），即：定位（除去static）高于浮动，浮动高于标准流。（盒子的高低和占不占位置无关）

  • 通过z-index改变盒子的层次关系

    • 使用前提：必须有定位（除去static）。
    • 给定z-index的值为层级的值（不给默认为0）
    • auto 默认。堆叠顺序与父元素相等。
    • number 设置元素的堆叠顺序。
    • inherit 规定应该从父元素继承 z-index 属性的值。

注意

  • 层级为0的盒子，也比标准流和浮动高。
  • 层级为负数的盒子，比标准流和浮动低。
  • 层级不取小数。
  • 层级一样，后面的盒子比前面的层级高。
  • 浮动或者标准流的盒子，后面的盒子比前面的层级高。
  • 定位中：abselute是不占位置的，relative是占位置的。而层级的高低，是和占不占位置没有关系的。

  • href的值可以是URL。这样可以直接跳转到指定的位置。

    • 绝对 URL - 指向另一个站点（比如 href="http://www.sunxiaoning.com"）。
    • 相对 URL - 指向站点内的某个文件（href="index.htm"）。
    • 锚 URL - 指向页面中的锚（href="#top"）。
  • href的值可以是"#",此时会回到页面的顶部，但是不会刷新页面。
  • href的值可以不写，此时也表示跳转到当前页面，但是会刷线页面。

  • hrea的值还可以通过JavaScript关闭跳转，使得a链接点击无效。

    • <a href="javascript:;">test</a>
    • <a href="javascript:void(0)">test</a>

1.盒子需要使用背景图的时候必须用padding，margin不能设置背景。
2.会出现外边距合并或者margin塌陷的时候用padding，上下盒子都使用margin的时候，容易合并。
3.行内元素上下只能设置padding，不能设置margin。
4.看border，如果是a连接，看能不能让字体变色，或者显示小手。
5.根据开发过程中的需求来决定。

css圆角矩形的制作（border-radius）的表示方法

  • border-radius: 宽/高一半；
  • border-radius: 50%；
  • border-radius: 0.2em；
  • border-radius: 100px；
  • border-radius: 左上角 右上角 右下角 左下角。

绘制圆形

.one{
      width: 100px;
      height: 100px;
      background: #C81623;
      border-radius: 50%;
}

绘制小型引导框

.one{
    width: 20px;
    height: 20px;
    background: #C81623;
    border-radius: 50% 50% 50% 0;
}

绘制同心圆

.one{
     width: 100px;
     height: 100px;
     background: #C81623;
     border:20px solid yellow;
     border-radius: 50%;
}

绘制椭圆

 .one{
      width: 200px;
      height: 100px;
      background: #C81623;
      border-radius: 50%;
}

JavaScript实现动态时钟以及分时问候

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript实现动态时钟以及分时问候</title>
</head>
<body>
    <div id="time">
        </div><div id="timeShow"></div>
</body>
</html>
<script language="javascript">
     var t = null;
    t = setTimeout(time,1000);//开始执行
    function time()
    {
       clearTimeout(t);//清除定时器
       dt = new Date();
        h=dt.getHours();
        m=dt.getMinutes();
        s=dt.getSeconds();
       if(h < 6){document.getElementById("time").innerHTML =  "凌晨好";}
            else if (h < 9){document.getElementById("time").innerHTML =  "早上好";}
            else if (h < 12){document.getElementById("time").innerHTML =  "上午好";}
            else if (h < 14){document.getElementById("time").innerHTML =  "中午好";}
            else if (h < 17){document.getElementById("time").innerHTML =  "下午好";}
            else if (h < 19){document.getElementById("time").innerHTML =  "傍晚好";}
            else if (h < 22){document.getElementById("time").innerHTML =  "晚上好";}
            else {document.getElementById("time").innerHTML =  "夜里好";}
       document.getElementById("timeShow").innerHTML = "当前时间："+h+"时"+m+"分"+s+"秒";
       t = setTimeout(time,1000); //
    }

  </script>
  1. 1
  2. ...
  3. 38
  4. 39
  5. 40
  6. 41
  7. 42
  8. 43
  9. 44
  10. ...
  11. 54