夜光带你走进前端工程师（四十二 jS ）

夜光序言：

孤高所以至高。

所谓真正的英雄就是一个人。因为孤高所以强大。

没有持有羁绊也就是说没有必须守护的东西。必须守护的东西换言之就是弱点。

因此没有弱点、没有必须守护的东西、和别人没有联系的人才是最强的。

正文：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.xiaomi {width: 512px;height: 400px;border: 1px solid #f00;margin: 100px auto;overflow: hidden;position: relative;}.xiaomi span {position: absolute;left: 0;width: 100%;height: 200px;cursor: pointer;}.up {top: 0;}.down {bottom: 0;}</style>
</head>
<body>
<div class="xiaomi"><img src="mi.png" alt=""/><span class="up"></span><span class="down"></span>
</div>
</body>
</html>             //css 部分
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.xiaomi {width: 512px;height: 400px;border: 1px solid #f00;margin: 100px auto;overflow: hidden;position: relative;}.xiaomi span {position: absolute;left: 0;width: 100%;height: 200px;cursor: pointer;}.up {top: 0;}.down {bottom: 0;}#pic {position: absolute;top: 0;left: 0;}</style>
</head>
<body>
<div class="xiaomi"><img src="mi.png" alt="" id="pic"/><span class="up" id="picUp"></span><span class="down" id="picDown"></span>
</div>
</body>
</html>
<script>function $(id) { return document.getElementById(id);}var num = 0; // 控制图片的top值var timer = null; // 定时器名称$("picUp").onmouseover = function(){// alert(11);clearInterval(timer);timer =  setInterval(function(){num -= 3;num >= -1070 ? $("pic").style.top = num + "px" :  clearInterval(timer);},30);}$("picDown").onmouseover = function(){clearInterval(timer);timer  = setInterval(function(){num++;num < 0 ?  $("pic").style.top = num + "px" : clearInterval(timer);},30);}$("picUp").parentNode.onmouseout = function() {clearInterval(timer);}
</script>

五秒后自动关闭广告

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        img {
            position: absolute;
            top: 0;

}
        #left {
            left: 0;
        }
        #right {
            right: 0;
        }
    </style>
</head>
<body>
<img src="1.gif" alt="" id="left"/>
<img src="2.gif" alt="" id="right"/>

<p>夜光设计</p>
</body>
</html>
<script>
     function $(id) { return document.getElementById(id);} // id函数
     function hide(id) {   // 隐藏函数
         $(id).style.display = "none";
     }
     function show(id) {
         $(id).style.display = "block";
     }
     setTimeout(closeAd,5000);
     function closeAd() {
         hide("left");
         hide("right");
     }
</script>

复习

按钮不可用 disabled = “disabled” || true
setTimeout 只执行一次 setInterval 执行很多次
递归调用：函数自己调用自己函数递归调用不提倡用函数名而喜欢用的是 arguments.callee 返回的是正在执行的函数本身
逻辑运算符与 && 或 || 非！ ! > && > ||
2&&0 0 1&&8 0&&3 0 1||0
转换为字符型
    var num = 12345;
    num+ “”
    String(num);
    num.toString();   10进制
    num.toString(2)   二进制
根据字符位置返回字符
charAt(索引号)

var txt = “abcde”;

txt.charAt(3); d

charCodeAt(3) unicode 编码 97 100

根据字符返回位置

跟 charAt() 相反的根据字符返回的是位置

返回前面起第一个字符的位置

indexOf(“字符”);

它是从前面开始数（从左边开始数），而且只找第一个，然后返回改字符的位置，索引号都是从0开始的。返回的是个数值。

var txt = “abcdef”;

alert(txt.indexOf(“d”)) 结果就是 3

如果找不到该字符返回 -1

返回后面起第一个字符的位置

lastIndexOf(参数：索引字符串)

从后面开始数同上

var txt = “abcdef” ;

txt.lastIndexOf(“d”); 3

返回的值，还是从左边开始数的索引号。

网址编码

我们知道一个网址自己的网址，不同页面也有自己id网址，我们经常会做一些，把网址送入到后台。但是后台再处理的不认识比如换行啊等特殊符号的？

var url = “http://www.CSDN.cn?name=cz”

所以我们要实现编码，然后再传到后台。

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码

decodeURIComponent() 函数可把字符串作为 URI 组件进行解码