1.if篇1. if语法: if( 判断条件 ){ 代码块 } 以上代码的功能是： 如果 判断条件为真 则 执行代码块2. if-else语法: if( 判断条件 ){ 代码1 }else{ 代码2 } 上面的 语句 实现的功能: 如果判断条件成立 ( 为真 ) 执行 代码1 否则 执行 代码23. 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"];用[ ]多个数据之间用 ,（逗号）隔开，最后一个数据后面不用加逗号。数组的取值：使用下标，注意下标是从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>
