资讯专栏INFORMATION COLUMN

JS基础入门篇( 二 )—if , 字符串拼接,数组,图片循环切换

MudOnTire / 2726人阅读

摘要:错误,因为取到的是字符串,相加会造成字符串拼接。强制转换,将字符串类型转成数字类型。以上代码结果为解释和获取到的是字符串,当字符串相加时,会直接拼接字符串。表示数组的线长度。重新定义数组长度,后面个数组的值都为图片切换两张图片切换。

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"

字符串拼接:+ 做字符串拼接。只要加号一边字符串另一边数字,那么会把数字转变成字符串然后做拼接,只有加号两边都是数字才会做数字加法

以上代码结果为:

举例说明:错误的计算器

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




    
    Title







以上代码结果为:

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

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

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

3.数组

数组:存储一组数据。

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

用[ ]

多个数据之间用 ,(逗号)隔开,最后一个数据后面不用加逗号。

数组的取值:使用下标,注意下标是从0开始的。eg:a[0], a[1], a[2]

数组的长度:
数组.length(可读 可写)。eg: a.length表示数组a的线长度。

清空数组的两种方法

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



    
        
        
    
    
        
    

4.图片切换

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




    
    Title
    


    

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




    
    Title
    


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/52350.html

相关文章

  • JS基础入门 )—if符串拼接数组图片循环切换

    摘要:错误,因为取到的是字符串,相加会造成字符串拼接。强制转换,将字符串类型转成数字类型。以上代码结果为解释和获取到的是字符串,当字符串相加时,会直接拼接字符串。表示数组的线长度。重新定义数组长度,后面个数组的值都为图片切换两张图片切换。 1.if篇 1. if 语法: if( 判断条件 ){ 代码块 } 以上代码的功能是: 如果 判断...

    yhaolpz 评论0 收藏0
  • JS基础入门 )—if符串拼接数组图片循环切换

    摘要:错误,因为取到的是字符串,相加会造成字符串拼接。强制转换,将字符串类型转成数字类型。以上代码结果为解释和获取到的是字符串,当字符串相加时,会直接拼接字符串。表示数组的线长度。重新定义数组长度,后面个数组的值都为图片切换两张图片切换。 1.if篇 1. if 语法: if( 判断条件 ){ 代码块 } 以上代码的功能是: 如果 判断...

    betacat 评论0 收藏0
  • 【连载】前端个人文章整理-从基础入门

    摘要:个人前端文章整理从最开始萌生写文章的想法,到着手开始写,再到现在已经一年的时间了,由于工作比较忙,更新缓慢,后面还是会继更新,现将已经写好的文章整理一个目录,方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理 从最开始萌生写文章的想法,到着手...

    madthumb 评论0 收藏0
  • JavaScript 基础知识 - DOM(一)

    摘要:前言本篇文章是基础知识的篇,如果前面的基础知识入门篇看完了,现在就可以学习了。基本概念分为三个部分。在这个基础上使用一些新特性,高级浏览器支持,低级浏览器不支持。在对象中的属性是一个布尔值,只有和。 showImg(https://segmentfault.com/img/remote/1460000012581493?w=1920&h=1080); DOM 前言 本篇文章是JavaS...

    cuieney 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<