JavaWEB開發03——JS
今日任務
使用JS完成頁面定時彈出廣告
使用JS完成表單的校驗
使用JS完成表格的隔行換色
使用JS完成複選框的全選效果
使用JS完成省市的聯動效果
JS控制下拉列表左右選擇
教學導航
- 掌握JS中的BOM對象
- 掌握JS中的經常使用事件
- 掌握JS中的經常使用DOM操做
- 瞭解JS中的內置對象
上一次內容進行復習:javascript
CSS: 層疊樣式表css
主要做用: 美化頁面, 將美化和HTML進行分離,提升代碼複用性html
選擇器:java
元素選擇器: 元素的名稱{}node
類選擇器: . 開頭數組
ID選擇器: #ID選擇器瀏覽器
後代選擇器: 選擇器1 選擇器2app
子元素選擇器: 選擇器1 > 選擇器2 ide
選擇器分組: 選擇器1,選擇器2,選擇器3{}函數
屬性選擇器: 選擇器[屬性的名稱='屬性的值']
僞類選擇器:
浮動:
float 屬性: left right
清除浮動:
clear 屬性: both left right
盒子模型: 上右下左 padding 10px 20px 30px 40px 順時針的方向
內邊距: 控制的盒子內距離
邊框: 盒子的邊框
外邊距: 控制盒子與盒子之間的距離
絕對定位: position : absolute; top: left
JS開發: 是一門腳本語言,由瀏覽器來解釋執行,不須要通過編譯
JS聲明變量: var 變量的名字;
JS聲明函數: function 函數的名稱(參數的名字){}
JS開發的步驟:
1. 肯定事件 2. 事件要觸發函數,因此咱們是要聲明函數 3. 函數裏面一般是去作一些交互才操做, 彈框, 修改頁面內容,動態去添加一些東西
0. 輪播圖自動播放
需求:
有一組圖片, 每隔3秒鐘,就去切換一張,最終是一直在不停切換
技術分析:
切換圖片:
每一個三秒鐘作一件事:
步驟分析:
1. 肯定事件: 文檔加載完成的事件 onload
2. 事件要觸發 : init()
3. 函數裏面要作一些事情:(一般會去操做元素,提供交互)
1. 開啓定時器: 執行切換圖片的函數 changeImg()
4. changeImg()
1. 得到要切換圖片的那個元素
1. 完成頁面定時彈出廣告
1.1 需求分析
通常網頁，當咱們剛打開的時候，它會5秒以後，顯示一個廣告，讓咱們看5秒鐘，而後他的廣告就自動消失了！
1.2 技術分析
-
定時器
- setInterval : 每隔多少毫秒執行一次函數
- setTimeout: 多少毫秒以後執行一次函數
- clearInterval
- clearTimeout
- 顯示廣告 img.style.display = "block"
- 隱藏廣告 img.style.display = "none"
1.3 步驟分析
- 肯定事件: 頁面加載完成的事件 onload
- 事件要觸發函數: init()
-
init函數裏面作一件事:
- 啓動一個定時器 : setTimeout()
-
顯示一個廣告
- 再去開啓一個定時5秒鐘以後,關閉廣告
1.4 代碼實現
<script>
function init(){
setTimeout("showAD()",3000);
}
function showAD(){
//首先要獲取要操做的img
var img = document.getElementById("img1");
//顯示廣告
img.style.display = "block";
//再開啓定時器,關閉廣告
setTimeout("hideAD()",3000);
}
function hideAD(){
//首先要獲取要操做的img
var img = document.getElementById("img1");
//隱藏廣告
img.style.display = "none";
}
</script>
1.5擴展
- JS的引入方式
2. 完成完成表單的校驗
2.1 需求分析
昨天咱們作了一個簡單的表單校驗，每當用戶輸入出錯的時候，咱們是彈出了一個對話框，提示用戶去修改。這樣的用戶體驗效果很是很差好。咱們今天就是須要來對他進行一個修改，當用戶輸入信息有問題的時候，咱們就再輸入框的後面給他一個友好提示。
2.2 技術分析
【HTML中innerHTML屬性】
【JS中的經常使用事件】
onfocus 事件: 得到焦點事件
onblur : 失去焦點
onkeyup : 按鍵擡起事件
2.3 步驟分析
2.4 代碼實現
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
引入外部的js文件
-->
<script type="text/javascript" src="../js/regutils.js" ></script>
<script>
/*
1. 肯定事件 : onfocus
2. 事件要驅動函數
3. 函數要幹一些事情: 修改span的內容
*/
function showTips(spanID,msg){
//首先要得到要操做元素 span
var span = document.getElementById(spanID);
span.innerHTML = msg;
}
/*
校驗用戶名:
1.事件: onblur 失去焦點
2.函數: checkUsername()
3.函數去顯示校驗結果
*/
function checkUsername(){
//獲取用戶輸入的內容
var uValue = document.getElementById("username").value;
//對輸入的內容進行校驗
//得到要顯示結果的span
var span = document.getElementById("span_username");
if(uValue.length < 6){
//顯示校驗結果
span.innerHTML = "<font color='red' size='2'>對不起,過短</font>";
return false;
}else{
span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
return true;
}
}
/*
密碼校驗
*/
function checkPassword(){
//獲取密碼輸入
var uPass = document.getElementById("password").value;
var span = document.getElementById("span_password");
//對密碼輸入進行校驗
if(uPass.length < 6){
span.innerHTML = "<font color='red' size='2'>對不起,過短</font>";
return false;
}else{
span.innerHTML = "<font color='red' size='2'>恭喜您,夠用</font>";
return true;
}
}
/*
確認密碼校驗
* */
function checkRePassword(){
//獲取密碼輸入
var uPass = document.getElementById("password").value;
//獲取確認密碼輸入
var uRePass = document.getElementById("repassword").value;
var span = document.getElementById("span_repassword");
//對密碼輸入進行校驗
if(uPass != uRePass){
span.innerHTML = "<font color='red' size='2'>對不起,兩次密碼不一致</font>";
return false;
}else{
span.innerHTML = "";
return true;
}
}
/*
校驗郵箱
* */
function checkMail(){
var umail = document.getElementById("email").value;
var flag = checkEmail(umail);
var span = document.getElementById("span_email");
//對郵箱輸入進行校驗
if(flag){
span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
return true;
}else{
span.innerHTML = "<font color='red' size='2'>對不起,郵箱格式貌似有問題</font>";
return false;
}
}
function checkForm(){
var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();
return flag;
}
</script>
</head>
<body>
<form action="../01-自動輪播圖片/圖片自動輪播.html" onsubmit="return checkForm()" >
用戶名:<input type="text" id="username" onfocus="showTips('span_username','用戶名長度不能小於6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br />
密碼:<input type="password" id="password" onfocus="showTips('span_password','密碼長度不能小於6')" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span><br />
確認密碼:<input type="password" id="repassword" onfocus="showTips('span_repassword','兩次密碼必須一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br />
郵箱:<input type="text" id="email" onfocus="showTips('span_email','郵箱格式必須正確')" onblur="checkMail()" /><span id="span_email"></span><br />
手機號:<input type="text" id="text" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
上午回顧:
定時器:
setInterval("test()",3000) 每隔多少毫秒執行一次函數
setTimeout("test()",3000) 多少毫秒以後執行一次函數
timerID 上面定時器調用以後
clearInterval()
clearTimeout()
切換圖片
img.src = "圖片路徑"
事件: 文檔加載完成的事件 onload事件
顯示廣告 : img.style.display = "block"
隱藏廣告: img.style.display ="none"
引入一個外部js文件
<script src="js文件的路徑" type="text/javascript"/>
表單校驗中經常使用的事件:
得到焦點事件: onfocus
失去焦點事件 onblur
按鍵擡起事件: onkeyup
JS開發步驟
1. 肯定事件 2. 事件要觸發函數: 定義函數 3. 函數一般都要去作一些交互: 點擊, 修改圖片, 動態修改innerHTML屬性... innerTEXT
3.表格隔行換色
3.1 需求分析
咱們商品分類的信息太多，若是每一行都顯示同一個顏色的話會讓人看的眼花，爲了提升用戶體驗，減小用戶看錯的狀況，須要對錶格進行隔行換色
3.2 技術分析
改變行的顏色
3.3 步驟分析
-
肯定事件: 文檔加載完成 onload
-
事件要觸發函數: init()
- 函數:操做頁面的元素
要操做表格中每一行
動態的修改行的背景顏色
- 函數:操做頁面的元素
-
3.4 代碼實現
<script >
function init(){
//獲得表格
var tab = document.getElementById("tab");
//獲得表格中每一行
var rows = tab.rows;
//便利全部的行,而後根據奇數 偶數
for(var i=1; i < rows.length; i++){
var row = rows[i]; //獲得其中的某一行
if(i%2==0){
row.bgColor = "yellow";
}else{
row.bgColor = "red"
}
}
}
</script>
4. 複選框的全選和全不選
4.1 需求分析
商品分類界面中，當咱們點擊全選框的時候，咱們但願選中全部的商品，當咱們取消掉的時候，咱們但願不選中全部的商品
4.2 技術分析
事件 : onclick點擊事件
4.3 步驟分析
全選和全不選步驟分析:
1.肯定事件: onclick 單機事件
2.事件觸發函數: checkAll()
3.函數要去作一些事情:
得到當前第一個checkbox的狀態 得到全部分類項的checkbox 修改每個checkbox的狀態
代碼實現
function checkAll(){
// 得到當前第一個checkbox的狀態
var check1 = document.getElementById("check1");
//獲得當前checked狀態
var checked = check1.checked;
// 得到全部分類項的checkbox
// var checks = document.getElementsByTagName("input");
var checks = document.getElementsByName("checkone");
// alert(checks.length);
for(var i = 0; i < checks.length; i++){
// 修改每個checkbox的狀態
var checkone = checks[i];
checkone.checked = checked;
}
}
5. 省市聯動效果
5.1 需求分析
5.2 技術分析
什麼是DOM: Document Object Model : 管理咱們的文檔 增刪改查規則
【HTML中的DOM操做】
一些經常使用的 HTML DOM 方法： getElementById(id) - 獲取帶有指定 id 的節點（元素） appendChild(node) - 插入新的子節點（元素） removeChild(node) - 刪除子節點（元素） 一些經常使用的 HTML DOM 屬性： innerHTML - 節點（元素）的文本值 parentNode - 節點（元素）的父節點 childNodes - 節點（元素）的子節點 attributes - 節點（元素）的屬性節點 查找節點： getElementById() 返回帶有指定 ID 的元素。 getElementsByTagName() 返回包含帶有指定標籤名稱的全部元素的節點列表（集合/節點數組）。 getElementsByClassName() 返回包含帶有指定類名的全部元素的節點列表。 增長節點： createAttribute() 建立屬性節點。 createElement() 建立元素節點。 createTextNode() 建立文本節點。 insertBefore() 在指定的子節點前面插入新的子節點。 appendChild() 把新的子節點添加到指定節點。 刪除節點： removeChild() 刪除子節點。 replaceChild() 替換子節點。 修改節點： setAttribute() 修改屬性 setAttributeNode() 修改屬性節點
5.3 步驟分析
5.4 代碼實現
6. 使用JS控制下拉列表左右選擇
6.1 需求分析:
在咱們的分類管理中,咱們要可以去修改咱們的分類信息,當咱們一點修改的時候,跳轉到一個能夠編輯的頁面,這裏面可以修改分類的名稱,分類的描述,以及分類的商品
6.2 步驟分析:
6.3 代碼實現
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
步驟分析
1. 肯定事件: 點擊事件 :onclick事件
2. 事件要觸發函數 selectOne
3. selectOne要作一些操做
(將左邊選中的元素移動到右邊的select中)
1. 獲取左邊Select中被選中的元素
2. 將選中的元素添加到右邊的Select中就能夠
-->
<script>
function selectOne(){
// 1. 獲取左邊Select中被選中的元素
var leftSelect = document.getElementById("leftSelect");
var options = leftSelect.options;
//找到右側的Select
var rightSelect = document.getElementById("rightSelect");
//遍歷找出被選中的option
for(var i=0; i < options.length; i++){
var option1 = options[i];
if(option1.selected){
// 2. 將選中的元素添加到右邊的Select中就能夠
rightSelect.appendChild(option1);
}
}
}
//將左邊全部的商品移動到右邊
function selectAll(){
// 1. 獲取左邊Select中被選中的元素
var leftSelect = document.getElementById("leftSelect");
var options = leftSelect.options;
//找到右側的Select
var rightSelect = document.getElementById("rightSelect");
//遍歷找出被選中的option
for(var i=options.length - 1; i >=0; i--){
var option1 = options[i];
rightSelect.appendChild(option1);
}
}
</script>
</head>
<body>
<table border="1px" width="400px">
<tr>
<td>分類名稱</td>
<td><input type="text" value="手機數碼"/></td>
</tr>
<tr>
<td>分類描述</td>
<td><input type="text" value="這裏面都是手機數碼"/></td>
</tr>
<tr>
<td>分類商品</td>
<td>
<!--左邊-->
<div style="float: left;">
已有商品<br />
<select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
<option>華爲</option>
<option>小米</option>
<option>錘子</option>
<option>oppo</option>
</select>
<br />
<a href="#" onclick="selectOne()"> >> </a> <br />
<a href="#" onclick="selectAll()"> >>> </a>
</div>
<!--右邊-->
<div style="float: right;">
未有商品<br />
<select multiple="multiple" id="rightSelect">
<option>蘋果6</option>
<option>腎7</option>
<option>諾基亞</option>
<option>波導</option>
</select>
<br />
<a href="#"> << </a> <br />
<a href="#"> <<< </a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</body>
</html>
今天內容簡單回顧:
定時器:
setInterval
setTimeout
clearInterval
clearTimeout
控制圖片顯示隱藏
img.style.display = "block"
img.style.display = "none"
表單中經常使用的事件:
onfocus: 獲取焦點事件
onblur : 失去焦點的事件
onkeyup: 按鍵擡起的事件
onclick: 單擊事件
ondblclick: 雙擊事件
表格隔行換色,鼠標移入和移除要變色:
onmouseenter: 鼠標移入
onmouseout: 鼠標移出
onload: 文檔加載完成事件
onsubmit: 提交
onchange: 下拉列表內容改變
checkbox.checked 選中狀態
DOM的文檔操做:
添加節點: appendChild
建立節點: document.createElement
建立文本節點: document.createTextNode()
JS開發步驟:
1. 確認事件 2. 事件觸發函數 3. 函數裏面要作一些交互
相關文章
- 1. JavaWeb開發03——會話管理
- 2. JavaWeb-03-Tomcat
- 3. 從零開始學習 JavaWeb - 03 Maven
- 4. JAVAweb開發（一）javaweb概述
- 5. JavaWeb之JavaWeb開發入門
- 6. JavaWEB開發05_Bootstrap
- 7. javaweb開發
- 8. JavaWeb開發
- 9. javaweb Servlet開發
- 10. JavaWeb - Servlet開發
- 更多相關文章...
- • Spring使用AspectJ開發AOP：基於XML和基於Annotation - Spring教程
- • ionic 切換開關操作 - ionic 教程
- • PHP開發工具
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接
歡迎關注本站公眾號,獲取更多信息
相關文章