09_JS字符串方法、$封装、无缝滚动、动画、轮播图

作者: 对方不想理你并向你抛出一个异常 | 来源:发表于2017-09-10 14:34 被阅读0次

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

indexOf(“字符”);

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

 var txt = “abcdef”;
 alert(txt.indexOf(“d”))      结果就是   3

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

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

lastIndexOf(索引字符串)

从后面开始数，返回的索引值还是从前面开始数的

例：

var str = "adsfgh";
alert(str.indexOf("s"));//2
alert(str.lastIndexOf("s"));//2

上面两个结果都是2，但是如果str改为

var str = "adsfghsb";
alert(str.indexOf("s"));//2
alert(str.lastIndexOf("s"));//6

这个时候lastIndexOf返回的就是6了

网址编码

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

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

例：

        var url =  "http://www.itast.cn?name=cz";
        var encUrl = encodeURIComponent(url);
        console.dir(encUrl);
        console.dir(decodeURIComponent(encUrl));

结果：

http%3A%2F%2Fwww.itast.cn%3Fname%3Dcz
%E7%BC%96%E8%A7%A3%E7%A0%81.html:10 http://www.itast.cn?name=cz

操作字符串

合并字符串
取字符串

concat()

连接字符串

str1.concat(str2);

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

slice(-1)；表示从右边第一个开始到右边最后一个
slice(-5,-2)；表示从右边第五个开始到右边最后二个，不包括第二个

substr()

substr(起始位置,[取的个数])

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

 var txt = “abcdefghijk”;
 txt.substr(3,4); //从第3个  （d） 开始 数 4个  defg

substr(-1) ;少用，因为在IE6、7、8 报错 。尽量少用
兼容性的写法：
str.substr(str.length-1,1); // 兼容的写法

substring()

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

例：保留两位小数

        var PI = 3.1415926;
        var str = PI+"";
        var index = str.indexOf(".");
        var sub = str.substr(0,index+3);
        console.dir(sub);//3.14
        console.dir(parseFloat(sub));//3.14

例：判断文件格式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var file = document.getElementById("mwfile");
            file.onchange = function () {
                var fileName = file.value;

                var index = fileName.lastIndexOf(".");
                var subfix = fileName.substr(index).toUpperCase();
                if(subfix == ".JPG" || subfix == ".PNG"){
                    this.nextSibling.innerHTML = "格式正确";
                }else{
                    this.nextSibling.innerHTML = "格式错误";
                }
            }
        }
    </script>
</head>
<body>
    <input type="file" id="mwfile"/><span></span>
</body>
</html>

例：初步封装Jquery的$选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 5px;
        }
    </style>

</head>
<body>
<div id="demo"></div>
<div></div>
<div class="one"></div>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
    //封装自己的Class选择器
    function getByClass(className) {
        var arr = [];//用于存放结果的数组
        if (document.getElementsByClassName) {//浏览器支持
            arr = document.getElementsByClassName(className);
        } else {
            var doms = document.getElementsByTagName("*");
            console.dir(doms.length);
            for (var i = 0; i < doms.length; i++) {
                var classArr = doms[i].className.split(" ");//以空格切割
                for(var j=0;j<classArr.length;j++){
                    if(classArr[j] == className){
                        arr.push(doms[i]);
                    }
                }
            }
        }
        return arr;
    }
    function $(str){
        var type = str.charAt(0);
        var flag = str.substr(1);
        switch(type){
            case "#":
                return document.getElementById(flag);
            case ".":
                return getByClass(flag);
            default :
                return document.getElementsByTagName(str);
        }
    }
//    $("div").style.backgroundColor = "pink";
    $("#demo").style.background = "purple";
</script>
</body>
</html>

无缝滚动

原理：首先先复制两张图片（第一张和第二张）放到最后面（本质上是第 5.6张）
ul 是盒子移动的，如果ul 的left 值大于等于 4张图片的宽度，就应该快速复原为0 。

例：循环匀速无缝滚动

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>无缝滚动</title>
    <style type="text/css">
        body,ul,li{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        .box{
            width: 600px;
            height: 200px;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }
        .box ul{
            width: 1800px;
            position: absolute;
        }
        .box ul li{
            float: left;

        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var scroll = document.getElementById("scroll");
            var ul = scroll.children[0];
            var num = 0;
            var timer = null;
            function animatorPlay(){
                num--;
                num = num >= -1200?num:0;
                ul.style.left = num+"px";
            }
            timer = setInterval(animatorPlay,20);
            scroll.onmouseover = function () {//停止动画
                clearInterval(timer);
            }
            scroll.onmouseout = function () {//开启动画
                timer = setInterval(animatorPlay,20);
            }
        }
    </script>
</head>
<body>
    <div class="box" id="scroll">
        <ul>
            <li>![](images/01.jpg)</li>
            <li>![](images/02.jpg)</li>
            <li>![](images/03.jpg)</li>
            <li>![](images/04.jpg)</li>
            <li>![](images/01.jpg)</li>
            <li>![](images/02.jpg)</li>
        </ul>
    </div>
</body>
</html>

动画

匀速动画
匀速动画，看起来效果太简单。
等差序列 : 2 4 6 8 10
缓动动画公式:
一个盒子初始值是0，要走到 400 px 的位置，假如说，初始值 leader：0 ，target：400
box.style.left = xxxx + “px”

leader = leader + (target - leader ) /10 ;

10表示步长
例：缓动动画，先快后慢

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 100px;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var btn = document.getElementsByTagName("button")[0];
            var div = document.getElementById("box");
            var leader = 0;
            var target = 500;
            var timer = null;
            btn.onclick = function () {
                timer = setInterval(function () {
                    if((target-leader)<0.005){
                        leader = target;
                        clearInterval(timer);
                    }
                    leader = leader+(target-leader)/20;
                    div.style.left = leader+"px";
                    console.log(leader);
                },50);
            }
        }
    </script>
</head>
<body>
    <button>开始</button>
    <div class="box" id="box"></div>
</body>
</html>

例：轮播图

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>焦点图</title>
    <style type="text/css">
        body,ol,ul,li{
            margin: 0;
            padding: 0;
        }
        ol,ul,li{
            list-style: none;
        }
        img{
            /*清除图片底部3px的间隙*/
            /*方式一*/
            /*border: 0 none;*/
            /*vertical-align: middle;*/
            /*方式二*/
            display: block;
        }
        .slider{
            width: 490px;
            height: 170px;
            border: 1px solid #999;
            margin: 100px auto;
            padding: 5px;
            position: relative;
        }
        .inner{
            width: 100%;
            height: 100%;
            /*background-color: pink;*/
            overflow: hidden;
            position: relative;
        }
        .inner ul{
            width: 1000%;
            position: absolute;
            left: 0;
            top: 0;
        }
        .inner li{
            float: left;
        }
        .slider ol{
            position: absolute;
            left: 35%;
            bottom: 10px;

        }
        .slider ol li{
            float: left;
            background-color: #666;
            width: 24px;
            height: 24px;
            text-align: center;
            line-height: 24px;
            margin-left: 5px;
            border-radius: 12px;
            color: #fff;
        }
        .slider ol li.current{
            background-color: #eee;
            color: #333;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var slider = document.getElementById("slider");
            var ul = slider.children[0].children[0];
            var ol = slider.children[1];
            var olis = ol.children;
            var leader=0,target = 0;
            for(var i = 0;i<olis.length ;i++){
                var oli = olis[i];
                oli.index = i;
                oli.onmouseover = function () {
                    for(var j=0 ; j<olis.length ; j++){
                        olis[j].className = "";
                    }
                    this.className = "current";
                    target = -this.index*490;//目标位置就是用当前索引乘以盒子宽度
                }
            }
            function PhotoAnimation(){
                leader = leader+(target - leader)/20;
                ul.style.left = leader+"px";
            }
            setInterval(PhotoAnimation , 20);
        }
    </script>
</head>
<body>
    <div class="slider" id="slider">
        <div class="inner">
            <ul>
                <li>![](images/01.jpg)</li>
                <li>![](images/02.jpg)</li>
                <li>![](images/03.jpg)</li>
                <li>![](images/04.jpg)</li>
                <li>![](images/05.jpg)</li>
            </ul>
        </div>
        <ol>
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>
</body>
</html>

例：左右点击轮播

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body,ul,li{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        img{
            /*清除图片底部3px的间隙*/
            /*方式一*/
            /*border: 0 none;*/
            /*vertical-align: middle;*/
            /*方式二*/
            display: block;
        }
        .slider{
            width: 520px;
            height: 280px;
            border: 1px solid #999;
            margin: 100px auto;
            padding: 5px;
            position: relative;
        }
        .inner{
            width: 100%;
            height: 100%;
            /*background-color: pink;*/
            overflow: hidden;
            position: relative;
        }
        .inner ul{
            width: 1000%;
            position: absolute;
            left: 0;
            top: 0;
        }
        .inner li{
            float: left;
        }
        .slider a{
            position: absolute;
            width: 40px;
            height: 70px;
            font: 500 40px/70px "simsun";
            text-align: center;
            top: 100px;
            color: #999;
        }
        .slider .left{
            left: 0;
        }
        .slider .right{
            right: 0;
        }
        .slider a:hover{
            background-color: rgba(0,0,0,.2);
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            function $(id){return document.getElementById(id);}
            var slider = document.getElementById("slider");
            var ul = slider.children[0].children[0];

            var leader = 0,target = 0;
            $("left").onclick = function () {
                target<=-520*4?-520*4:target -= 520;//边界检测
            }
            $("right").onclick = function () {
                target>=0?0:target += 520;//边界检测
            }
            function PhotoAnimation(){
                leader = leader+(target - leader)/20;
                ul.style.left = leader+"px";
            }
            setInterval(PhotoAnimation , 20);
        }
    </script>
</head>
<body>
    <div class="slider" id="slider">
        <div class="inner">
            <ul>
                <li>![](images/1.jpg)</li>
                <li>![](images/2.jpg)</li>
                <li>![](images/3.jpg)</li>
                <li>![](images/4.jpg)</li>
                <li>![](images/5.jpg)</li>
            </ul>
        </div>
        <a href="javascript:;" class="left" id="left"> > </a>
        <a href="javascript:;" class="right" id="right"> < </a>
    </div>
</body>
</html>

09_JS字符串方法、$封装、无缝滚动、动画、轮播图

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

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

网址编码

操作字符串

concat()

slice()

substr()

substring()

无缝滚动

动画

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读