javascript_字符操作_ZHOU125disorder_

最新推荐文章于 2024-07-30 10:56:44 发布

zjing125

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量109

点赞数

分类专栏： javascript基础文章标签： javascript 字符操作

本文链接：https://blog.csdn.net/ZHOU125disorder/article/details/112555845

版权

javascript基础专栏收录该内容

26 篇文章 0 订阅

订阅专栏

`字符操作`

length(字符长度)和indexOf(正向搜索字符)

	    <script>
        //字符串操作方法
        //什么是字符串凡是被""或''包含的东西叫字符串
        //1_length(字符长度)
        //2_正向搜索(寻找)
        var value="我的名字叫卡卡西年龄30我的愿望是成为火影"
        console.log(value);//(返回我的名字叫卡卡西年龄30我的愿望是成为火影)
        console.log(value.length);//空格也算(返回21)
        console.log(value.indexOf("我"));//正向搜索(返回0)
        console.log(value.indexOf("我的"));//找到第一个并返回下标值(返回0)
        console.log(value.indexOf("我卡卡西"));//整体字符串中有但是没有连在一起(返回-1)
        console.log(value.indexOf("我爱罗"));//没找到(返回-1)
        console.log("------------------------------------------------------------");
    </script>

lastIndexOf(反向搜索字符)

        //3_lastIndexOf
        var value="我的名字叫卡卡西年龄30我的愿望是成为火影"
        console.log(value.lastIndexOf("火影"));//从后往前找并返回第一个字符的下标(返回19)
        console.log(value.lastIndexOf("我爱罗"))//没找到(返回-1)
        console.log(value.lastIndexOf("我卡卡西"));//整体字符串中有但是没有连在一起(返回-1)

slice(截取字符串)

        //4_slice(截取字符串)可以是一个或者两个参数     也可以接收负数  
        var value="我的名字叫卡卡西年龄30我的愿望是成为火影"
        console.log(value.slice(1));//返回字符串中该下标到结束的位置(的名字叫卡卡西年龄30我的愿望是成为火影)
        console.log(value.slice(5,8));//从开始下标到结束前一个的下标包头不包尾(卡卡西)
        console.log(value.slice(0.2));//当是小数是取整进行正常操作(我的名字叫卡卡西年龄30我的愿望是成为火影)
        console.log(value.slice(-6,-4));//从后往前包头不包尾后为头(望是)
        console.log(value.slice(-5));//从后往前数从下标+1的位置开始到最后的位置(是成为火影)

substr和substring(截取字符串)

        //6_substr(截取字符串)    第一个参数代表初始位值，第二个参数代表截取长度
        var value="我的名字叫卡卡西年龄30我的愿望是成为火影"
        console.log(value.substr(0,8));//(我的名字叫卡卡西);
        console.log(value.substr(-2,3));//从后往前包头不包尾后为头(火影);
        console.log(value.sub(1));//无长度输出全部(<sub>我的名字叫卡卡西年龄30我的愿望是成为火影</sub>)
        console.log(value.sub(-2));//无长度输出全部(<sub>我的名字叫卡卡西年龄30我的愿望是成为火影</sub>)

replace(替换)_toUpperCase(大写)_toLowerCase(小写)

        //7_replace(替换)
        console.log(value.replace("卡卡西","我爱罗"));//(我的名字叫我爱罗年龄30我的愿望是成为火影)
        //8_toUpperCase(大写)       tolowerCase(小写) 
        var content="i love you";
        console.log(content.toUpperCase());//(I LOVE YOU)
        var value="I LOVE YOU";
        console.log(value.toLowerCase());//(i love you)

trim(删除空白的部分)_split(分割字符串);

        //9_trim(删除空白部分)      兼容性问题        IE8以及以下不支持
        var content = "         卡卡西          ";
        console.log(content.trim());//(卡卡西); 
        //10_split(分割)
        var hope="i belive i can fly"
        console.log(hope.split("",1));//全部分割长度为1
        console.log(hope.split(" ",1));//以一个空格为分割线长度为1

使用字符串的方法写一个轮播图

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字符串轮播图</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }

        html,body{
            width: 100%;
            height: 100%;
        }

        .banner{
            width: 356px;
            height: 456px;
            margin: 49px auto;
            box-shadow: 0 0 1px #096;
            position: relative;
        }

        .banner ul{
            width: 100px;
            height: 456px;
            box-shadow: 0 0 1px red;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            text-align: center;
        }
        ul li{
            width: 100px;
            height: 150px;
            border-bottom: 1px solid #096;
            cursor: pointer;
        }

        img{
            width: 256px;
            height: 456px;
            position: absolute;
            top: 0;
            left: 100px;
            opacity: 0;
        }
        .cls{
            background-color: #096;
        }

        .ddd{
            background-color: #ddd;
        }
        button{
            width: 18px;
            height: 36px;
            position: absolute;
            background-color: #ddd;
            opacity: .5;
            outline: none;
            top: 50%;
        }

        button:hover{
            opacity: 1;
        }
        button:nth-of-type(1){
            left: 100px;
        }
        button:nth-of-type(2){
            right: 0px;
        }

        ol{
            width: 72px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            position: absolute;
            bottom: 0;
            right: 10px;
        }

        ol li{
            width: 8px;
            height: 8px;
            border: 1px solid #ddd;
            background-color: #096;
            border-radius: 50%;
        }

        ol li:hover{
            background-color: #ddd;
        }
        </style>
        <div class="banner">
            <ul>
                <li class="cls">鞠婧祎</li>
                <li>鞠婧祎</li>
                <li>鞠婧祎</li>
            </ul>
            <img src="img/1.jpg" alt="" style="opacity: 1;">
            <img src="img/2.jpg" alt="">
            <img src="img/3.jpg" alt="">
            <button><</button>
            <button>></button>
            <ol>
                <li class="ddd"></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    <script>
        //使用2维数组存储img的src
        var imgs_src=[
            ["img/1.jpg","img/2.jpg","img/3.jpg"],
            ["img/4.jpg","img/5.jpg","img/6.jpg"],
            ["img/7.jpg","img/8.jpg","img/9.jpg"]
        ]
        // console.log(imgs_src);
        //获取ul下的li
        var banner=document.getElementsByClassName("banner")[0];
        // console.log(banner);
        var ul=document.getElementsByTagName("ul")[0];
        var ul_li=ul.getElementsByTagName("li");
        //获取button
        var btn=document.getElementsByTagName("button");
        var imgs=document.getElementsByTagName("img");
        var ol=document.getElementsByTagName("ol")[0];
        var ol_li=ol.getElementsByTagName("li");
        var num=0;
        var timer;
        for(var i=0;i<ul_li.length;i++){
            ul_li[i].index=i;
            ul_li[i].onclick=function(){
                // alert("卡卡西");
                for(var j=0;j<ul_li.length;j++){
                    ul_li[j].className="";
                }
                for(var x=0;x<imgs_src.length;x++){
                    imgs[x].src=imgs_src[this.index][x];
                }
                this.className="cls";
            }
        }

        //button点击事件
        for(var m=0;m<btn.length;m++){
            //第1个btn
            btn[0].onclick=function(){
                // alert("卡卡西");
                num--;
                if(num<0){
                    num=imgs.length-1;
                }
                for(var n=0;n<imgs.length;n++){
                    imgs[n].style.opacity="0";
                    ol_li[n].className="";
                }
                imgs[num].style.opacity="1";
                ol_li[num].className="ddd";
            }
            //第2个btn
            btn[1].onclick=function(){
                num++;
                if(num>imgs.length-1){
                    num=0;
                }
                for(var n=0;n<imgs.length;n++){
                    imgs[n].style.opacity="0";
                    ol_li[n].className="";
                }
                imgs[num].style.opacity="1";
                ol_li[num].className="ddd";
            }
        }

        //分页器的点击事件
        for(var y=0;y<ol_li.length;y++){
            ol_li[y].zhi=y;
            ol_li[y].onclick=function(){
                    for(var p=0;p<ol_li.length;p++){
                        ol_li[p].className="";
                        imgs[p].style.opacity="0";
                    }
                this.className="ddd";
                imgs[this.zhi].style.opacity="1";
            }
        }


        var mouser=function(){
            num++;
                if(num>imgs.length-1){
                    num=0;
                }
                for(var n=0;n<imgs.length;n++){
                    imgs[n].style.opacity="0";
                    ol_li[n].className="";
                }
                imgs[num].style.opacity="1";
                ol_li[num].className="ddd";
        }

        var timer=setInterval(mouser,1200);
        banner.onmouseover=function(){
            clearInterval(timer);
        }

        banner.onmouseout=function(){
             timer=setInterval(mouser,1200)
        }
    </script>
</body>
</html>

zjing125

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript_字符操作_ZHOU125disorder_

字符操作length(字符长度)和indexOf(正向搜索字符) <script> //字符串操作方法 //什么是字符串凡是被""或''包含的东西叫字符串 //1_length(字符长度) //2_正向搜索(寻找) var value="我的名字叫卡卡西年龄30我的愿望是成为火影" console.log(value);//(返回我的名字叫卡卡西年龄30我的愿望是成为火影)
复制链接

扫一扫

专栏目录