js 数组及流程控制语句
2019-01-14 本文已影响0人
心i_af0a
js数组
join 能把元素连起来 连接字符串 合并元素
push 添加 末尾
pop 删除 末尾
unshift 添加 开头
shift 删除 开头
reverse 反转 ’不是倒序！！！
indexOf 相同元素 返回第一个元素的索引值 查找字符首次出现的索引
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组常用方法</title>
<script type="text/javascript">
var arr = [1,2,3,4];
//ar str = arr.join('-');
//join 能把元素连起来 连接字符串 合并元素
//alert(str); //1-2-3-4
//arr.push(5); //push 添加 末尾
//alert(arr); //1,2,3,4,5
//arr.pop(); // pop 删除 末尾
//alert(arr); //1,2,3
//arr.unshift(0);//unshift 添加 开头
//alert(arr); //0,1,2,3,4
// arr.shift(); // shift 删除 开头
// alert(arr); // 2,3,4
//arr.reverse();
//reverse 反转 ’不是倒序！！！‘
//alert(arr); //4,3,2,1
var arr2 = ['a','b','c','d','a','b','c','d'];
// var num = arr2.indexOf('b');
//indexOf 相同元素 返回第一个元素的索引值 查找字符首次出现的索引
// alert(num); // 1
// 参数1 ：表示索引从2的元素开始 参数2：表示删除1个元素
// arr2.splice(2,1);
// alert(arr2); //a,b,d,a,b,c,d
// 参数3：再插入字母e //替换 包括插入删除
// arr2.splice(2,1,'e'); //a,b,e,d,a,b,c,d
// alert(arr2)
arr2.splice(4,4,'x','i','n','g');
alert(arr2);
</script>
</head>
<body>
</body>
</html>
js流程控制语句为
1 条件判断语句 ： if else
2 条件分支语句： switch...case
3 循环语句 ： for while do...while
js 循环语句
for循环 while循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循环语句</title>
<script type="text/javascript">
window.onload = function(){
var list01 = document.getElementById('list01')
var lis = list01.getElementsByTagName('li')
// for(var i=0; i<lis.length; i++){
// lis[i].style.background = 'pink';
// }
// for(var i=0; i<lis.length; i++){
// if(i%2 == 0){
// lis[i].style.background = 'pink';
// }
// }
// if(i%2 == 0) 隔行变色
// var i=0;
// while(i<lis.length){
// if(i%2 == 0){
// lis[i].style.background = 'pink';
// }
// i++;
// }
// var i = 100;
// do{ // do 先执行一次
// if(i%2 == 0){
// lis[i].style.background = 'pink';
// }
// i++;
// }while(i<lis.length);
for(;;){
//for 死循环
break
}
while(true){ // 死循环
break //跳出循环
}
}
</script>
</head>
<body>
<ul id="list01">
<li>不将就</li>
<li>不将就</li>
<li>不将就</li>
<li>不将就</li>
<li>不将就</li>
<li>不将就</li>
<li>不将就</li>
<li>不将就</li>
<li>不将就</li>
</ul>
</body>
</html>
js条件语句
if 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 btn = document.getElementById('btn')
var box = document.getElementById('box')
btn.onclick = function(){
if (box.style.display == 'none') {
box.style.display = 'block';
}else{
box.style.display = 'none';
}
}
}
</script>
</head>
<body>
<input type="button" value="切换" id='btn'>
<div class="box" id='box' ></div>
</body>
</html>
js条件分支语句
switch...case
switch(today){
case 1:
alert('语文')
break;
case 2:
alert('数学')
break;
case 3:
alert('英语')
break;
case 4:
alert('美术')
break;
case 5:
alert('舞蹈')
break;
default:
alert('不补习')
}
