11.1

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JavaScript程序</title>
	<script type="text/javascript">
	alert('第一个程序！')
	</script>
</head>
<body>
	<p>第一个程序</p>
</body>
</html>

11.2

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>单项判断语句</title>
</head>
<body>
	<script type="text/javascript">
	var num1=100
	var num2=200
	if (num1<num2) {
		alert('成立')
	}
	else{
		alert('不成立')
	}
	alert('演示完成')
	</script>
</body>
</html>

11.3

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>for循环语句</title>
</head>
<body>
	<script type="text/javascript">
	var sum=0;
	for (var i = 1; i < 100; i+=2) {
		sum=sum+i
	}
	alert("100以内所有奇数和："+sum)
	</script>
</body>
</html>

11.4

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>调用函数</title>
</head>
<body>
	<script type="text/javascript">
	function sum(a,b){
		c=a+b
		return c;
	}
	alert(sum(11,22))
	</script>
</body>
</html>

11.5

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>在JavaScript中调用事件处理程序</title>
</head>
<body>
	<button id="save">
		点击按钮
	</button>
</body>
</html>
<script type="text/javascript">
	varbtn=document.getElementById("save")
	btn.onclick=function(){
		alert("轻松学习JavaScript事件")
	}
</script>

11.6

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图形随机验证码</title>
	<link rel="stylesheet" type="text/css" href="D:\桌面\网页设计\9\6.css">
</head>
<body>
	<ul>
		<li>验证码</li>
		<li><input type="text" name="textfield" id="textfield" size="10" style="height: 35px; vertical-align: middle;">
		<span>
			<img src="" alt="D:\h资源\h资源\图\1.jpg">
			<img src="" alt="D:\h资源\h资源\图\3.jpg">
			<img src="" alt="D:\h资源\h资源\图\2.jpg">
			<img src="" alt="D:\h资源\h资源\图\4.jpg">
		</span>
		</li>
		<li id="wz"><input type="button" name="" value="看不清，换一张"></li>
	</ul>
</body>
</html>
<script type="text/javascript">
	window.onload=function(){
		var wz=document.getElementById('wz')
		var num
		var pic=""
		wz.onclick=function(){
			var img=""
				for(var i=0;i<4;i++){
					num=Math.floor(Math.random()*10)
					pic="<img src="D:\h资源\h资源\图\"+num+".jpg" alt="" />"
					img=img+pic
				}
				var oCode=document.getElementById('code')
				oCode.innerHTML=img
		}
	}

</script>
*{margin:0;padding: 0; list-style: none;}
body{
	background: #036; color: #fff; font-size: 24px;
}
ul{
	width: 756px;
	margin: 100px auto;
	clear: both;
}
ul li{
	float: left;
	width: 250px;
	height: 100px;
	line-height:100px;
	border: 1px solid #ccc;
	text-align: center;
}
span{
	display: inline-block;
	vertical-align: middle;
}
#wz{
	cursor: pointer;
}

11.7

<html>
<head>
<meta charset="utf-8">
<title>焦点图切换</title>
<link rel="stylesheet” type="text/css" href="D:\桌面\网页设计\9\7.css">
<script type="text/javascript" src="javascript/index.js"></script> 
</head>
<body>
<div class="banner">
<div class="banner pic” id="banner_pic">
<div class="current"><img src="images/01.jpg”alt="” /></div>
<div class="pic"><img src="images/02.jpg” alt="" /></div>
<div class="pic"><img src="images/03.jpg”alt="" /></div>
<div class="pic"><img src="images/04.jpg”alt="” /></div>
</div>
<ol id="button">
<li class="current"></li>
<li class="but"></li>
<li class="but"></11>
<li class="but"></li>
</ol>
</div>
</body>
</html>
@charset "utf-8";
body,ul，li，ol,dl,dd,dt，p,h1，h2,h3，h4, h5, h6，form, fieldset，legend,img{margin:0;border:0;padding:0;list-style:none;}
.banner{
width:1000px;
height:285px;
margin:13px auto 15px auto;
position:relative;
overflow: hidden
}
.banner .banner_pic .pic{display:none;}
.banner .banner_pic .current{display:block;}
.banner ol{
position:absolute;
left:50%;
bottom:6%
}
.banner ol .but{
float:left;
width:10px;
height:10px;
border:1px solid #2fafbc;
border-radius:50%;
margin-right:12px;
text-align:center;
line-height:22px;
background:#fff;
color:#2fafbc;
font-size:16px;
font-weight:bold;
opacity:0.5;
}
.banner ol li{cursor:pointer;}
.banner ol .current{
color:#fff;
background:#2fafbc;
float;left;
width:10px;
height:10px;
border:1px solid #2fafbc;
border-radius:50%;
margin-right:12px;
text-align:center;
line-height:22px;
font-size:16px;
font-weight:bold;
}