JS(7)-CSDN博客

本文链接：https://blog.csdn.net/john_boom/article/details/78107169

复习

按钮不可用 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.itast.cn?name=cz”
所以我们要实现编码，然后再传到后台。
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码
decodeURIComponent() 函数可把字符串作为 URI 组件进行解码

var url = "http://www.itcast.cn?name=andy";
console.log(encodeURIComponent(url));  // 编码
var afterUrl = encodeURIComponent(url);
console.log(decodeURIComponent(afterUrl));  // 解码

结果：

操作字符串

合并字符串取字符串

concat() 连接字符串

var txt1 = “abc”;
var txt2 = ”123”;
console.log(txt1.concat(txt2));     “abc123”;

slice()

slice(“取字符串的起始位置”, [结束位置]) ; [] 可选的
起始位置一定要有，结束位置可以省略

var txt = “abcedf”;
txt.slice(3) ;

从 txt 里面字符的第 3（索引号）个开始取结束位置省略，一直取到最后一个。
总结 slice(3) 从第3个开始取，一直取到最后
slice(3,6) 3 从第3个开始取 6取到第6索引号的位置，还是从左边的第0个开始数。但是不包含6 。

起始位置可以是负数，如果是负数，则是从右边往左边开始取。
var txt =”asdf”;
txt.slice(-1) 结果是 f

substr()

substr(起始位置,[取的个数])
同上。
不写取的个数，默认从起始位置一直取到最后。
取的个数：是指从起始位置开始，往后面数几个。

 var txt = “abcdefghijk”;
 txt.substr(3,4);

从索引 3 （d）开始数 4个 defg
substr(-1) 少用 ie678 报错。尽量少用
兼容性的写法：
onBtnClick("btn7",div1.substr(div1.length-1,1)); // 兼容的写法

substring 同slice 一样的但是有一点不同
substring(3,6)
substring 始终会把小的值作为起始位置,大的值作为结束位置
例如： substring(6,3) 实际中自动变成 substring(3,6);

保留小数位数

122340.12345 保留两位有效小数 122340.12
substr(0, .+3)
1.console.log(str.substr(0,str.indexOf(".")+3));
通过 indexOf 返回小数点的位置截取字符串
2. console.log(parseInt(PI*100) /100);
先乘以100 取整然后除以100
3. console.log(PI.toFixed(2));
pi.toFixed(2) 保留 2位小数

大小写转换

asdf – ASDF
ASDF – asdf

1 toUpperCase，转换为大写（参数：无）
2 toLowerCase，转换为小写（参数：无）
asdf.toUpperCase() 结果就是： ASDF
$("txt").value.toUpperCase();
把txt 的值转换为大写

无缝滚动

原理：
首先先复制两张图片（第一张和第二张），放到最后面（本质上是第5.6张）

ul 是盒子移动的，如果ul 的left 值大于等于4张图片的宽度，就应该快速复原为0 。
code：

1   <script>
2      var scroll = document.getElementById("scroll");
3      var ul = scroll.children[0];
4      var num = 0; //控制左侧值  left
5      var timer = null;  // 定时器
6      timer = setInterval(autoPlay,20);
7      function autoPlay() {
8          num--;
9          //console.log(num);
10          num<=-1200 ? num = 0 : num;
11          ul.style.left = num + "px";
12      }
13      scroll.onmouseover = function() {  // 鼠标经过大盒子  停止定时器
14          clearInterval(timer);
15      }
16      scroll.onmouseout = function() {  
17          timer = setInterval(autoPlay,20);  // 开启定时器
18      } 
19  </script>

缓动动画

匀速动画，看起来，效果太简单。
等差序列 : 2 4 6 8 10

缓动动画公式:
目的：一个盒子初始值是0，要走到 400 px 的位置
初始值(leader)=0，目标值(target)=400
box.style.left = xxxx + “px” ;
leader = leader + (target - leader ) /10 ;

1     btn.onclick = function() {
2          setInterval(function(){
3              leader = leader + (target - leader )/10;
4              box.style.left = leader + "px";
5          },30)
6      }

案例：

检索字符（indexOf&&lastIndexOf）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>introduce index</title>
</head>
<body>
   字符串：<input type="text" id="target"/> 要检索的字符：<input type="text" id="key"/>
   <button id="btn1">从前面检索</button>
   <button id="btn2">从后面检索</button>
</body>
</html>
<script>
    function $(id) {
        return document.getElementById(id);
    }
    $("btn1").onclick = function() {
        alert($("target").value.indexOf($("key").value));
    }
    $("btn2").onclick = function() {
        alert($("target").value.lastIndexOf($("key").value));
    }
</script>

字符串的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>operate the string</title>
</head>
<body>
    <div id="div1">my name is john</div>
    <div id="div2">what's your name ?</div>
    <button id="btn1">concat</button><span></span><br/>

    <button id="btn2">slice(3)</button><span></span><br/>
    <button id="btn3">slice(3,6)</button><span></span><br/>
    <button id="btn4">slice(-1)</button><span></span><br/>

    <button id="btn5">substr(3)</button><span></span><br/>
    <button id="btn6">substr(3,6)</button><span></span><br/>
    <button id="btn7">substr(-1) 兼容</button><span></span><br/>

    <button id="btn8">slice(6,3)</button><span></span><br/>
    <button id="btn9">substring(6,3)</button><span></span><br/>
</body>
</html>
<script>
    window.onload = function() {
        var div1 = document.getElementById("div1").innerHTML;
        var div2 = document.getElementById("div2").innerHTML;
        function onBtnClick(id,txt) {
            document.getElementById(id).onclick = function() {
                this.nextSibling.innerHTML = txt;
                //this指向的是button的标签，它的下一个兄弟就是span
                //即span标签里的内容变成txt
            }
        }
        onBtnClick("btn1",div1.concat(div2));//连接两个字符
        onBtnClick("btn2",div1.slice(3));//slice-切开,从索引号为3的开始切开
        onBtnClick("btn3",div1.slice(3,6));//从索引为3的字符开始到索引为6(不包含6)的字符串
        onBtnClick("btn4",div1.slice(-1));//负数是从后面开始索引

        onBtnClick("btn5",div1.substr(3));//对字符串进行subtract(扣除),从索引3的的字符开始截取。
        onBtnClick("btn6",div1.substr(3,6));//从索引3的字符开始截取6个字符
        onBtnClick("btn7",div1.substr(div1.length-1,1));//从后面开始索引的兼容写法。

        onBtnClick("btn8",div1.slice(6,3));//这个不正确。
        onBtnClick("btn9",div1.substring(6,3));//作用等效slice(3,6)
    }
</script>

$的封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$的封装</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="demo"></div>
    <div></div>
    <div></div>
    <div class="one"></div>
    <div class="one"></div>
    <div class="one"></div>
    <div></div>
    <div></div>
    <div></div>
    <div id="last"></div>
</body>
</html>
<script>

    //获得类的兼容写法
    function getClass(classname) {
        // 判断是否支持
        if(document.getElementsByClassName)
        {
            return document.getElementsByClassName(classname);
        }
        var arr = [];//用于返回数组
        var dom = document.getElementsByTagName("*");
        for (var i = 0; i < dom.length; i++) {
            var txtarr = dom[i].className.split(" ");
            for (var j = 0; j < txtarr.length; j++) {
                if(txtarr[j] == classname)
                {
                    arr.push(dom[i]);
                }
            }
        }
        return arr;
    }
    //封装函数$，获得选择器
    function $(str) {
        var s = str.charAt(0); //存放符号
        var ss = str.slice(1);
        switch(s)
        {
            case "#":
                return document.getElementById(ss);
            break;
            case ".":
                return getClass(ss);
            break;
            default :
                return document.getElementsByTagName(str);
        }
    }
    $("#demo").style.backgroundColor = "red";
    $("#last").style.backgroundColor = "green";
    var test = $(".one");
    for (var i = 0; i < test.length; i++) {

        test[i].style.backgroundColor = "blue"
    }
</script>

匀速运动的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>匀速运动的案例</title>
    <style>
        .box {
            position: absolute;
            top: 100px;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <button id="btn">start</button>
    <div class="box" id="Box"></div>
</body>
</html>
<script>
    var btn = document.getElementById("btn");
    var box = document.getElementById("Box");
    var num = 0;
    var timer = null;
    btn.onclick = function() {
        timer = setInterval(function(){
            num++;
            if(num >= 500)
            {
                clearInterval(timer);
            }
            else
            {
                box.style.left = num +"px";
            }
        },10)
    }
</script>

缓动运动的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缓动运动的案例</title>
    <style>
        .box {
            position: absolute;
            top: 100px;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <button id="btn">start</button>
    <div class="box" id="Box"></div>
</body>
</html>
<script>
    var btn = document.getElementById("btn");
    var box = document.getElementById("Box");
    var timer = null;
    var leader = 0;
    var target = 500;
    btn.onclick = function() {
        setInterval(function(){
           leader = leader + (target - leader)/25;
           //这句代码是关键，让起始的位置与终点相对位置越来越小，后面的速度就会越来越慢
           box.style.left = leader + "px";
        },20)
    }
</script>

无缝滚动的特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动的特效</title>
    <style>
        *{margin:0; padding:0;}
        ul{list-style: none;}
        img {vertical-align: top; } /*取消图片底部3像素的距离*/
        .box {
            width: 600px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            position: relative;
            overflow: hidden;
        }
        .box ul li {
            float: left;
        }
        .box ul {
            width: 400%;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="box" id="scroll">
        <ul>
            <li><img src="images/01.jpg" alt=""/></li>
            <li><img src="images/02.jpg" alt=""/></li>
            <li><img src="images/03.jpg" alt=""/></li>
            <li><img src="images/04.jpg" alt=""/></li>
            <li><img src="images/01.jpg" alt=""/></li>
            <li><img src="images/02.jpg" alt=""/></li>
        </ul>
    </div>
</body>
</html>
<script>
    var scroll = document.getElementById("scroll");
    var ul = scroll.children[0];
    var num = 0;
    var timer = null;
    timer = setInterval(autoPlay,20);
    function autonPlay() {
        num--;
        num<=-1200? num=0 :num;
        ul.style.left = num +"px";
    }
    scroll.onmouseover = function() {
        clearInterval(timer);
    }
    scroll.onmouseout = function() {
        timer = setInterval(autoPlay,20);
    }

</script>