if语句
-
语法一：
if(条件表达式){
语句...if语句在执行时，会先对条件表达式进行求值判断， 如果条件表达式的值为true，则执行if后的语句， 如果条件表达式的值为false，则不会执行if后的语句。 if语句只能控制紧随其后的那个语句, 如果希望if语句可以控制多条语句， 可以将这些语句统一放到代码块中 if语句后的代码块（即{}）不是必须的，但是在开发中尽量写上代码块，即使if后只有一条语句 - 语法二: if(条件表达式){ 语句... }else{ 语句... } if...else...语句 当该语句执行时，会先对if后的条件表达式进行求值判断， 如果该值为true，则执行if后的语句 如果该值为false，则执行else后的语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件判断语句</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background-color: gold;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('box');
/*oBtn.onclick = function(){
if(oDiv.style.display == 'none'){
oDiv.style.display = 'block';
}else{
oDiv.style.display = 'none';
}
}*/
// alert(oDiv.style.display);//弹出空白提示框，因为div没设置过style属性
oBtn.onclick = function(){
if(oDiv.style.display == 'block' || oDiv.style.display == ''){
oDiv.style.display = 'none';
}else{
oDiv.style.display = 'block';
}
}
}
</script>
</head>
<body>
<input type="button" value="切换" id="btn">
<br>
<div class="box" id="box"></div>
</body>
</html>
多重条件判断语句
if语句
语法三：
if(条件表达式){
语句...
}else if(条件表达式){
语句...
}else if(条件表达式){
语句...
}else{
语句...
}
if...else if...else
当该语句执行时，会从上到下依次对条件表达式进行求值判断
如果值为true，则执行当前语句。
如果值为false，则继续向下判断。
如果所有的条件都不满足，则执行最后一个else后的语句
该语句中，只会有一个代码块被执行，一旦代码块执行了，则直接结束语句
条件分支语句也叫switch语句
语法：
switch(条件表达式){
case 表达式:
语句...
break;
case 表达式:
语句...
break;
default:
语句...
break;
}
执行流程：
switch...case..语句
在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较，
如果比较结果为true，则从当前case处开始执行代码。
当前case后的所有的代码都会执行，我们可以在case的后边跟着一个break关键字，
这样可以确保只会执行当前case后的语句，而不会执行其他的case
如果比较结果为false，则继续向下比较
如果所有的比较结果都为false，则只执行default后的语句
switch语句和if语句的功能实际上有重复的，使用switch可以实现if的功能，同样使用if也可以实现switch的功能，所以我们使用时，可以根据自己的习惯选择。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多重条件判断语句</title>
<script type="text/javascript">
var today = 4;
// if(today == 1){
// alert('语文');
// }else if(today == 2){
// alert('数学');
// }else if(today == 3){
// alert('英语');
// }else if(today == 4){
// alert('美术');
// }else if(today == 5){
// alert('舞蹈');
// }else{
// alert('不补习');
// }
switch(today){
case 1:
alert('语文');
break;//结束整个switch语句
case 2:
alert('数学');
break;
case 3:
alert('英语');
break;
case 4:
alert('美术');
break;
case 5:
alert('舞蹈');
break;
default:
alert('不补习');
break;//最后一个default可以不写break，但建议写上
}
</script>
</head>
<body>
</body>
</html>
数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组</title>
<script type="text/javascript">
//面向对象的方式创建
var aRr01 = new Array(1,2,3,'abc');
//直接创建
var aRr02 = [1,2,3,'def'];//推荐使用，性能更高
//获取数组的成员数量（长度）
// alert(aRr02.length);//弹出4
// alert(aRr02[3]);//弹出cdf
var aRr03 = [[1,2,3],['a','b','c','d'],[true,false]];
// alert(aRr03.length);//弹出3
// alert(aRr03[1].length);//弹出3
alert(aRr03[1][2]);//弹出c
</script>
</head>
<body>
</body>
</html>
数组常用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组常用方法</title>
<script type="text/javascript">
var aRr = [1,2,3,4];
//用-连接数组元素并转为字符串
//var sTr = aRr.join("-");//用-连接数组元素并转为字符串，弹出1-2-3-4
// var sTr = aRr.join('');//用空串连接
// alert(sTr);//弹出1234
//向数组最后追加元素
// aRr.push(5);
// alert(aRr);//1,2,3,4,5
//删除末尾元素
// aRr.pop();
// alert(aRr);//1,2,3
//向最前面插入元素0
// aRr.unshift(0);
// alert(aRr);//0,1,2,3,4
//删除第一个（索引为0的）元素
// aRr.shift();
// alert(aRr);//2,3,4
//反转
// aRr.reverse();
// alert(aRr);//4,3,2,1
//查找字母'b'第一次出现的索引
var aRr2 = ['a','b','c','d','a','b','c','d'];
var num = aRr2.indexOf('b');
// alert(num);//1
//从第2索引元素开始，删除1个元素
// aRr2.splice(2,1);//删除c
// alert(aRr2);//a,b,d,a,b,c,d
//从第2索引元素开始，删除1个元素，再插入e
// aRr2.splice(2,1,'e');//把c替换成e
// alert(aRr2);//a,b,e,d,a,b,c,d
//删除后面的abcd，改为fghi
aRr2.splice(4,4,'f','g','h','i');
alert(aRr2);//a,b,c,d,f,g,h,i
</script>
</head>
<body>
</body>
</html>
（1）通过标签获取元素
<!DOCTYPE html> |
<html lang="en"> |
<head> |
<meta charset="UTF-8"> |
<title>通过标签获取元素</title> |
<script type="text/javascript"> |
window.onload = function(){ |
// //获取页面上所有的li |
// var aLi = document.getElementsByTagName('li'); |
|
//获取id为list01的ul |
var oList = document.getElementById('list01'); |
//再获取这个ul下的所有li |
var aLi = oList.getElementsByTagName('li'); |
alert(aLi.length);//8 |
// aLi.pop();//错误用法，aLi是一个类似数组的选择集，没有数组通用的一些方法 |
|
aLi[0].style.backgroundColor = 'gold'; |
aLi[1].style.backgroundColor = 'gold'; |
} |
</script> |
</head> |
<body> |
<ul id="list01"> |
<li>1</li> |
<li>2</li> |
<li>3</li> |
<li>4</li> |
<li>5</li> |
<li>6</li> |
<li>7</li> |
<li>8</li> |
</ul> |
<ul id="list02"> |
<li>9</li> |
<li>10</li> |
<li>11</li> |
<li>12</li> |
</ul> |
</body> |
</html> |
do...while循环
//1.创初始化一个变量
var j = 0;
//2.在循环中设置一个条件表达式
while(j < aLi.length){
/*while(j < aLi.length){ aLi[j].style.background = 'gold'; //3.定义一个更新表达式，每次更新初始化变量 j++;
}
}*/do{aLi[j].style.background = 'gold';j++;}while(j < 0)
定时器在javascript中的作用
1、制作动画
2、异步操作
3、函数缓冲与节流
定时器类型及语法
/*
定时器：
setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器
*/
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
alert('ok!');
}
定时器动画
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: gold;
position: fixed;
left: 20px;
top: 20px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById('box');
var left = 20;
//反复循环定时器，每30毫秒修改一次盒子的left值
var timer = setInterval(function(){
left += 2;
oBox.style.left = left + 'px';
//当left值大于700时停止动画（清除定时器）
if(left > 700){
clearInterval(timer);
}
},30);
}
</script>
</head>
<body>
<div class="box" id="box"></div>
</body>
定时器制作时钟
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById('box');
function timeGo(){
var now = new Date();
// alert(now);//弹出美式时间：Wed Jun 20 2018 15:27:13 GMT+0800 (中国标准时间)
var year = now.getFullYear();//2018年
var month = now.getMonth() + 1;//6月弹出5//范围0-11
var date = now.getDate();//20号
var week = now.getDay();//3//星期几，西半球时间，范围0-6，星期日为一周的第一天，为0
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
// alert(hour + ":" + minute + ":" + second);//15:33:9
oBox.innerHTML = '当前时间是：' + year + '年' + toDouble(month) + '月' + toDouble(date) + '日 ' + toWeek(week) + ' ' + toDouble(hour) + ":" + toDouble(minute) + ":" + toDouble(second);
}
timeGo();
setInterval(timeGo, 1000);
}
//此函数将星期的数字转为汉字表示
function toWeek(num){
switch(num){
case 0:
return '星期天';
break;
case 1:
return '星期一';
break;
case 2:
return '星期二';
break;
case 3:
return '星期三';
break;
case 4:
return '星期四';
break;
case 5:
return '星期五';
break;
case 6:
return '星期六';
break;
}
}
//此函数将不足两位的数字前面补0
function toDouble(num){
if(num < 10){
return '0' + num;
}else{
return num;
}
}
</script>
