中软大前端0312-JS条件语句&循环语句

发表于 | 分类于

条件语句

if-else条件语句

1
2
3
4
5
6
7
8
9
10
11
12
<p id="demo1"></p>
<script type="text/javascript">
	var score=90;
	if(score>=90){
		out="该同学成绩优秀";
	}else if((score<90)&&(score>=80)){
		out="该同学成绩良好";
	}else{
		out="该同学成绩不达标"
	}
	document.getElementById("demo1").innerHTML=out;
</script>

switch-case条件语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<p id="demo"></p>
<script type="text/javascript">
	var a=2;
	var s;
	switch(a){
		case 1:
			s="今天星期一";
			break;
		case 2:
			s="今天星期二";
			break;
		default:
			s="输入错误！";
			
	}
	document.getElementById("demo").innerHTML=s;
</script>
  • 若没有break，则继续进行下一个代码块(不用进行判断)，直到遇到
    break或者default
  • case判断时 day===”1” ，数据类型，数值都要相同

script不执行的问题

放在<head></head>中的script语句不执行，是由于HTML文件执行时是自上而下加载，document.getElementById("demo").innerHTML=s; 该语句放在头部中加载时无法获取到”demo”id。
调用类的都是放在head部分，而本页面的JS脚本就直接写在body中

循环语句

for循环

for(;;){ }

do-while循环

do{

}while(i<10);
循环结束点：
while()条件不满足结束循环；
非正常结束：continue break

while循环

while(){ }

  • break:结束本层循环
  • continue:结束本次循环，继续下一次循环

Document对象

常用方法

  • getElementById()
    通过Id获取页面元素，可动态更改元素内容innerHtml,更改元素样式style
    1
    2
    3
    4
    5
    6
    document.getElementById("demo4").innerHTML="搜狐";
    document.getElementById("demo4").style.color="blue";
    document.getElementById("demo4").style.background="antiquewhite";
    document.getElementById("demo4").style.height="200px";
    document.getElementById("demo4").style.width="200px";
    document.getElementById("demo4").style.backgroundImage="url(img/li.png)";

更改元素样式document.getElementById("demo").className

  • getElementByName()
  • getElement
  • write()

显示/隐藏—练习

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
	function disdiv(){
		document.getElementById("demo6").style.display="block";
	}
	function undis(){
		document.getElementById("demo6").style.display="none";
	}
</script>
<p  onmouseover="disdiv()" onmouseout="undis()">显示/隐藏</p>
<div class="aa" id="demo6"></div>
`

点击按钮判断状态是隐藏还是显示，若是显示则更改状态为隐藏；若是隐藏则更改状态为显示。

1
2
3
4
5
6
7
8
9
10
11
12
<input type="button" name="btn2" id="btn2" value="显示/隐藏" onclick="onchange1()" />
<div class="aa" id="demo7"></div>
<script type="text/javascript">
	function onchange1(){
		if(document.getElementById("demo7").style.display=="block"){
			document.getElementById("demo7").style.display="none";
		}else{
			document.getElementById("demo7").style.display="block";
		}
	}
</script>