第85節：Java中的JavaScript

Java JavaScript · 發表 2019-02-10 16:42:17

摘要：標題圖第85節：Java中的JavaScript 複習一下css：選擇器的格式：元素選擇器：元素的名稱{} 類選擇器：. 開頭 ID選擇器：# ID選擇器後代選擇器：選擇器1 選擇器2 子元素選擇器：選擇器1 &...

標題圖

複習一下css：

選擇器的格式：

元素選擇器：元素的名稱{}

類選擇器：. 開頭

ID選擇器：# ID選擇器

後代選擇器：選擇器1 選擇器2

子元素選擇器：選擇器1 > 選擇器2

選擇器分組：選擇器1，選擇器2，選擇器3{}

屬性選擇器：選擇器[屬性名稱='屬性值']

盒子模型：

內邊距：盒子內的距離

邊框：盒子的邊框

外邊距：盒子和盒子之間的距離

輪播圖

自動播放：每隔3秒切換，切換圖片，

// 點選彈框
// 確定事件，點選事件
// 通過事件定義函式
// 在函式裡定義操作頁面元素，做一些互動的操作
<script>
 function d(){
// alert("點選了");
// 獲取div
var div = document.getElementById("div1");
div.innerHTML = "<font color='red'> 內容 </font>";
 }
</script>

<body>
 <input type="button value="點我" onclick="d()"/>
 <div id = "div1">
這裡是達叔小生
 </div>
</body>

// 點選切換圖片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function changeImg(){
//alert("要切換了")
var img = document.getElementById("img1");
img.src = "../img/1.gif";
}
</script>
</head>
<body>
<input type="button" value="點選切換圖片" onclick="changeImg()" />
<br />
<img src="../img/333.jpg" id="img1" />
</body>
</html>

setTimeout() : 在指定的毫秒數後呼叫函式

setInterval() : 按照指定的週期來呼叫函式

scrollTo() : 把內容滾動到指定的座標

scrollBy() : 按照指定的畫素值來滾動內容

resizeTo() : 把視窗的大小調整到指定的寬度和高度

resizesBy() : 按照指定的畫素調整視窗的大小

prompt() : 顯示可提示使用者輸入的對話方塊

open() : 開啟一個新的瀏覽器視窗

moveTo() : 把視窗的左上角移動到一個指定的座標

moveBy() : 可相對視窗的當前座標把它移動指定的畫素

focus() : 把鍵盤焦點給予一個視窗

setInterval() 方法按照指定的週期來呼叫函式，方法會不停地呼叫函式，直到 clearInterval() 被呼叫或者視窗被關閉，

<html>
<body>

<input type="text" id="clock" size="20"/>

<script language=javascript>
var int = self.setInterval("clock()", 50)
function clock(){
 var t = new Date()
 document.getElementById("clock").value
}
</script>

<button onclick="int=window.clearInterval(int)">
stop</button>
</body>
</html>

定時器

// 技術分析
function test(){
 console.log("呼叫了");
}
// setInterval("test()", 2000); 
這個函式會迴圈，定時2秒後，這個函式會重新被呼叫，一直迴圈。
// setTimeout("test()", 2000);
這個函式被用了，就不再執行了

取消操作， alert() 顯示一段訊息， blur() 把鍵盤焦點從頂層視窗移開， clearInterval() 取消由 setInterval() 設定的 timeout ， clearTimeout() 取消由 setTimeout() 方法設定的 timeout 。

setIntervale()

引數：
mode 引數為要呼叫的函式，或是執行程式碼串
millisec 引數為呼叫code之間的時間間隔

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function test(){
console.log("setInterval");
}
//setInterval("test()",2000);
//setTimeout("test()",2000);
var timerID;
function startDinshiqi(){
//timerID = setInterval("test()",2000);
timerID = setTimeout("test()",3000);
}

function stopDingshiqi(){
//clearInterval(timerID);
clearTimeout(timerID);
}

</script>
</head>
<body>
<input type="button" value="開啟定時器" onclick="startDinshiqi()" /><br />
<input type="button" value="取消定時器" onclick="stopDingshiqi()"/><br />
</body>
</html>

圖片自動輪播：

// 會被顯示在狀態列
<html>
<head>
<script type="text/javascript">
function load(){
 window.status = "Page"
}
</script>
</head>
<body onload="load()">
</body>
</html>

檔案載入完成事件onload，事件觸發

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var index = 0;

function changeImg(){

var img = document.getElementById("img1");

//當前要切換到第幾張圖片
var curIndex = index%3 + 1; 
img.src="../img/"+curIndex+".jpg"; 
//每切換完,索引加1
index = index + 1;
}

function init(){
setInterval("changeImg()",1000);
}

</script>
</head>
<body onload="init()">
<img src="../img/1.jpg" width="100%" id="img1"/>
</body>
</html>

顯示和隱藏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//var img = document.getElementById("img1");

function hideImg(){
var img = document.getElementById("img1");
img.style.display = "none";
}

function showImg(){
var img = document.getElementById("img1");
img.style.display = "block";
}
</script>
</head>
<body>
<input type="button" value="顯示" onclick="showImg()" />
<input type="button" value="隱藏" onclick="hideImg()" /><br />

<img src="../img/1.gif" id="img1" />


</body>
</html>

setInterval ：每隔多少毫秒執行一次

setTimeout ：多少毫秒後執行一次

clearInterval 和 clearTimeout

img.style.display=block 和 img.style.display=none

定時廣告：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<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>
</head>
<body onload="init()">
<img id="img1" src="../img/555.jpg" width="100%" style="display: none;"/>
</body>
</html>

表單效果

onblur 元素失去焦點
onchange 域的內容被改變
onfocus 元素獲取焦點

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
引入外部的js檔案
-->
<script type="text/javascript" src="../js/regutils.js" ></script>
<script>

function showTips(spanID,msg){
var span = document.getElementById(spanID);
span.innerHTML = msg;
}

function checkUsername(){

var uValue = document.getElementById("username").value;
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="../555.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>

表單提交規則

https://github.com/huangguangda/Tools/blob/master/regutils.js

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>

function showTips(spanID,msg){
var span = document.getElementById(spanID);
span.innerHTML = msg;
}

function checkUsername(){

var uValue = document.getElementById("username").value;
var span = document.getElementById("span_username");
if(uValue.length < 6){
span.innerHTML = "太短啦!"
return false;
}else{
span.innerHTML = "夠用!"
return true;
}
}

function checkForm(){
var flag = checkUsername();
return flag;
}

</script>
</head>
<body>
<form action="../555.html" onsubmit="return checkForm()">
使用者名稱:<input type="text" id="username" onblur="checkUsername()"onfocus="showTips('span_username','使用者名稱長度不能小於6位')" /><span id="span_username"></span> <br />
<input type="submit" value="註冊" />
</form>

</body>
</html>

引入檔案

<script src="js檔案路徑" type="text/javascript" />

ondblclick: 當用戶雙擊某個物件時呼叫的事件
onerrror: 在載入文件或影象時發生錯誤
onfocus: 元素獲得焦點
onkeydown: 某個鍵盤按鍵被按下
onkeypress: 某個鍵盤按鍵被按下並鬆開
onkeyup: 某個鍵盤按鍵被鬆開
onload: 一張頁面或一副影象完成載入
onmousedown: 滑鼠按鈕被按下
onmousemove: 滑鼠被移動
onmouseout: 滑鼠從某元素移開
onmouseover: 滑鼠移到某元素之上
onmouseup: 滑鼠按鍵被鬆開

表格隔行顏色

<tr>
 <td>
<input type="checkbox"/>
 </td>
 <td><a href="#">修改</a> | <a href="#">刪除</a></td>
</tr>

<tr bgcolor="red">
</tr>

<body onload="init()">
<table border="1px" width="600px" id="tab">

function init(){
 var tab = document.getElementById("tab");
}

table物件

table物件代表一個html表格，<table>標籤
cells[] 返回包含表格中所有單元格的一個數組
// 所有單元格
rows[] 返回包含表格中所有行的一個數組
tBodies[] 返回包含表格中所有tbody的一個數組

程式碼

表格全選和全不選

getElementById()方法
getElementById()方法返回帶有指定ID的元素

var element = document.getElementById("tag");

appendChild(node)： 插入新的子節點
removeChild(node)：刪除子節點
innerHTML: 節點元素的文字值
parentNode：節點的父節點
childNodes：節點元素的子節點
attributes：節點的屬性節點

getElementById(): 返回帶有指定ID的元素
getElementsByTagName(): 返回包含帶有指定標籤名稱的所有元素的節點列表
getElementsByClassName(): 返回包含帶有指定類名的所有元素的節點列表
appendChild(): 把新的子節點新增到指定節點
removeChild(): 刪除子節點
replaceChild():替換子節點
insertBefore(): 在指定子節點前面插入新的子節點
createAttribute(): 建立屬性節點
createElement(): 建立元素節點
createTextNode(): 建立文字節點
getAttribute(): 返回指定的屬性值
setAttribute(): 把指定屬性設定值

效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="../img.gif" />
<p>文字</p>
</body>
</html>

省市聯動

<select>
 <option></option>
 <option></option>
 <option></option>
</select>

DOM：

Document Object Model
HTML DOM定義了訪問和操作的html文件的標準
DOM是標準，定義了訪問html和xml文件的標準
DOM是 
Document Object Model 文件物件模型的縮寫

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>

function dianwo(){
var div = document.getElementById("div1");
//建立元素節點
var p = document.createElement("p");// <p></p>
//建立文字節點
var textNode = document.createTextNode("文字內容");//文字內容

//將p 和文字內容關聯起來
p.appendChild(textNode);//<p>文字</p> 

//將P新增到目標div中
div.appendChild(p);
}

</script>
</head>
<body>
<input type="button" value="點我" onclick="dianwo()" />

<div id="div1">

</div>
</body>
</html>

選擇城市

程式碼

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>

var provinces = [
["深圳市","東莞市","惠州市","廣州市"],
["長沙市","岳陽市","株洲市","湘潭市"],
["廈門市","福州市","漳州市","泉州市"]
];

function selectProvince(){
var province = document.getElementById("province");
//得到當前選中的是哪個省份
//alert(province.value);
var value = province.value;
//從陣列中取出對應的城市資訊
var cities = provinces[value];
var citySelect = document.getElementById("city");
//清空select中的option
citySelect.options.length = 0;

for (var i=0; i < cities.length; i++) {
var cityText = cities[i]; 
var option1 = document.createElement("option");
//建立城市文字節點
var textNode = document.createTextNode(cityText) ;

//將option節點和文字內容關聯起來
option1.appendChild(textNode); 
//新增到城市select中
citySelect.appendChild(option1);
}

}

</script>
</head>
<body>
<!--選擇省份-->
<select onchange="selectProvince()" id="province">
<option value="-1">--請選擇--</option>
<option value="0">廣東省</option>
<option value="1">湖南省</option>
<option value="2">福建省</option>
</select>
<!--選擇城市-->
<select id="city"></select>
</body>
</html>

案例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function selectOne(){
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){
//將選中的元素新增到右邊的Select中就可以
rightSelect.appendChild(option1);
}
}
}

//將左邊所有的商品移動到右邊
function selectAll(){
//獲取左邊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></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></option>
<option></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>

結言

好了，歡迎在留言區留言，與大家分享你的經驗和心得。

感謝你學習今天的內容，如果你覺得這篇文章對你有幫助的話，也歡迎把它分享給更多的朋友，感謝。

達叔小生：往後餘生，唯獨有你

You and me, we are family !

90後帥氣小夥，良好的開發習慣；獨立思考的能力；主動並且善於溝通

簡書部落格：達叔小生

https://www.jianshu.com/u/c785ece603d1

結語

下面我將繼續對其他知識深入講解，有興趣可以繼續關注
小禮物走一走 or 點贊`

第85節：Java中的JavaScript

結言

結語

您可能也會喜歡…