1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript程序</title>
</head>
<body>
<p>第一个Javascript程序<p>
</body>
</html>
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('成立')
}
</script>
</body>
</html>
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<1000;i+=2){
sum=sum+i
}
alert("1000以内的所有奇数和："+sum)
</script>
s</body>
</html>
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>
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">
var btn=document.getElementById("save")
btn.onclick=function(){
alert("轻松学习javascript事件")
}
</script>
6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图形随机验证码</title>
</head>
<body>
<ul>
<li>验证码</li>
<li><input type="text" name="textfield" type="text" id="text" size="10" style="height: 35px" vertical-align:middle"/>
<span id="code">
<img src="images/1.pgn" alt="" /><img src="images/2.pgn" alt=""/><img src="images/3.pgn"/><images/4.pgn"alt=""/>
</span>
</li>
<li id="wz"><input type="button" value="看不清，换一张"></li>
</ul>>
</body>
</html>
<style type="text/css">
*{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;}
</style>
7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>焦点图切换</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" cri="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"></li>
<li class="but"></li>
</ol>
</div>
</body>
</html>
