企業實訓收穫之--web前端設計
阿新 • • 發佈：2019-01-26
這周系裡安排了企業實訓，該企業是北京金源萬博公司，旗下兩個子公司一個是開發接專案的，一個是IT培訓的。這兩天給我們上課的是開發部的一個技術人員。他這兩天給我們主要講的是web前端的設計。下面來和大家分享一下這兩天的收穫。
任務一：點選標題，使隱藏內容下滑出現。
這裡其實沒什麼，就是一些佈局，他的特效實現關鍵在於使用了JavaScript包中的slidedown（）這個方法。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>廊坊師範學院</title> <meta name="description" content="廊坊師範學院計算機系"/> <meta name="keywords" content="廊坊，計算機，廊坊師範學院"/> <style> div{width:400px;margin:0 auto; border:1px solid #ddd;padding:10px;} h3{font-size:16px;cursor:pointer;} p{font-size:14px;display:none;} </style> </head> <body> <div> <h3>學習WEB前端需要什麼基礎嗎？</h3> <p>不需要，我們都是從零基礎開始講課。不需要，我們都是從零基礎開始講課。 不需要，我們都是從零基礎開始講課。不需要，我們都是從零基礎開始講課。不需要，我們都是從零基礎開始講課。 </p> </div> <script type="text/javascript" src="j.js"></script> <script> $('h3').click(function(){ $('p').slideDown(700);// slow normal fast time }) </script> </body> </html>
效果：
通過這次任務，學會了初級的Html程式碼，裡面是一個簡單的css+div+js的程式碼，比較容易理解。在實現特效的同時，也體會到js的強大，如果沒有js的加密檔案，要多出很多倍的程式碼才能完成這個任務。
任務二、點選文字連結，以淡入效果出現彈出層；點選關閉按鈕，彈出層以淡出效果消失。
效果：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>彈出層</title> <style> div.country{width:613px;margin:0 auto;position:absolute; top:50%; margin-top:-270px;left:50%;margin-left:-306px;z-index:3; display:none;} .close{background:url(images/fancybox.png) no-repeat -42px 0px;display:block; width:30px; height:30px;position:absolute;top:-10px;right:-10px;z-index:3;} .middle{position:absolute;width:100%;height:100%;background:#000;top:0px;left:0px;filter:alpha(opacity=30);opacity:0.3;z-index:2;display:none;} </style> </head> <body> <a href="#" id="select_country">Select Country</a> <div class="country"> <a href="javascript:;" class="close"></a> <img src="images/countries.png" width="613" height="541" alt="country" /> </div> <div class="middle"></div> <script type="text/javascript" src="j.js"></script> <script> $('.middle').height($(window).height()).css('opacity','0.3') $('#select_country').click(function(){ $('.middle').fadeIn(700); $('.country').fadeIn(1000); return false; }) $('.close').click(function(){ $('.middle').fadeOut(800); $('.country').fadeOut(700); }) </script> </body> </html>
這個任務中將整個頁面用三個DIV分成三層，並通過新增超連結來載入本地的圖片來設計介面，包括圖片的居中、絕對位置等，它擁有更加複雜的css樣式，而且通過呼叫JavaScript檔案中的淡入淡出的特效使效果做的很絢麗。
任務三、通過阿賈克斯檢測使用者名稱是否存在
效果：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>使用者註冊</title> </head> <body> <form method="POST" action=""> <table> <tr> <td>賬號:</td> <td><input type="text" name="username" id="username" /></td> <td id="user_info">賬號由5-20位數字、字母、下劃線組成、以字母開頭</td> </tr> <tr> <td>密碼:</td> <td><input type="password" name="password" id="password" /></td> <td id="pwd_info"></td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" name="register" value="註冊" /> </td> </tr> </table> </form> <script type="text/javascript" src="j.js"></script> <script> $('#username').blur(function(){ var user = $(this).val(); // 獲取使用者輸入的賬號 if(user.match(/^\s*$/)) { $('#user_info').html('賬號不能為空'); return false; } if(!user.match(/^[a-zA-Z]\w{4,19}$/)) { $('#user_info').html('賬號格式不正確'); return false; } $.get('users.html',{k:Math.random()},function(result){ if(result == 0) { $('#user_info').html('該使用者已經被註冊~請換一個吧'); return false; } else if(result == 1) { $('#user_info').html('恭喜！~該使用者可以註冊'); return false; } else { alert(result); } }) }) </script> </body> </html>
該任務通過呼叫JavaScript檔案中的方法（如下）實現對HTML，PHP，等檔案的讀取。
$.get('users.html',{k:Math.random()},function(result){
if(result == 0)
{
$('#user_info').html('該使用者已經被註冊~請換一個吧');
return false;
}
else if(result == 1)
{
$('#user_info').html('恭喜！~該使用者可以註冊');
return false;
}
else
{
alert(result);
}
})
還有一點特別說明的是今天接觸了正則表示式，這裡就不細說了。大家點選自己可以瞭解一下，很有意思的知識。