条件分支语句,数组,数组的常用方法,通过标签获取元素,循环语句,
条件分支语句:
var today = 1;
switch(today){
case 1:
alert('语文');
break;//没有break直接把下面的代码执行完
case 2:
alert('数学');
break;
case 3:
alert('英语');
break;
case 4:
alert('美术');
break;
case 5:
alert('舞蹈');
break;
default://可以写在上边
alert('不补习');
// 最后一个可以不写break
}
数组:
var arr1 = new Array(1,2,3,4);
//直接创建
var arr2 = [1,2,3,4];
alert(arr2.length);//查看数组长度
alert(arr2[3]);//下标索引值
var arr3 = [[1,2,3],['a','b','c','d'],[true,false]];//二维数组
alert(arr3.length);//三个小的数组
alert(arr3[1].length);//用下标进入第二个小数组然后length查看长度
alert(arr3[1][2]);//c用下标进入第二个小数组继续取出下标为2的元素
数组的常用方法:
var aRr = [1,2,3,4];
var str = aRr.join('-');//用减号来合并连接
var str2 = aRr.join('');//转字符串
aRr.push(5);//从末尾添加
aRr.pop();//从末尾删除
aRr.unshift(0);//从开头添加
aRr.shift();//从前边删除
aRr.reverse();//反转数组
var arr2 = ['a','b','c','d','a','b','c','d'];
var num = arr2.indexOf('b');//查看b在数组中第一次出现的位置
arr2.splice(2,1);//删除下标为2的一个元素
arr2.splice(2,1,'e');//删除后添加,相当于修改
arr2.splice(4,4,'e','f','g','h');//从下标为4的开始删除4个,然后添加
arr2.splice(2,0,'e');//在下标为2的前边添加一个e 增加
通过标签获取元素:
window.onload = function () {
var list1 = document.getElementById('list1');//获取ul id 然后获取ul下边的li
var lis = list1.getElementsByTagName('li');//获取页面上所有的li 数据集
//只能调用length来查看长度 伪数组
lis[0].style.backgroundColor = 'gold';//通过下标来设置
}
循环语句:
window.onload = function () {
var oList = document.getElementById('list1');
var aLi = oList.getElementsByTagName('li');
for (var i = 0; i < aLi.length; i++) {
aLi[i].style.background = 'red';
}
}
window.onload = function () {
var oList = document.getElementById('list1');
var aLi = oList.getElementsByTagName('li');
for循环
// for (var i = 0; i < aLi.length; i++) {
// if(i % 2 == 0){
// aLi[i].style.background = 'red';
// }
// }
while循环
// var i = 0;
// while(i<aLi.length){
// if (i % 2 == 0){
// aLi[i].style.backgroundColor = 'red';
// }
// i++
do while 循环
var i = 0;
do{
if ( i % 2 == 0){
aLi[i].style.backgroundColor = 'red';
}
i++
}while (i<aLi.length)
}
数组去重:
var arr = [1,1,3,5,4,7,8,5,6,8,9,6,4,3,2,1,];
var arr2 = [];
for (var i=0; i<arr.length; i++){
if(arr.indexOf(arr[i]) == i){//第一次出现的下标
arr2.push(arr[i]);
}
}
字符串反转:
split转数组
reverse数组反转
join数组转字符串
定时器弹框
.pop{
width: 400px;
height: 300px;
background-color: #fff;
border: 1px solid #000;
/*固定定位*/
position: fixed;
/*左上角位于页面中心*/
left: 50%;
top: 50%;
/*让div向左偏移半个宽度、向上偏移半个高度,使div位于页面中心*/
margin-left: -200px;
margin-top: -150px;
/*弹窗在最上面*/
z-index: 9999;
}
/*遮罩样式*/
.mask{
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
left: 0;
top: 0;
/*设置透明度30%*/
opacity: 0.3;
filter: alpha(opacity=30);/*兼容IE6、7、8*/
/*遮罩在弹窗的下面,在网页所有内容的上面*/
z-index: 9990;
}
.pop_con{
display: none;/*默认不显示,用定时器显示*/
}
/*
setTimeout只执行一次的定时器
clearTimeout关闭只执行一次的定时器
setInterval反复执行的定时器
clearInterval关闭反复执行的定时器
*/
window.onload = function(){
var oPop = document.getElementById('pop');
var oShut = document.getElementById('shutOff');
/*setTimeout(showPop, 3000);//开启定时器,3秒后调用函数showPop()弹框
function showPop(){
oPop.style.display = 'block';//显示弹框和遮罩
}*/
//开启定时器的简写方式:调用匿名函数
setTimeout(function(){
oPop.style.display = 'block';
}, 3000);
oShut.onclick = function(){
oPop.style.display = 'none';//关闭弹框和遮罩
}
}
</script>
</head>
<body>
<h1>首页标题</h1>
<p>页面内容</p >
<a href=" ">百度网</a >
<div class="pop_con" id="pop">
<div class="pop">
<h3>提示信息!</h3>
<a href="#" id="shutOff">关闭</a >
</div>
<div class="mask"></div>
</div>