JS(7)

来源：互联网发布：安全知识网络竞赛答题编辑：程序博客网时间：2024/05/19 03:42

复习

按钮不可用 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; //控制左侧值  left5      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>

阅读全文

0 0