条件分支语句
条件分支语句也叫switch语句语法:
switch(条件表达式){
case 表达式:
语句...
break;
case 表达式:
语句...
break;
default:
语句...
break;
}
数组
创建数组有两个方法分别是直接创建个面向对象方法.
//面向对象的方式创建
var aRr01 = new Array(1,2,3,'abc');
//直接创建
var aRr02 = [1,2,3,'def'];//推荐使用,性能更高
还可以获取数组的长度.
//获取数组的成员数量(长度)
// alert(aRr02.length);
// alert(aRr02[3]);
数组的常用方法:
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,'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
还可以同过标签来获取元素
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';
}
循环语句
通过循环语句可以反复的执行一段代码多次
while循环:while(条件表达式){语句...}
while语句在执行时,先对条件表达式进行求值判断,如果值为true,则执行循环体,循环体执行完毕以后,继续对表达式进行判断如果为true,则继续执行循环体,以此类推,如果值为false,则终止循环.
do...while循环:do{语句...}while(条件表达式)
do...while可以保证循环体至少执行一次,而while不能.
for语句,也是一个循环语句,也称为for循环:
for循环的语法:for(①初始化表达式;②条件表达式;④更新表达式){③语句...}
数组去重
var aRr = [1,3,4,1,6,9,1,2,5,3,1,6,5,4,4];
var aRr2 = [];
for(var i=0; i<aRr.length; i++){
//判断元素第一次出现的位置,恰好是当前索引时,就将元素放入新数组
if(aRr.indexOf(aRr[i]) == i){
aRr2.push(aRr[i]);
}
}
alert(aRr2);//1,3,4,6,9,2,5
字符串的操作方法:
/*字符串切断转成数组*/
var sTr = '2018-06-20';
var aRr = sTr.split('-');
var aRr2 = sTr.split('');
// console.log(aRr2);
/*实际上就是修改了<title>标签的内容*/
document.title = aRr2;
var sTr2 = '#div1';
var sTr3 = '.div1';
/*获取指定索引的字符*/
var sTr4 = sTr2.charAt(0);
if(sTr4 == '#'){
// alert('id选择器');
}
/*查看子串第一次出现的位置*/
var sTr5 = 'Microsoft Yahei';
var num = sTr5.indexOf('Yahei');
var num2 = sTr5.indexOf('xihei');
alert(num2);//没有找到就弹出-1
//从10开始截取到末尾
var sTr6 = sTr5.substring(10);//Yahei
/*全部转为小写字母*/
alert(sTr6.toLowerCase());//yahei
字符串的反转,只要一个公式
var sTr = "123asdf79888asdfe21";
var sTr2 = sTr.split('').reverse().join('');
alert(sTr2);//12efdsa88897fdsa321
定时器弹框
<style type="text/css">
.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;/*默认不显示,用定时器显示*/
}
</style>
<script type="text/javascript">
/*
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="http://www.baidu.com">百度网</a>
<div class="pop_con" id="pop">
<div class="pop">
<h3>提示信息!</h3>
<a href="#" id="shutOff">关闭</a>
</div>
<div class="mask"></div>
</div>
</body>
定时器的用法
//单次定时器
var timer = setTimeout(function(){
alert('hello!');
}, 3000);
//清除单次定时器
clearTimeout(timer);
//反复循环定时器
var timer2 = setInterval(function(){
alert('hi~~~');
}, 2000);
//清除反复循环定时器
clearInterval(timer2);
使用定时器造一个小动画
<head>
<meta charset="UTF-8">
<title>定时器动画</title>
<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>
使用计时器来显示当前时间
<head>
<meta charset="UTF-8">
<title>时钟</title>
<style type="text/css">
</style>
<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>
</head>
<body>
<div id="box"></div>
</body>
变量
变量有局部变量和全局变量:
全局变量:函数外部定义的变量,函数内部和外部都可以访问,它的值可以共享
局部变量:函数内部定义的变量,函数内部可以访问,外部无法访问。函数内部访问变量时,先在内部查找是否有此变量,如果有,就使用内部变量,如果没有,就去外部查找
函数内部如果不用'var'关键字定义变量,变量可能会变成全局变量,如果用严格模式解析会报错
封闭函数
//原来的写法
function myAlert(){
var str = '欢迎访问我的主页';
alert(str);
}
myAlert();
var str = function(){
alert('test');
}
封闭函数定义:(function(){……})()
(function(){
var str = '欢迎访问我的主页';
alert(str);
})();//最后的()表示马上执行
//封闭函数其他的写法:在匿名函数前加“!”或者“~”,之后加“()”
~function(){
var str = '欢迎访问我的主页';
alert(str);
}();
用变量定义函数
//函数用变量方式定义:先定义再使用
// myalert();//提前会报错
var myAlert = function(){
alert('hello!');
}
myAlert();//放在下面可以执行
闭包
//闭包的一般写法
function aa(b){
var a = 12;
function bb(){
alert(a);
alert(b);
}
return bb;
}
var cc = aa(24);
//闭包的封闭函数写法
var cc = (function(b){
var a = 12;
function bb(){
alert(a);
alert(b);
}
return bb;
})(24);
cc();
网友评论