編譯器：Hbuilder（讀代碼中詳細注釋可易懂）
項目導航：
項目名稱實現功能
| 鼠標點擊事件 | 鼠標點擊按鈕“不好”，當點擊觸發時就會彈跳 |
| 強制勾選 | 一選中則不能取消 |
| 漂亮的跑馬燈 | 文字加速滾動和圖片滾動鼠標觸摸暫停 |
| 點擊按鈕換顏色 | 點擊不同的按鈕，覆蓋原來顏色，呈現新的顏色 |
| 簡單的搜索框 | 獲取光標后，框中提示消失；輸入內容后不會消失 |
| 中英文變換 | 點擊按鈕切換中英文 |
| 網頁字體顏色大小間距變換 | 四個經典的type，用下拉列表選擇字體類型，字體大小，背景顏色和字體間距 |
| 盒子碰撞檢測 | 在限定范圍內碰到邊框進行反彈 |
| 英雄點擊投票 | 點擊圖片投票，票數增加 |
| 網頁常用布局與超鏈接 | 套用常用的淘寶，京東網頁布局 |
（1）鼠標點擊事件
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>強制答應</title></head> <style>#div01{width: 250px;height: 50px;/*邊框solid實線*/border: 1px solid;left: 300px;top:300px;position: absolute;/*相對絕對定位*/}</style><body><div id="div01"><center>hello！請我麥當勞好不好？<!--換行--><br><!--設置兩個按鈕。--><!--onclick在鼠標點擊彈起之后觸發的事件--><!--onmousedown在鼠標按鍵按下去的瞬間觸發的--><!--比如我們習慣按下鼠標托至另外一個地方松開時候，onclick并不能觸發，只能用onmousedown--><input type="button"value="好"onclick="fun()"/><input type="button"value="不好"onmousedown="overs()"/></center></div></body>
</html>
<script type="text/javascript">function overs(){//隨機數var x=Math.floor(Math.random()*600);var y=Math.floor(Math.random()*600);//獲取div對象var div01=document.getElementById("div01");//div的位置發生變化div01.style.left=x+"px";div01.style.top=y+"px"; }function fun(){for(var i=0;i<=20;i++){//打開網頁//window.open("http://baidu.com");alert("真棒！下次繼續！");}}
</script>
Math.random()：產生一個[0，1)之間的隨機數；Math.random()*600即產生0-600的隨機數。
(int)Math.random()*600即產生0-600的隨機整數。
alert（“ ”）網頁彈窗使用。document.getElementById(“div01”)是獲取控件的ID值，獲取對象。
onclick在鼠標點擊彈起之后觸發的事件；onmousedown在鼠標按鍵按下去的瞬間觸發的事件。
window.open（）是執行函數體時跳轉鏈接。
（2）強制勾選
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--checked="checked"為默認選中--><input type="checkbox"id="ck01" checked="checked"onclick="fun01()"/>貪玩藍月 <input type="checkbox"id="ck02" checked="checked"onclick="fun02()"/>熱血傳奇 <input type="checkbox"id="ck03" />吃雞<!--按鈕--><input type="button"value="下載" /></body>
</html>
<!--腳本-->
<script type="text/javascript">
//javascript腳本
//function方法關鍵字
//該方法是使復選框選中后不能取消
function fun01()
{//獲取當前的復選框var ck01=document.getElementById("ck01");//復選框對象被選中時ck01.checked="checked";
}
function fun02()
{//獲取當前的復選框var ck02=document.getElementById("ck02");//復選框對象被選中時ck02.checked="checked";
}
</script>
checked="checked"為默認選中。
但js例面的點擊事件的函數中的ck01.checked="checked"即是無論是默認點中還是手動點中，一旦點中，則不可取消選擇。
（3）漂亮的跑馬燈
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>#na{width: 100%;height: 200%;border: 1px solid;}</style><body> <!--滾動標簽(方向和速度)--><marquee id="na"direction="left"scrollamount="80"><font id="f01"size="6"color="firebrick">渣渣輝在此！</font></marquee><input type="button" value="加速" onclick="adds()"/><marquee id="na02"direction="left"scrollamount="10"><!--onmouseover鼠標放上去時--><!--onmouseout鼠標離開時--><img src="img/img1.jpg"width="80px"height="80px" onmouseover="fun()"onmouseout="outs()"/><img src="img/asset.jpg"width="80px"height="80px" /><img src="img/曹操.jpg"width="80px"height="80px" /></marquee></body>
</html>
<script type="text/javascript">
function fun()
{//獲取滾動標簽var na=document.getElementById("na02");na.stop();
}
function outs()
{//獲取滾動標簽var na=document.getElementById("na02");na.start();
}
//加速scrollAmount滾動速度
function adds()
{var na=document.getElementById("na");na.scrollAmount = na.scrollAmount+40;
}
</script>
滾動標簽（跑馬燈）：marquee ；direction為滾動方向；scrollamount為滾動速度（一般常用的是這兩個）
onmouseover：鼠標放上去時觸發事件 ； onmouseout：鼠標離開時觸發事件
點擊加速按鈕可以按40的數值速度進行遞增。
（4）點擊按鈕變換顏色
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>點擊變換顏色</title></head> <style>#div01{width: 100%;height: 600px;border: 1px solid;}#div0101{width: 20%;height: 600px;border: 1px solid;float:left}#div0102{width: 79%;height: 600px;border: 1px solid;background-color: forestgreen;float:left;display: block;/*顯示*/}#div0103{width: 79%;height: 600px;border: 1px solid;background-color: yellowgreen;float:left;display: none;/*隱藏*/}#div0104{width: 79%;height: 600px;border: 1px solid;background-color: peru;float:left;display: none;/*隱藏*/}#div0105{width: 79%;height: 600px;border: 1px solid;background-color: brown;float:left;/*靠左*/display: none;/*隱藏*/} </style> <body><div id="div01"><!--左邊div--><div id="div0101"><input type="button" value="火影忍者"onclick="ones()"/><br><input type="button" value="海賊王"onclick="twos()"/><br><input type="button" value="名偵探柯南"onclick="threes()"/><br><input type="button" value="一拳超人"onclick="fourths()"/><br></div><!--右邊1div--><div id="div0102"></div><!--右邊2div--><div id="div0103"></div><!--右邊3div--><div id="div0104"></div><!--右邊4div--><div id="div0105"></div></div></body>
</html>
<script type="text/javascript">function ones(){//顯示document.getElementById("div0102").style.display="block";//隱藏document.getElementById("div0103").style.display="none";document.getElementById("div0104").style.display="none";document.getElementById("div0105").style.display="none";} function twos(){//顯示document.getElementById("div0103").style.display="block";//隱藏document.getElementById("div0102").style.display="none";document.getElementById("div0105").style.display="none";document.getElementById("div0104").style.display="none";}function threes(){//顯示document.getElementById("div0104").style.display="block";//隱藏document.getElementById("div0102").style.display="none";document.getElementById("div0105").style.display="none";document.getElementById("div0103").style.display="none"; } function fourths(){//顯示document.getElementById("div0105").style.display="block";//隱藏document.getElementById("div0104").style.display="none";document.getElementById("div0103").style.display="none";document.getElementById("div0102").style.display="none";}
</script>
div盒子里面的display: none;即為一開始就隱藏。
（5）搜索框
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>搜索框</title></head><body><center><!--onfocus獲取光標事件--><!--onblur失去光標事件--><input type="search" id="se"onblur="blurT()"onfocus="foc()"/><input type="button" value="搜索"/></center></body>
</html>
<script type="text/javascript">//窗體加載事件window.onload=function(){//獲取對象var ser = document.getElementById("se");ser.value="請搜索..."//修改字體顏色ser.style.color="rgba(202,208,210,0.5)"; }function foc(){//獲取搜索框對象var ser=document.getElementById("se");//TimesDay timesDay駝峰命名法//判斷輸入框是否等于提示（請搜索...）if(ser.value=="請搜索..."){//清空數據ser.value="";//修改字體顏色ser.style.color="black";}}function blurT(){//獲取當前搜索框對象var ser = document.getElementById("se");//如果沒有值就返回請搜索...if(ser.value.trim()==""){ser.value = "請搜索...";ser.style.color="rgba(202,208,210,0.5)";}}
</script>
onfocus獲取光標事件；onblur失去光標事件；
trim()方法是去除字符串的頭尾空格。
（6）中英文變換
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>語言變換</title></head><body><label onclick="Ch()">中文</label><label onclick="En()">English</label><br><label id="zh">賬號</label><input type="text" placeholder="請輸入賬號" /><br><label id="pwd">密碼</label><input type="password" placeholder="請輸入密碼"/><br><input type="button" value="確認" id="OK"/><input type="button" value="取消" id="cancel"/></body>
</html><script type="text/javascript">//工具方法function $(id){return document.getElementById(id);}//轉英文方法function En(){$("zh").innerText="ID";$("pwd").innerText="Password";$("OK").value="OK";$("cancel").value="cancel";}//轉中文方法function Ch(){$("zh").innerText="賬號";$("pwd").innerText="密碼";$("OK").value="確認";$("cancel").value="取消";}
</script>
innerText 為不識別標簽, 在獲取標簽內容時去除所有標簽，就是在控件中添加文字；
value獲取標簽的value屬性值，控件中的value屬性直接賦值成雙引號里面的東西。（一個小小的區別需要注意一下）
（7）字體顏色大小間距
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>body{background-image: url(img/img1.jpg);background-repeat: no-repeat;background-size: 100% 260px;background-color: aliceblue;}/*div沒有垂直居中*/#div01{width:70%;margin: auto;margin-top: 120px;background-color: white;height: 1200px;}#div02{width: 200px;height: 200px;border: 1px solid;position: fixed;/*絕對定位，隨滾動條滾動也不變*/right: 20px;bottom: 20px;}#div03{width: 50px;height:50px;border: 1px solid;position: fixed;/*絕對定位，隨滾動條滾動也不變*/left: 20px;top: 20px;z-index: 2;/*層（級別）*/}</style><body><div id="div01"><center>字體<!--select為下拉框--><select id="se01"onchange="fun01()"><option>楷體</option><option>宋體</option><option>仿宋</option><option>黑體</option></select>大小：<select id="se02"onchange="fun02()"><option>10px</option><option>15px</option><option>18px</option><option>20px</option></select>背景顏色：<input type="color" id="co" onchange="fun03()"/>字體間隔：<select id="se04" onchange="fun04()"><option>5px</option><option>8px</option><option>10px</option><option>15px</option><option>18px</option><option>22px</option> </select> </center><br><center id="cen"><!--h1一級標題--><h1>憫農</h1><br><!--p為加粗--><p>鋤禾日當午</p><p>汗滴禾下土</p><p>誰知盤中餐</p><p>粒粒皆辛苦</p></center></div> </body>
</html>
<script type="text/javascript">function fun01(){//獲取下拉框的值var se01=document.getElementById("se01");//獲取center居中標簽的對象var cen=document.getElementById("cen");//修改字體類型,value為字體類型cen.style.fontFamily=se01.value; }function fun02(){//獲取下拉框的值var se02=document.getElementById("se02");//獲取center居中標簽的對象var cen=document.getElementById("cen");//修改字體大小,value為字體類型cen.style.fontSize=se02.value; }function fun03(){//獲取下拉框的值var co=document.getElementById("co");//獲取center居中標簽的對象var div01=document.getElementById("div01");//修改盒子的背景顏色,value為顏色字體div01.style.backgroundColor=co.value; }function fun04(){//居中標簽var cen=document.getElementById("cen");//獲取下拉框的值var sel=document.getElementById("se04");//調整行間距cen.style.letterSpacing=sel.value;}
</script>
select為下拉選擇列表，onchange()是點擊選擇的方法。
（8）碰撞檢測
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>碰撞與絕對布局</title></head><style> #div02{width: 200px;height: 200px;border: 1px solid;position: fixed;/*絕對定位*/right: 20px;/*右邊*/bottom: 20px;/*底邊*/}#div03{width: 200px;height: 200px;border: 1px solid;position: fixed;/*絕對定位*/left: 20px;/*左邊*/top: 20px;/*頂邊*/z-index: 2;/*層*/}</style> <body> <div id="div02"><input type="image" src="img/WelcomeScan.jpg"width="200px"height="200px"/></div> <div id="div03"><input type="image" src="img/WelcomeScan.jpg"width="200px"height="200px"/></div></body>
</html>
<script type="text/javascript">//窗體加載事件window.onload=function(){//計時器setInterval(moves,20);} //xy軸方向var xf = 1;//1向右-1向左var yf = 1;//1向下-1向上function moves(){//獲取圖片對象var div=document.getElementById("div03"); //獲取div左邊距離var left = div.offsetLeft;//獲取div頂部距離var top = div.offsetTop; if(left>600)xf = -1;if(left < 0)xf = 1;if(top > 500)yf = -1;if(top < 0)yf = 1; //設置div左邊頂距離div.style.left = (left + 2*xf)+"px";div.style.top = (top + 2*yf)+"px";}
</script>
window.οnlοad=function()，窗口（即頁面）加載完成后 裝載（執行） function{} 這個函數 ，而在該項目中就是網頁一打開就開始計時。
offsetLeft是離網頁的左邊距離相距多少，offsetTop是離網頁的頂部距離相距多少。
setInterval(moves,20)的意思就是每隔20ms移動一次。
（9）投票系統
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>.imgx/*類樣式.開始*/{width: 150px;height: 200px;}.mimgx{width: 50px;height: 50px;}</style> <body><center><!--class類樣式--><img src="img/半月.png" class="imgx"onclick="adds('m01','f01')"/><img src="img/安其拉.png" class="imgx"onclick="adds('m02','f02')"/><img src="img/扁鵲.png" class="imgx"onclick="adds('m03','f03')"/><img src="img/白起.png" class="imgx"onclick="adds('m04','f04')"/></center><br><!--在開始標簽里面樣式內嵌樣式有優先權，優先于class,跟id--><div style="width: 100%;height: 400px;text-align: center;"><img src="img/半月小圖.jpg" class="mimgx"/><!--刻度尺--><meter id="m01" max="100"value="0"></meter><font id="f01">0</font>票<br><!--刻度尺2--><img src="img/安其拉小圖.jpg" class="mimgx"/><meter id="m02" max="100"value="0"></meter><font id="f02">0</font>票<br><!--刻度尺3--><img src="img/扁鵲小圖.jpg" class="mimgx"/><meter id="m03" max="100"value="0"></meter><font id="f03">0</font>票<br><!--刻度尺4--><img src="img/白起小圖.jpg" class="mimgx"/><meter id="m04" max="100"value="0"></meter><font id="f04">0</font>票<br></div></body>
</html>
<script type="text/javascript">function adds(mid,pid){//獲取刻度尺對象var kd = document.getElementById(mid);//獲取票數對象var pid = document.getElementById(pid);//將票數字符串轉成數字//font需要用innerText獲取值var pids = parseInt(pid.innerText);//刻度尺加票kd.value = kd.value + 10;//票數+1pid.innerText = pids + 10;if(pid.innerText>100){pid.innerText = pids;alert("票數已滿！");}}
</script>
這里值得注意的一個地方是刻度尺的額度在meter max="100"時就已經設定好，而數字增長沒有額度，因此需要添加一個if判斷條件，若大于100，則彈出提示并停止。
其中adds(mid,pid)mid為刻度尺的id，pid為文字的id。因為用的是font獲取的數值，所以要用pids= parseInt(pid.innerText),則pids才為數值類型。
（10）網頁常用布局與超鏈接
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>網頁布局與鏈接</title></head> <style>#div01{width: 100%;height: 650px;border: 1px solid;}#div0100{width: 100%;height: 50px;border: 1px solid;}#div0101/*頂部第二個框*/{width: 100%;height: 150px;border: 1px solid;/*背景圖片*/background-image: url(img/timg.jpg);/*背景大小*/background-size: 100% 200%;/*背景狀態 no-repeat不平鋪*/background-repeat: no-repeat;} #div0102{width: 20%;height: 447px;border: 1px solid;float: left;/*浮動靠左*/}#div010201,#div010202,#div010203,#div010204{width: 100%;height: 24.5%;border: 1px solid;float: left;/*浮動靠左*/} #div0103{width: 60%;height: 447px;border: 1px solid;float: left;/*浮動靠左*/}#div0104{width: 19%;height: 447px;border: 1px solid;float: left;/*浮動靠左*/}#div010401,#div010402,#div010403,#div010404{width: 100%;height: 24.5%;border: 1px solid;float: left;/*浮動靠左*/}a:link/*鼠標未放上去*/{text-decoration: none;}a:hover/*鼠標放上去時候*/{text-decoration:underline;color: red;font-family: "楷體";/*類型*/font-size: 18px;/*大小*/}#div02{width:100%;height: 400px;border: 1px solid;background-color:chocolate;}#div03{width:100%;height: 400px;border: 1px solid;background-color:darkslategray;}#div04{width:100%;height: 400px;border: 1px solid;background-color: slateblue;}</style> <body><!--最大div--><div id="div01"><!--頂部0div--><div id="div0100"></div><!--頂部div--><div id="div0101"></div><!--左邊div--><div id="div0102"><!--左邊div010201--><div id="div010201"><ul><!--ul無序列表 li列表項加超鏈接標簽--><li><a href="#yf">衣服</a></li><li><a href="#tx">T恤</a></li><li><a href="#xz">鞋子</a></li></ul></div><!--左邊div010202--><div id="div010202"><!--有序列表--><ol type="I"><li>海賊王</li><li>火影忍者</li><li>叮當</li></ol></div><!--左邊div010203--><div id="div010203"></div><!--左邊div010204--><div id="div010204"></div></div><!--中間div--><div id="div0103"></div><!--右邊div--><div id="div0104"><!--右邊01div--><div id="div010401"></div><!--右邊02div--><div id="div010402"></div><!--右邊03div--><div id="div010403"></div><div id="div010404"></div></div></div><!--底部02--><div id="div02"><!--錨記--><a name="yf">衣服</a></div><!--底部03--><div id="div03"><a name="tx">T恤</a></div><!--底部04--><div id="div04"><a name="xz">鞋子</a></div> </body>
</html>
ul為無序列表；ol為有序列表；
一般遇到多個盒子有相同的位置或右聯系，則可用一個大盒子囊括在外面較好操作。
總結
以上是生活随笔為你收集整理的web前端开发入门十个小项目（Hbuilder）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
