JS基础入门篇（ 二 ）—if ， 字符串拼接，数组，图片循环切换

头像
梁志芳
    阅读 5 分钟
    2

    1.if篇

    1. if

    语法:

        if( 判断条件 ){
        代码块
    }
    以上代码的功能是：
        如果 判断条件为真
            则 执行代码块

    2. if-else

    语法:

        if( 判断条件 ){
        代码1
    }else{
        代码2
    }
    上面的 语句 实现的功能:
        如果判断条件成立 ( 为真 )
            执行 代码1
        否则
            执行 代码2

    3. if-else-if-else

    语法:

        if( 判断条件1 ){
        代码1
    }else if（ 判断条件2 ）{
        代码2
    }else if（ 判断条件3 ）{
        代码3
    }...
    else{
        代码
    }
    上面的 语句 实现的功能:
        如果判断条件几成立 ( 为真 )
            执行 代码几
        否则（如果以上都不成立）
            执行 代码（就是else里面的代码）

    2.字符串

    • 字符串：用 成对的 单引号或者双引号包起来的 0个或多个字符组成的串。
        var userName = "kimoo";//字符串为kimoo
    var userName = "";//空字符串
    var userName = " ";//一个由空格组成的字符串
    var userName = "kimoo'";//字符串为kimoo'
    var userName = 'kimoo"';//字符串为kimoo"
    • 字符串拼接：用 + 做字符串拼接。只要加号一边是字符串，另一边是数字，那么会把数字转变成字符串然后做拼接，只有加号两边都是数字才会做数字加法。
    <script>
        var userName = "kimoo";
        console.log( "hello: " + userName + " 你太帅了!" );
        console.log( 1+2 );
        console.log( 1+"2" );
        
</script>

    以上代码结果为：
    图片描述

    举例说明：错误的计算器

    以下代码的作用是：实现数字相加，计算出相加结果的功能。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="t1">
<input type="text" id="t2">
<button id="btu">add</button>
</body>
<script>
    var t1=document.getElementById('t1');
    var t2=document.getElementById('t2');
    var btu=document.getElementById('btu');
    btu.onclick=function () {
        var one=t1.value;
        var two=t2.value;
        alert(one+two);  //错误，因为取到的是字符串，相加会造成字符串拼接。
        //alert(Number(one)+Number(two));//强制转换，将字符串类型转成数字类型。
    };
</script>
</html>

    以上代码结果为：
    图片描述

    解释：t1.value 和 t2.value获取到的是字符串，当字符串相加时，会直接拼接字符串。如果需要计算数字相加，可以将字符串强转为数字。

    alert(Number(one)+Number(two));

    这样可以实现我们想要的功能，实现数字相加。

    3.数组

    • 数组：存储一组数据。

    • 定义数组：举例：var a = ["a","b","c"];

      1. 用[ ]
      2. 多个数据之间用 ,（逗号）隔开，最后一个数据后面不用加逗号。
    • 数组的取值：使用下标，注意下标是从0开始的。eg：a[0], a[1], a[2]
    • 数组的长度:
      数组.length（可读 可写）。eg: a.length表示数组a的线长度。

    • 清空数组的两种方法

      方法1-为变量重新赋值
   arr = [];
方法2-arr.length = 0;

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script>
            var a = ["a","b","c"];
            console.log( a );

//            数组的取值,取出数组中 第 1项 ,数组首项是 第 0 项
            console.log( a[1] );//b
            console.log( a[2] );//c
            
//            数组的长度 - 1 就是 该数组的最后一项
            console.log( a.length );//3
            console.log( a[ a.length-1 ] );//c
            
//            a.length = 1;//裁剪a的长度，最后长度为1，存储数据为a。
            a.length = 10;//重新定义数组长度，后面7个数组的值都为undefined
            console.log( a );
            console.log( a[5] );//undefined
        </script>
    </body>
</html>

    4.图片切换

    1.两张图片切换。codepen不方便放图片，故用颜色代替。
    点击方框会切换颜色

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            border:2px solid black;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        var box=document.getElementsByClassName("box")[0];
        box.style.backgroundColor="red";
        //        存储一个变量 和颜色相对应
        //            变量 onoff 为true 红色
        //            变量 onoff 为false 蓝色

        var onoff=true;
        box.onclick=function () {
            if(!onoff){//不是红色的时候设置为红色。
                box.style.backgroundColor="red";
            }else{
                box.style.backgroundColor="blue";
            }
            onoff=!onoff;
        }
    </script>
</body>
</html>

    2.多组颜色切换
    循环切换图片,点击查看效果！！！！！

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border:2px solid black;
        }
        button{
            width: 100px;
            height: 50px;
            border:none;
            background: #6cd2eb;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="box"></div>
<button class="prev">上一张</button>
<button class="next">下一张</button>
<script>
    var box=document.getElementsByClassName("box")[0];
    var prev=document.getElementsByClassName("prev")[0];
    var next=document.getElementsByClassName("next")[0];
    var color=["red","blue","dark","pink","orange"];
    var num=0;
    var L=color.length;
    box.style.backgroundColor="red";
    prev.onclick=function () {
        num--;
        if(num==-1){
            num=L-1;
        }
        box.style.backgroundColor=color[num];
    };
    next.onclick=function () {
        num++;
        if(num==L){
            num=0;
        }
        box.style.backgroundColor=color[num];
    }



</script>
</body>
</html>
    javascriptcsshtml
    梁志芳
    159 声望58 粉丝

    正在学习CSS+HTML+JS

    « 上一篇
    JS基础入门篇（ 一 ）
    下一篇 »
    JS基础入门篇（三）— for循环，取余，取整。

    引用和评论

    推荐阅读
    头像
    git 基本命令

    梁志芳赞 3阅读 1.7k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.3k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    0 条评论
    得票最新