簡單案例
案例一：完成“鼠標經過切換圖片”的案例
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/images/jd1.png" id="demo" />
<script>
var demo = document.getElementById("demo");
demo.onmouseover = function(){
demo.src = "img/images/jd2.png"
}
demo.onmouseout = function(){
demo.src = "img/images/jd1.png"
}
</script>
</body>
</html>
案例二：完成“百度換膚效果”的案例
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
body{
background: url(img/1.jpg) top center;
}
.box{
height: 200px;
background: rgba(255,255,2555,.3);
text-align: center;
padding-top: 50px;
}
</style>
<script>
/* window.οnlοad=function(){//頁面加載完畢之後，放在任何地方
內部放js
}*/
window.onload=function(){
/*var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var demo3 = document.getElementById("demo3");
demo1.onclick = function(){
document.body.style.backgroundImage="url(img/1.jpg)";
}
demo2.οnclick= function(){
document.body.style.backgroundImage="url(img/2.jpg)";
}
demo3.onclick = function(){
document.body.style.backgroundImage="url(img/3.jpg)";
}*/
var demo = document.getElementsByName("demo");
demo[0].onclick = function(){
document.body.style.backgroundImage="url(img/1.jpg)";
}
demo[1].onclick= function(){
document.body.style.backgroundImage="url(img/2.jpg)";
}
demo[2].onclick = function(){
document.body.style.backgroundImage="url(img/3.jpg)";
}
}
</script>
</head>
<body>
<div class="box">
<img src="img/1.jpg" alt="" width="150" name = "demo"/>
<img src="img/2.jpg" alt="" width="150" name = "demo"/>
<img src="img/3.jpg" alt="" width="150" name = "demo"/>
</div>
</body>
</html>
案例三：完成“鼠標展示”的案例
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
#box{
height:70px;
width: 360px;
padding-top: 360px;
border:1px solid #ccc;
margin: 100px auto;
overflow: hidden;
background: url(img/01big.jpg) no-repeat;
}
#box li{
float: left;
}
#box ul{
overflow: hidden;
border-top: 1px solid #ccc;
}
</style>
<script>
window.onload = function(){
var box = document.getElementById("box");
function mfn(liid,bg){
var obj = document.getElementById(liid);
obj.onmouseover = function(){
box.style.backgroundImage=bg;
}
}
mfn("li01","url(img/01big.jpg)");
mfn("li02","url(img/02big.jpg)");
mfn("li03","url(img/03big.jpg)");
mfn("li04","url(img/04big.jpg)");
mfn("li05","url(img/05big.jpg)");
}
</script>
</head>
<body>
<div id="box">
<ul>
<li id="li01" ><img src="img/01.jpg" alt="" name="bg"/></li>
<li id="li02"><img src="img/02.jpg" alt="" name="bg"/></li>
<li id="li03"><img src="img/03.jpg" alt="" name="bg" /></li>
<li id="li04"><img src="img/04.jpg" alt="" name="bg" /></li>
<li id="li05"><img src="img/05.jpg" alt="" name="bg" /></li>
</ul>
</div>
</body>
</html>
案例四：完成“表單驗證”的案例；改進並完成對密碼進行確認操作，參考“註冊.html”
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>註冊頁面</title>
<script type="text/javascript">
//驗證用戶名
function focus_username(){
var divobj = document.getElementById("result_username");
divobj.innerHTML="(請輸入你的用戶名)";
divobj.style.color="#CCCCCC";
}
function blur_username(){
var inputobj = document.form1.username;
var divobj = document.getElementById("result_username");
if(inputobj.value==""){//當用戶名爲空
divobj.innerHTML = "(對不起，用戶名不能爲空)";
divobj.style.color = "red";
return false;
}else if(inputobj.value.length<5 || inputobj.value.length>20){
divobj.innerHTML = "(對不起，用戶名長度只能爲5-20個字符之間)";
divobj.style.color = "red";
return false;
}else{
divobj.innerHTML = "<img src='img/ok.gif' />";
return true;
}
}
//驗證密碼
function focus_userpwd(){
var divobj = document.getElementById("result_userpwd");
divobj.innerHTML="(請輸入你的密碼)";
divobj.style.color="#CCCCCC";
}
function blur_userpwd(){
var inputobj = document.form1.userpwd;
var divobj = document.getElementById("result_userpwd");
if(inputobj.value==""){//當用戶名爲空
divobj.innerHTML = "(對不起，密碼不能爲空)";
divobj.style.color = "red";
return false;
}else if(inputobj.value.length<5 || inputobj.value.length>20){
divobj.innerHTML = "(對不起，密碼長度只能爲5-20個字符之間)";
divobj.style.color = "red";
return false;
}else{
divobj.innerHTML = "<img src='img/ok.gif' />";
return true;
}
}
//再次輸入密碼確認
function focus_confirm(){
var divobj = document.getElementById("result_confirm");
divobj.innerHTML = "(請再次輸入密碼)";
divobj.style.color="#CCCCCC";
}
function blur_confirm(){
var inputobjco = document.form1.confirm;
var divobj = document.getElementById("result_confirm");
var inputobjpasswd = document.form1.userpwd;
if(inputobjpasswd.value==inputobjco.value){
divobj.innerHTML = "<img src='img/ok.gif' />";
return true;
}else{
divobj.innerHTML = "(兩次密碼不一致，請重新輸入)";
divobj.style.color="red";
return false;
}
}
function checkEorm(){
var username = blur_username();
var userpwd = blur_userpwd();
var confirm = blur_confirm();
if(username && userpwd && confirm){
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="https://www.csdn.net/" onsubmit="return checkEorm()">
<table width="600px" border="1"m bordercolor="#ccc" rules="all" align="center" cellpadding="5">
<tr>
<th colspan="3" bgcolor="crimson">新用戶註冊</th>
</tr>
<tr>
<td width="80px" align="right">用戶名</td>
<td><input type="text" name="username" onfocus="focus_username()" onblur="blur_username()" /></td>
<td width="350"><div id="result_username"></div></td>
</tr>
<tr>
<td width="80" align="right">密碼</td>
<td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()"/></td>
<td><div id="result_userpwd"></div></td>
</tr>
<tr>
<td width="80" align="right">密碼確認</td>
<td><input type="password" name="confirm" onfocus="focus_confirm()" onblur="blur_confirm()"/></td>
<td><div id="result_confirm"></div></td>
</tr>
<tr>
<td> </td>
<td colspan="2"><input type="submit" value="註冊" /></td>
</tr>
</table>
</form>
</body>
</html>
案例五：結合改進的“表單驗證”優化“模態框”案例（自行設計）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//鼠標停留邊顏色
</script>
<style type="text/css">
.main{
text-align: center;
}
#div1{
position: fixed;
width: 1080px;
height: 608px;
background:url(img/QQ背景.jpg);
align-content: center;
left: 20%;
top: 0%;
}
#div2{
margin-left: 140px;
margin-top:3px;
float: left;
}
#div3{
width: auto;
margin-left:300px ;
margin-top:20px;
float: left;
}
#div4{
width: 1080px;
height: 100px;
}
form{
}
table{
width: auto;
margin: 10px;
font-size: 25px;
font-family:courier;
}
#div5{
margin-left: 200px;
width: 500px;
height: 100px;
}
#div5_1{
width: 230px;
height: 55px;
margin-left: 8px;
float: left;
font-size: 50px;
font-family:;
}
#div5_2{
//margin-left: 90px;
float: right;
width: 260px;
height: 55px;
color: crimson;
font-size: 20px;
}
#div5_3{
font-size: 30px;
font-family:"bradley hand itc";
color:antiquewhite;
}
#div6{
margin-right: 20px;
float: right;
width: 700px;
height: 370px;
}
#div6_1{
margin-top: 10px;
float: left;
}
#div6_2{
margin-top: 10px;
float: right;
}
#mask{
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
position: fixed;
top: 0;
left: 0;
display: none;
}
#box{
width: 500px;
height: 350px;
background-color:cornflowerblue;
position: fixed;
top: 50%;
left: 50%;
margin: -250px 0 0 -200px;
display: none;
}
#box span{
position: absolute;
right: 10px;
width: 15px;
height: 15px;
font-size: 30px;
cursor: pointer;
}
#box-1{
margin-left: 200px;
float: left;
}
#box-2{
width: 495px;
height: 180px;
margin-top: 90px;
background-color:floralwhite;
}
#box-2-1{
margin: 1px;
}
#box-2-2-1{
width: 100px;
height: 25px;
float: left;
margin-left: 40px;
}
#box-3{
float: left;
margin-left: 120px;
margin-top: 20px;
width: 237px;
height: 38px;
}
</style>
<script>
//菜單鼠標經過特效
function omsu(id){
var id = document.getElementById(id);
id.style.backgroundColor="azure"
}
function omst(id){
var id = document.getElementById(id);
id.style.background="none";
}
//點擊登錄,產生頁面
function dll(){
var dl = document.getElementById("dl");
var mask = document.getElementById("mask");
var box = document.getElementById("box");
mask.style.display = "block";
box.style.display = "block";
//alert("的好時機");
}
//點擊×號消除頁面
function cc(){
var clone_all = document.getElementById("clone_all");
mask.style.display = "none";
box.style.display = "none";
}
//驗證用戶名
function focus_username(){
var divobj = document.getElementById("result_username");
divobj.innerHTML="請輸入你的賬號";
divobj.style.color="#CCCCCC";
}
function blur_username(){
var inputobj = document.form1.username;
var divobj = document.getElementById("result_username");
if(inputobj.value==""){//當用戶名爲空
divobj.innerHTML = "用戶名不能爲空";
divobj.style.color = "red";
return false;
}else if(inputobj.value.length<5 || inputobj.value.length>20){
divobj.innerHTML = "賬號必須5-20位";
divobj.style.color = "red";
return false;
}else{
divobj.innerHTML = "<img src='img/ok.gif' />";
return true;
}
}
//驗證密碼
function focus_userpwd(){
var divobj = document.getElementById("result_userpwd");
divobj.innerHTML="請輸入你的密碼";
divobj.style.color="#CCCCCC";
}
function blur_userpwd(){
var inputobj = document.form1.userpwd;
var divobj = document.getElementById("result_userpwd");
if(inputobj.value==""){//當用戶名爲空
divobj.innerHTML = "密碼不能爲空";
divobj.style.color = "red";
return false;
}else if(inputobj.value.length<5 || inputobj.value.length>20){
divobj.innerHTML = "密碼必須5-20位";
divobj.style.color = "red";
return false;
}else{
divobj.innerHTML = "<img src='img/ok.gif' />";
return true;
}
}
function checkEorm(){
var username = blur_username();
var userpwd = blur_userpwd();
if(username && userpwd){
window.location.href="https://im.qq.com/";
}else{
return false;
}
}
</script>
</head>
<body>
<div id="div1">
<div id="mask"></div>
<div id="box">
<div id="box-1"><img src="img/登錄QQ企鵝標誌.JPG"> </div>
<span id="clone_all" onclick="cc()">×</span>
<div id=box-2>
<div id="box-2-1">
<br />
<form name="form1" method="post" >
<table id="table2">
<tr>
<td>賬號:<input onfocus="focus_username()" name="username" onblur="blur_username()" ></td>
<td id="result_username"></td>
</tr>
<tr>
<td>密碼:<input type="password" onfocus="focus_userpwd()" onblur="blur_userpwd()" name="userpwd"></td>
<td id="result_userpwd" ></td>
</tr>
</table>
</form>
</div>
<div id="box-2-2">
<div id="box-2-2-1"><input type="checkbox">自動登錄</div>
<div id="box-2-2-1"><input type="checkbox">記住密碼</div>
<div id="box-2-2-1"><input type="checkbox">找回密碼</div>
</div>
</div>
<div id="box-3" onclick="checkEorm()"><img src="img/登錄按鈕.JPG"></div>
</div>
<div id = "div4">
<div id="div2">
<form>
<table>
<tr>
<td ><img src="img/QQ標誌.JPG"</td>
<td id="td1" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">首頁</td>
<td id="td2" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">下載</td>
<td id="td3" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">動態</td>
</tr>
</table>
</form>
</div>
<div id="div3">
<form>
<table cellpadding="5">
<tr>
<td id="td4" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">註冊</td>
<td id="td5" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">QQ會員</td>
<td id="td6" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">QQ安全</td>
</tr>
</table>
</form>
</div>
</div>
<div id="div5">
<div id = "div5_1">QQ·PC版</div>
<div id ="div5_2" ><br>點擊這裏登錄：<input type="button" value="登錄" onclick="dll()" ></div>
<div id="div5_3">全新改版，給你煥然一新的感覺!!!</div>
</div>
<div id="div6">
<div id="div6_1"><img height="350px" width="300px" src="img/QQ界面.JPG"/></div>
<div id="div6_2"><img height="350px" width="400px" src="img/聊天界面.JPG" /></div>
</div>
</div>
</body>
</html>
案例六：完成“二級聯動菜單”的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var arr_province =["請選擇省市","北京市","上海市","重慶市","深圳市","廣東省"];
var arr_city = [
["請選擇城市/地區"],
["東城區","西城區"],
["寶山區","長寧區"],
["和平區","和平區","河北區"],
["俞中區"],
["福田區"],
["廣州市"]
];
//二級聯動初始化
function initt(){
var province = document.form1.province;
var city = document.form1.city;
var len = arr_province.length
//alert(city)
province.length=len;
for(var i=0;i<len;i++){
province.options[i].text = arr_province[i];
province.options[i].value= arr_province[i];
}
var index=2;
province.selectedIndex = index;
var len = arr_city[index].length;
city.length=len;
for(var i=0; i<len;i++){
city.options[i].text = arr_city[index][i];
city.options[i].value= arr_city[index];
}
}
function chage_select(index){
//alert(index);
var city = document.form1.city;
var len = arr_city[index].length;
//alert(len);
city.length=len;
for(var i=0; i<len;i++){
city.options[i].text = arr_city[index][i];
city.options[i].value= arr_city[index][i];
}
}
</script>
</head>
<body onload="initt()">
<form name="form1">
省份：
<select name="province" onchange="chage_select(this.selectedIndex)"></select>
城市：
<select name="city"></select>
</form>
</body>
</html>
案例七：完成“星星案例”的案例
代碼：
<!DOCTYPE html>
<html onclick="star()">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#span1{
border: 1px solid red;
width: 100px;
display: inline-block;
height: 20px;
overflow: hidden;
}
#span2{
display: inline-block;
width: 0px;
height: 20px;
}
</style>
<script>
var count=0;
var dingshiqi;
var shijian=0;
var gametime;
window.onload = init;
function init(){
document.body.bgColor="#6495ED";
}
function star(){
var obj = document.createElement("img");
obj.src="img/星星案例/xingxing.gif";
var w=Math.floor(Math.random()*(90-30+1))+30;
obj.width=w;
//var x= event.clientX;
//var y =event.clientY;
var x = Math.floor(Math.random()*1300)+30;
var y = Math.floor(Math.random()*500)+30;
obj.style.position="absolute";
obj.style.top = y +"px";
obj.style.left = x+"px";
document.body.appendChild(obj);
obj.onclick=removestar;
count++;
countxingxing();
document.getElementById("span2").style.width=count*5+"px";
document.getElementById("span2").style.backgroundColor="red";
}
function removestar(){
this.parentNode.removeChild(this);
count--;
countxingxing();
}
function startxingxing(){
window.setInterval("star()",1000);
gametime=window.setInterval("youxishijian()",1000);
}
//暫停遊戲
function zanting(){
alert("暫停遊戲");
}
//星星個數
function countxingxing(){
var shu =document.getElementById("count");
if(count>20){
alert("遊戲結束");
window.clearInterval(dingshiqi);
window.clearInterval(gametime);
}
shu.innerHTML=count+"個星星";
}
//記錄遊戲時間
function youxishijian(){
var obj = document.getElementById("jishi");
shijian++;
obj.innerHTML="遊戲進行"+shijian+"秒";
}
</script>
</head>
<body>
<span id= "count">0個星星</span>
<input type="button" value= "點擊開始遊戲" onclick="startxingxing()"/>
<input type="button" value="點擊暫停遊戲" onclick="zanting()"/>
<span id="jishi">遊戲進行0秒</span>
<span id="span1"><span id="span2"></span></span>
</body>
</html>
案例八：完成“圖片的切換”的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 600px;
border:1px solid red;
overflow: hidden;
}
#img1{
float: left;
}
#ull{
float: right;
margin: 0px;
padding: 0px;
margin: 0px 30px 0 0;
}
#ull li{
list-style: none;
border: 1px solid gray;
padding: 0px;
width: 30px;
height: 20px;
margin: 6px;
line-height: 20px;
text-align: center;
}
</style>
<script>
var n=1;//圖片標記數
var dingshiqi;//圖片動定時器
window.onload=init;
function init(){
dingshiqi = window.setInterval("tupian()",1000);
beijing= document.getElementById("li1");
beijing.style.backgroundColor="orange";
}
//換圖片函數
function tupian(){
var obj = document.getElementById("img1");
n++;
if(n>=7){
n=1;
}
obj.src = "img/星星案例/dd_scroll_"+n+".jpg";
for(var i=1;i<=6;i++){
var li1=document.getElementById("li"+i);
li1.style.backgroundColor="";
}
beijing = document.getElementById("li"+n);
beijing.style.backgroundColor="orange";
}
//鼠標放上停止圖片函數
function stoptupian(){
window.clearInterval(dingshiqi);
}
//鼠標離開圖片繼續動的函數
function dongtupian(){
dingshiqi=window.setInterval("tupian()",1000);
}
//鼠標放到li上停止圖片查看指定的函數
function tingtupian(i,lin){
var obj = document.getElementById("img1");
//該表對象src屬性換圖片
n=i;
obj.src="img/星星案例/dd_scroll_"+n+".jpg";
//清除定時器
window.clearInterval(dingshiqi);
huanbeijing(lin);
}
//讓定時器繼續換圖片
function jixu(){
dingshiqi= window.setInterval("tupian()",1000);
}
function huanbeijing(lin){
for(var m=1;m<=6;m++){
var li1 = document.getElementById("li"+m);
li1.style.backgroundColor="";
}
li1.style.backgroundColor="orange";
}
</script>
</head>
<body>
<img id="img1" src="img/星星案例/dd_scroll_1.jpg" onmouseout="dongtupian()" onmouseover="stoptupian()">
<ul id="ull">
<li id="li1" onmouseover="tingtupian(1,this)" onmouseout="jixu()">1</li>
<li id="li2" onmouseover="tingtupian(2,this)" onmouseout="jixu()">2</li>
<li id="li3" onmouseover="tingtupian(3,this)" onmouseout="jixu()">3</li>
<li id="li4" onmouseover="tingtupian(4,this)" onmouseout="jixu()">4</li>
<li id="li5" onmouseover="tingtupian(5,this)" onmouseout="jixu()">5</li>
<li id="li6" onmouseover="tingtupian(6,this)" onmouseout="jixu()">6</li>
</ul>
</body>
</html>
案例九：計時器
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div{
font-size: 60px;
margin:0 auto;
width: 900px;
border: 1px solid red;
text-align: center;
}
</style>
<script type="text/javascript">
var n1=window.setInterval("fn()",5000);
function fn(){ //顯示時間函數
var d1=new Date;
var obj=document.getElementById("div");
obj.innerHTML=d1.toLocaleDateString();
}
function qingchu(){
window.clearInterval(n1);
}
function jixu(){
n1=window.setInterval("fn()",1000);
}
window.setTimeout("qingchu()",600);
</script>
</head>
<body>
<div id="div">
<input type="button" value="清除定時器" onclick="qingchu()">
<input type="button" value="繼續定時器" onclick="jixu()">
</div>
</body>
</html>
案例十：完成“文件格式驗證”的案例
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="file" name="" id="File"/><span></span>;
</body>
</html>
<script>
var file = document.getElementById("File");
file.onchange = function(){
var path = this.value;//得到現在的文件路徑
var suxxif = path.substr(path.lastIndexOf(".")).toUpperCase();
if(suxxif == ".JPG" || suxxif == ".PNG"){
this.nextSibling.innerHTML="格式正確";
}else{
this.nextSibling.innerHTML = "格式錯誤的";
}
}
</script>
案例十一：完成“左右輪播圖”的案例
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,ul,ol,li,img{margin: 0;padding: 0;list-style: none;}
#box{width: 490px;
height: 170px;
padding: 5px;
position: relative;
border: 1px solid #ccc;
margin: 100px auto 0;
overflow: hidden;
}
.ad{
width: 490px;
height: 170px;
overflow: hidden;
position: relative;
}
#box img{
width: 490px;
}
.ad ol {
position: absolute;;
right: 10px;
bottom: 10px;
}
.ad ol li{
width: 20px;
height: 20px;
line-height: 20px;
border: 1px solid #ccc;
text-align: center;
background: #fff;
float: left;
margin-right: 10px;
cursor: pointer;
display:inline
}
.ad ol li.current{
background: yellow;
}
.ad ul li{
float: left;
}
.ad ul{
position: absolute;
top: 0;
width: 2940px;
}
.ad ul li.current{
display: block;
}
#arr{
display: none;
}
#arr span{
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top:50%;
margin-top:-20px ;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑體';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right{
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div id="box" class=""all">
<div class="ad">
<ul id="imgs">
<li><img src="img/ig1/1.jpg" /></li>
<li><img src="img/ig1/2.jpg" /></li>
<li><img src="img/ig1/3.jpg" /></li>
<li><img src="img/ig1/4.jpg" /></li>
<li><img src="img/ig1/5.jpg" /></li>
</ul>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script>
function $(id){return document.getElementById(id)}
var box = document.getElementById("box");
box.onmouseover = function(){
$("arr").style.display = "block";
}
box.onmouseout = function(){
$("arr").style.display = "none"
}
$("right").onclick = function(){
target -=490;
}
$("left").onclick = function(){
target +=490;
}
//緩動動畫
var leader = 0,target = 0;
setInterval(function(){
if(target >=0){
target = 0;
}else if(target <= -1960){
target = -1960;
}
leader = leader + (target - leader)/10;
$("imgs").style.left = leader + "px";
},30)
</script>
</body>
</html>
