（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>
(2)循环语句
循环语句：
通过循环语句可以反复的执行一段代码多次
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，终止循环
④执行更新表达式，更新表达式执行完毕继续重复②
任意一种循环都可以互相嵌套
创建一个循环，往往需要三个步骤
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将会结束指定的循环，而不是最近的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循环语句</title>
<script type="text/javascript">
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++;
}
/*while(true){
if(j>10){
break;//退出整个循环
}
j++;
}
//for循环的死循环写法
for(;;){
}*/
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>
[whlie循环]
(3)年投资率
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var money = 1000;
var count = 0;
while(money < 5000){
money *=1.05;
count++;
}
console.log("一共需要"+count+"年")
</script>
</head>
<body>
</body>
</html>
(4)小明考试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
while(true){
var score = prompt("请输入小明的期末成绩(0-100):");
if(score >= 0 && score <= 100){
break;
}
alert("请输入有效分数");
}
if (score > 100 || score < 0 || isNaN(score)){
alert("输错了");
}else{
if (score == 100){
alert("宝马车");
}else if (score >= 80){
alert("手机一部");
}else if (score >= 60){
alert("一本参考书");
}else{
alert("挨打");
}
}
</script>
</head>
<body>
</body>
</html>
[for循环]
(5)奇数之和
<!DOCTYPE html>
<html lang="en">
<head>
<
</html>meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var sum = 0;
for (var i = 1 , sum=0 ; i<=100 ; i++) {
if(i%2 != 0){
sum = sum+i;
}
}
console.log("奇书之和为:"+sum);
</script>
</head>
<body>
</body>
(6)7的倍数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var sum = 0;
var count = 0;
for(var i=1 ; i<=100 ; i++){
if(i % 7 == 0){
sum += i;
count++;
}
}
console.log("总和为:"+sum);
console.log("总数量为:"+count);
</script>
</head>
<body>
</body>
</html>
(7)水仙花数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
for(var i=100 ; i<1000 ; i++){
var bai = parseInt(i/100);
var shi = parseInt((i-bai*100)/10);
var ge = i % 10;
if(bai*bai*bai + shi*shi*shi + ge*ge*ge == i){
console.log(i);
}
}
</script>
</head>
<body>
</body>
</html>
(8）判断质数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var num = prompt("请输入一个大于1的整数:");
if(num <= 1){
alert("不合法");
}else{
var flag = true;
for(var i=2 ; i<num ; i++){
if(num % i == 0){
flag = false;
}
}
if(flag){
alert(num + "是质数");
}else{
alert("这个不是质数")
}
}
</script>
</head>
<body>
</body>
</html>
(9)九九乘法口诀表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
for(var i=1 ; i<=9 ; i++ ){
for(var j=1 ; j<=i ; j++){
document.write("<span>"+j+"*"+i+"="+i*j+"</span>");
}
document.write("<br />");
}
</script>
<style type="text/css">
body{
width: 2000px;
}
span{
display: inline-block;
width: 80px;
}
</style>
</head>
<body>
</body>
</html>
a.png
(10)一到一百的质数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
for(var i=2 ; i<=100 ; i++){
var flag = true;
for(var j=2 ; j<i ; j++){
if(i%j == 0){
flag = false;
}
}
if(flag){
console.log(i);
}
}
</script>
</head>
<body>
</body>
</html>
