（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> |
[View](https://github.com/phoenixshow/FrontCode/blob/b995903f7f67cb31f025e8e78d8a7aac8a589cbf/demo137_%E5%BE%AA%E7%8E%AF%E8%AF%AD%E5%8F%A5.html)
139 [demo137_循环语句.html](https://github.com/phoenixshow/FrontCode/commit/b995903f7f67cb31f025e8e78d8a7aac8a589cbf#diff-d61dc9bae6bdd56595c1d29fa179f8a9 "demo137_循环语句.html")
| | | @@ -0,0 +1,139 @@ |
| | | +<!DOCTYPE html> |
| | | +<html lang="en"> |
| | | +<head> |
| | | + <meta charset="UTF-8"> |
| | | + <title>循环语句</title> |
| | | + <script type="text/javascript"> |
| | | + /* |
| | | + 循环语句： |
| | | + 通过循环语句可以反复的执行一段代码多次 |
| | | + |
| | | + while循环 |
| | | + - 语法： |
| | | + while(条件表达式){ |
| | | + 语句... |
| | | + } |
| | | + |
| | | + - while语句在执行时， |
| | | + 先对条件表达式进行求值判断， |
| | | + 如果值为true，则执行循环体， |
| | | + 循环体执行完毕以后，继续对表达式进行判断 |
| | | + 如果为true，则继续执行循环体，以此类推 |
| | | + 如果值为false，则终止循环 |
| | | + |
| | | + do...while循环 |
| | | + - 语法： |
| | | + do{ |
| | | + 语句... |
| | | + }while(条件表达式) |
| | | + |
| | | + - 执行流程： |
| | | + do...while语句在执行时，会先执行循环体， |
| | | + 循环体执行完毕以后，在对while后的条件表达式进行判断， |
| | | + 如果结果为true，则继续执行循环体，执行完毕继续判断以此类推 |
| | | + 如果结果为false，则终止循环 |
| | | + |
| | | + 实际上这两个语句功能类似，不同的是while是先判断后执行， |
| | | + 而do...while会先执行后判断， |
| | | + do...while可以保证循环体至少执行一次， |
| | | + 而while不能 |
| | | + |
| | | + for语句，也是一个循环语句，也称为for循环 |
| | | + 在for循环中，为我们提供了专门的位置用来放三个表达式： |
| | | + 1.初始化表达式 |
| | | + 2.条件表达式 |
| | | + 3.更新表达式 |
| | | + |
| | | + for循环的语法： |
| | | + for(①初始化表达式;②条件表达式;④更新表达式){ |
| | | + ③语句... |
| | | + } |
| | | + |
| | | + for循环的执行流程： |
| | | + ①执行初始化表达式，初始化变量（初始化表达式只会执行一次） |
| | | + ②执行条件表达式，判断是否执行循环。 |
| | | + 如果为true，则执行循环③ |
| | | + 如果为false，终止循环 |
| | | + ④执行更新表达式，更新表达式执行完毕继续重复② |
| | | + |
| | | + 任意一种循环都可以互相嵌套 |
| | | + */ |
| | | + window.onload = function(){ |
| | | + var oList = document.getElementById('list01'); |
| | | + var aLi = oList.getElementsByTagName('li'); |
| | | + /*for (var i = 0; i < aLi.length; i++) { |
| | | + if(i % 2 == 0){ |
| | | + aLi[i].style.background = 'gold'; |
| | | + } |
| | | + }*/ |
| | | + |
| | | + /*for(var j in aLi){ |
| | | + aLi[j].style.background = 'red'; |
| | | + }*/ |
| | | + |
| | | + //创建一个循环，往往需要三个步骤 |
| | | + //1.创初始化一个变量 |
| | | + var j = 0; |
| | | + //2.在循环中设置一个条件表达式 |
| | | + while(j < aLi.length){ |
| | | + aLi[j].style.background = 'gold'; |
| | | + //3.定义一个更新表达式，每次更新初始化变量 |
| | | + j++; |
| | | + } |
| | | + |
| | | + /* |
| | | + 以下是死循环的写法 |
| | | + 像这种将条件表达式写死为true的循环，叫做死循环 |
| | | + 该循环不会停止，除非浏览器关闭，死循环在开发中慎用 |
| | | + 可以使用break，来终止循环 |
| | | + */ |
| | | + /*while(true){ |
| | | + if(j>10){ |
| | | + break;//退出整个循环 |
| | | + } |
| | | + j++; |
| | | + } |
| | | + //for循环的死循环写法 |
| | | + for(;;){ |
| | | + |
| | | + }*/ |
| | | + |
| | | + /* |
| | | + break关键字可以用来退出switch或循环语句 |
| | | + 不能在if语句中使用break和continue |
| | | + break关键字，会立即终止离他最近的那个循环语句 |
| | | + continue关键字可以用来跳过当次循环 |
| | | + 同样continue也是默认只会对离他最近的循环循环起作用 |
| | | + */ |
| | | + /* |
| | | + 可以为循环语句创建一个label，来标识当前的循环 |
| | | + label:循环语句 |
| | | + 使用break语句时，可以在break后跟着一个label， |
| | | + 这样break将会结束指定的循环，而不是最近的 |
| | | + */ |
| | | + |
| | | + outer: |
| | | + for(var i=0 ; i<5 ; i++){ |
| | | + console.log("@外层循环"+i); |
| | | + for(var j=0 ; j<5; j++){ |
| | | + console.log("内层循环:"+j); |
| | | + break outer; |
| | | + } |
| | | + } |
| | | + } |
| | | + </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> |
| | | + <li>9</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>
封闭函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封闭函数</title>
<script type="text/javascript">
/*原来的写法
function myAlert(){
var str = '欢迎访问我的主页';
alert(str);
}
myAlert();*/
var str = function(){
alert('test');
}
//封闭函数的一般写法
//封闭函数定义：(function(){……})()
/*
;;(function(){
var str = '欢迎访问我的主页';
alert(str);
})();//最后的()表示马上执行
*/
//封闭函数其他的写法：在匿名函数前加“！”或者“~”，之后加“()”
~function(){
var str = '欢迎访问我的主页';
alert(str);
}();
</script>
</head>
<body>
</body>
</html>
用变量的方式定义函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用变量的方式定义函数</title>
<script type="text/javascript">
/*
原来的写法：可以提前
myAlert();
function myAlert(){
alert('hello!');
}*/
//函数用变量方式定义：先定义再使用
// myalert();//提前会报错
var myAlert = function(){
alert('hello!');
}
myAlert();//放在下面可以执行
</script>
</head>
<body>
</body>
</html>
闭包
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>闭包</title>
<script type="text/javascript">
/*
//闭包的一般写法
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();
/*
//只能调用一次的闭包
(function(b){
var a = 12;
function bb(){
alert(a);
alert(b);
}
return bb;
})(24)();
*/
</script>
</head>
<body>
</body>
</html>
闭包存循环的索引
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>闭包存循环的索引值</title>
<style type="text/css">
li{
height: 30px;
background-color: gold;
margin-bottom: 10px;
}
</style>
<script type="text/javascript">
//闭包的用途：存循环的索引值
window.onload = function(){
var aLi = document.getElementsByTagName('li');
// alert(aLi.length);//8
for(var i=0; i<aLi.length; i++){
/*
aLi[i].onclick = function(){
alert(i);//每个li都弹出8，因为点击时循环已完毕，i最后为8
}
*/
(function(k){//这里的k是形参
aLi[k].onclick = function(){
alert(k);//弹出每个li的索引值
}
})(i);//这里的i是实参
}
}
</script>
</head>
<body>
<ul>
<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>
</body>
</html>
闭包做私有变量计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>闭包做私有变量计数器</title>
<script type="text/javascript">
//闭包的用途：私有变量计数器
var count = (function(){
var a = 0;
function bb(){
a++;
return a;
}
return bb;
})();
//每调用一次count，a就自增一次
alert(count());//1
alert(count());//2
var c = count();
alert(c);//3
</script>
</head>
<body>
</body>
</html>
(6)闭包做选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>闭包做选项卡</title>
<style type="text/css">
.btns{
width: 500px;
height: 50px;
}
/*选项卡的样式*/
.btns input{
width: 100px;
height: 50px;
background-color: #ddd;/*默认灰色*/
color: #666;
border: 0px;
}
/*被选中的选项卡的样式*/
.btns input.cur{
background-color: gold;
}
/*内容区的样式*/
.contents div{
width: 500px;
height: 300px;
background-color: gold;
display: none;/*默认隐藏*/
line-height: 300px;
text-align: center;
}
/*被选中的内容区的样式*/
.contents div.active{
display: block;
}
</style>
<script type="text/javascript">
//闭包做选项卡
window.onload = function(){
var aBtn = document.getElementById('btns').getElementsByTagName('input');
var aCon = document.getElementById('contents').getElementsByTagName('div');
// alert(aCon.length);
//循环所有的选项卡按钮
for(var i=0; i<aBtn.length; i++){
(function(i){
//给每个选项卡按钮添加点击事件
aBtn[i].onclick = function(){
//遍历所有选项卡按钮
for(var j=0; j<aBtn.length; j++){
//将每个选项卡按钮都设为灰色
aBtn[j].className = '';
//将每个内容区都隐藏
aCon[j].className = '';
}
//this代表当前点击的Button对象
this.className = 'cur';//当前点击的按钮为金色
// alert(i);//不加闭包时，不管点哪个按钮，i都等于3
//加闭包保存了索引值才有效
aCon[i].className = 'active';//当前点击的按钮对应的内容显示
}
})(i);
}
}
</script>
</head>
<body>
<div class="btns" id="btns">
<input type="button" value="tab01" class="cur">
<input type="button" value="tab02">
<input type="button" value="tab03">
</div>
<div class="contents" id="contents">
<div class="active">tab文字内容一</div>
<div>tab文字内容二</div>
<div>tab文字内容三</div>
</div>
</body>
</html>
(8)跳转的源页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跳转的源页面</title>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
网友评论