第85節：Java中的JavaScript_ZenDei技術網路在線

第85節：Java中的JavaScript 複習一下css：選擇器的格式：元素選擇器：元素的名稱{} 類選擇器：. 開頭 ID選擇器： ID選擇器後代選擇器：選擇器1 選擇器2 子元素選擇器：選擇器1 選擇器2 選擇器分組：選擇器1，選擇器2，選擇器3{} 屬性選擇器：選擇器[屬性名稱=' ...

標題圖

第85節：Java中的JavaScript

複習一下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()"> &gt;&gt; </a> <br />
                        <a href="#" onclick="selectAll()"> &gt;&gt;&gt; </a>
                    </div>
                    <!--右邊-->
                    <div style="float: right;"> 
                        未有商品<br />
                        <select multiple="multiple" id="rightSelect">
                            <option></option>
                            <option></option>
                            <option></option>
                            <option></option>
                        </select>
                        <br />
                        <a href="#"> &lt;&lt; </a> <br />
                        <a href="#"> &lt;&lt;&lt; </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 點贊`