javaWeb技術第二篇之CSS、事件和案例

時間  2019-11-13
標籤 javaweb 技術 第二 css 事件 案例 欄目 Java 简体版
原文   原文鏈接 
<!--內聯式
CSS （層疊樣式表） 編輯
層疊樣式表(英文全稱：Cascading Style Sheets)
CSS不只能夠靜態地修飾網頁，還能夠配合各類腳本語言動態地對網頁各元素進行格式化。
就是網頁的美化技術。
入門:如何在html裏面使用css
html裏面的外觀命名跟css外觀命名會有全部不一樣。但效果一致
css屬性:
屬性1：值1;屬性2：值2;屬性3：值3;...
內聯式:對每一個元素都進行style進行樣式添加.
內部式:在當前html的head的style標籤裏面添加
<head>
    <style>
        查找元素{//css屬性}
    </style>
</head>
外部式:要求你們敲明白
<head>
    <link rel="stylesheet" type="text/css" href="css/out.css"/>
    固定寫法:rel="stylesheet" type="text/css"  前者是看成一個樣式文件,後者是看成css代碼
</head>
-->
        <input type="text" value="內聯式" style="background-color: yellow ;" /><br />
        <input type="text" value="內聯式" style="background-color: yellow ;" />
        <div >
            我是div
        </div>
        <div >
            我是div
        </div>
    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*對每個option進行外觀設置*/
            option{
                min-width: 200px;
            }
        </style>
    </head>
    <body>
    <!--css能作到html作不到外觀設置,能夠更簡潔高效-->
        <select size="3"  >
            <option>小班</option>
            <option>中班</option>
            <option>大班</option>
        </select>

    </body>

</html>

選擇器最終目的就是爲了拿到指定的元素對象.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style>
            /*選擇器就是一些選擇html元素的符號*/
            /*#id{//css屬性}*/
            #input1{ background-color: blue;}
            /*.class值{//css屬性 }*/
            .inp{background-color: yellow;}
            /*名稱元素選擇器:使用標籤名,表示對當前頁面的每一個元素*/
            div{background-color: red;}
            /*雖然有的元素名稱同樣,這時不要用名稱選擇器*/
            /*元素[屬性='值']{//css代碼}*/
            /*input[type='password']{background-color: green;}*/
            /*擴展:分組選擇器,包含選擇器
             外部元素選擇器  內部元素選擇器{//css代碼}*/
            div span{background-color: orange;}
            /*分組選擇器是一種共用樣式的寫法 簡化css代碼
             選擇器1,選擇器2...{//css代碼}*/
            /*input[type='text']{background-color: green;}*/
            /*input[type='password'],input[type='text']{background-color: green;}*/
            #pwd,#txt{background-color: green;}
        </style>
    </head>
    <body>
        <!--id 是元素的惟一編碼
        能夠根據id查找出當前文檔的html元素
        通常是js裏面使用的屬性
        根據class進行元素查找-->
         <input id="input1" value="id選擇器"/><br />
         <input class="inp" value="input選擇器"/><br />
         <input class="inp" value="input選擇器"/><br />
         <input class="inp" value="input選擇器"/><br />
         <input class="inp" value="input選擇器"/><br />
         <input class="inp" value="input選擇器"/><br />
         <div>我是div</div>
         <div>我是div</div>
         <div>我是div</div>
         <div>我是div</div>
         <div>我是div</div>
         <div>我是div</div>
         <input id="pwd" type="password" /><br />
         <input id="txt" type="text" /><br />
         <div>
             <span>我是div內部的span</span>
         </div>
         <span>我是div外部的span</span>
    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*對每個div進行操做*/
            div {
                /*設置字體顏色*/
                color: red;
                /*設置字體大小*/
                font-size: 20px;
                /*設置粗細*/
                font-weight: 700;
                /*設置對齊*/
                text-align: center;
            }
            a {
                /*設置刪除 下劃線 上劃線*/
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <!--<i><font color="red" size="6" face="黑體">我是王寶強</font></i>
        <i><font color="red" size="6" face="黑體">我是馬蓉</font></i>-->
        <div>我是王寶強</div>
        <div>我是馬蓉</div>
        <a href="#">我是宋jj</a>
        <a href="#">我是宋kk</a>
    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                background-color: gray;
            }
            #div1{
                background-image: url(img/015.jpg);
                /*設置寬高*/
                height: 400px;
                width: 400px;
            }
        </style>
    </head>
    <body>
        <div>我是div</div>
        <div>我是div</div>
        <div id="div1">我是div</div>
    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 100px;
                height: 100px;
                /*border:寬度  形狀 顏色;
                 solid實線
                 dotted虛線*/
                /*border: 2px solid  red;*/
                border-top: 2px solid red;
                border-right: 2px dotted red;
                border-bottom: 5px dotted red;
                border-left: 5px dotted green;
            }
        </style>
    </head>
    <body>
        <div>我是div</div>
    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            span {
                border: 1px solid red;
                background-color: green;
                /*縮進(內邊距):內容與邊界的距離*/
                /*padding: 10px;*/
                /*上,右,下,左*/
                /*使用空格隔開*/
                padding: 10px 20px 30px 40px;
                /*外邊距：邊界與邊界的距離*/
                /*上,右,下,左*/
                margin: 20px;
            }
        </style>
    </head>

    <body>
        <br />
        <span>我是span</span>
        <span id="second">我是span</span>
        <span id="third">我是span</span>

    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*設置元素在界面的中的位置
             擺放元素就是佈局
             標準流/普通流：默認的顯示順序,先上後下 先左後右 碰到div換行
             float:浮動 不顯示在標準上面,而有本身的一層，該層在標準流上面
             left:向左浮動
             right:向右浮動
             clear:清除浮動:不讓左邊,右邊，同時左右出現浮動
             display*/

            #div1 {
                width: 150px;
                height: 150px;
                background-color: red;
                float: right;
            }

            #div2 {
                width: 50px;
                height: 50px;
                background-color: green;
                float: right;
            }

            #div3 {
                width: 100px;
                height: 100px;
                background-color: blue;
                float: right;
            }

            #clear {
                width: 0px;
                height: 0px;
                background-color: orange;
                /*項目中使用both最多
                 當咱們給clear爲both設置寬高爲0,0
                 當它與div一塊使用能夠替代table*/
                clear: both;
            }
        </style>
    </head>

    <body>
        <div id="div1"></div>
        <div id="clear"></div>
        <div id="div2"></div>

        <div id="div3"></div>

    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .grid{
                width: 60px;
                height: 60px;
                border: 1px solid gray;
                float: left;
            }
            /*換行*/
            #clear{
                clear: both;
                width: 0px;
                height: 0px;
            }

        </style>
    </head>

    <body>
        <div class="grid">1</div>
        <div class="grid">2</div>
        <div class="grid">3</div>
        <div id="clear"></div>
        <div class="grid">4</div>
        <div class="grid">5</div>
        <div class="grid">6</div>
    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 100px;
                height: 100px;
                border: 1px solid red;
                /*將元素設置成內聯元素/行內元素
                 此時寬高失效*/
                display: inline;
            }
            span{
                border: 1px solid red;
                /*將元素設置成塊級元素*/
                display: block;
                width: 100px;
                height: 100px;
                /*將元素隱藏*/
                /*display: none;*/
                /*應用場景:菜單*/
            }
        </style>
    </head>

    <body>
          <div id="div1">我是div</div>
          <div>我是div</div>
          <span>我是span</span>
          <span>我是span</span>
    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .grid{
                width: 60px;
                height: 60px;
                border: 1px solid gray;
                float: left;
            }
            /*換行*/
            #clear{
                clear: both;
                width: 0px;
                height: 0px;
            }

        </style>
    </head>

    <body>
        <div class="grid">1</div>
        <div class="grid">2</div>
        <div class="grid">3</div>
        <div id="clear"></div>
        <div class="grid">4</div>
        <div class="grid">5</div>
        <div class="grid">6</div>
    </body>

</html>


<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 100px;
                height: 100px;
                border: 1px solid red;
                /*將元素設置成內聯元素/行內元素
                 此時寬高失效*/
                display: inline;
            }
            span{
                border: 1px solid red;
                /*將元素設置成塊級元素*/
                display: block;
                width: 100px;
                height: 100px;
                /*將元素隱藏*/
                /*display: none;*/
                /*應用場景:菜單*/
            }
        </style>
    </head>

    <body>
          <div id="div1">我是div</div>
          <div>我是div</div>
          <span>我是span</span>
          <span>我是span</span>
    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #outer{
                border: 1px solid red;
                width: 100px;
                height: 100px;
            }
            #inner{
                border: 1px solid grey;
                width: 50px;
                height: 50px;
                /*0設置上下 auto由外部計算居中的外邊距*/
                margin: 0 auto;
            }
        </style>
    </head>

    <body>
          <div id="outer">
              <div id="inner"></div>
          </div>
    </body>

</html>



<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*每個div設置寬 邊框*/
            div{
             width: 100%;
             /*border: 1px solid gray;*/
             float: left;
            }
            /*清除+寬高爲00等於br*/
            #clear{
                height: 0px;
                width: 0px;
                clear: both;
            }
            /*第一行內的三個div,是包含關係*/
            #head div{
                width: 33%;
                text-align: center;
                height: 60px;
            }
            #head div a{
                margin: 10px;
                text-decoration: none;
            }
            #head #head_div{
                /*設置內邊距*/
             padding-top: 20px;
            }
            /*第二行開始*/
            #menu{
                height: 40px;
                background-color: black;
                padding-top: 10px;
            }
            #menu a{
                color: white;
                text-decoration: none;
                font-size: 20px;
                margin-left: 10px;
                /*若是margin元效可使用padding*/
            }
            /*第三行開始*/
            #register{
                width: 100%;
                background-image: url(img/015.jpg);
                height: 700px;
            }
            #register #form_div{
                background-color: white;
                border: 2px solid gray;
                width: 60%;
                height: 70%;
                /*上 右 下 左*/
                margin: 5%  20% 0% 20%;
            }
            #register #form_div table{
                margin: 0 auto;
                padding-top: 20px;
            }
            /*第四行*/
            #footer {

            }
            #footer img{
                  width: 100%;
            }
            /*第五行*/
            p {
                text-align: center;
            }
        </style>
    </head>

    <body>
        <!--聯想
        列點
        *建立表格(div+float+clear)
        *css 操做元素外觀
        * 第一行
        * 第二行
        * 。。。。
        實現-->
        <div id="head">
            <!--1/3寬度的div-->
            <div >
                <img src="img/logo2.png" />
            </div>
            <div >
                <img src="img/header.jpg" />
            </div>
            <div id="head_div">
                <a href="#">註冊</a><a href="#">登陸</a><a href="#">關於</a>
            </div>
        </div>
        <div id="clear"></div>

        <!--第二行 菜單-->
        <div id="menu">
            <a href="#">首頁</a>
            <a href="#">筆記</a>
            <a href="#">手機</a>
        </div>
        <div id="clear"></div>
        <!--第三行 註冊部分-->
        <div id="register">
            <div id="form_div">
                    <!--用戶註冊-start-->
                    <!-- *表單:集合-->
        <form action="#" method="post">

            <!--*表單元素-->
            <!--*使用table標籤-->
            <table width="70%" border="0px">
                <tr>
                    <td align="right" >
                        <font color="blue">會員註冊</font>
                    </td>
                    <td align="left" colspan="2">USER REGISTER</td>
                </tr>
                <!--*text-->
                <tr>
                    <td align="right"><b>用戶名</b></font>
                    </td>
                    <td align="left" colspan="2"><input type="text" name="username" size="50" placeholder="用戶名"/></td>
                </tr>
                <!--*password-->
                <tr>
                    <td align="right"><b>密碼</b></font>
                    </td>
                    <td align="left" colspan="2"><input type="password" name="password" size="50" /></td>
                </tr>
                <tr>
                    <td align="right"><b>確認密碼</b></font>
                    </td>
                    <td align="left" colspan="2"><input type="password" name="password2" size="50" /></td>
                </tr>
                <tr>
                    <td align="right"><b>Email</b></font>
                    </td>
                    <td align="left" colspan="2"><input type="text" name="email" size="50" /></td>
                </tr>
                <tr>
                    <td align="right"><b>姓名</b></font>
                    </td>
                    <td align="left" colspan="2"><input type="text" name="uname" size="50" /></td>
                </tr>

                <!--*radio-->
                <tr>
                    <td align="right"><b>性別</b></font>
                    </td>
                    <td align="left" colspan="2"><input type="radio" name="sex" checked="checked" />男<input type="radio" name="sex" />女</td>
                </tr>

                <!--*date-->
                <tr>
                    <td align="right"><b>出生日期</b></font>
                    </td>
                    <td align="left" colspan="2"><input type="date" name="birthday" /></td>
                </tr>
                <!--*image-->
                <tr>
                    <td align="right"><b>驗證碼</b></font>
                    </td>
                    <td align="left" width="33%"><input type="text" name="code" width="100" /></td>
                    <td align="left" width="33%"><input type="image" src="img/015.jpg" width="60" height="40" /></td>
                </tr>
                <!--*submit-->
                <tr>
                    <td colspan="3" align="center">
                        <input type="submit" value="註冊" width="200px" />
                    </td>
                </tr>
            </table>
        </form>
                    <!--用戶註冊-end-->

            </div>
        </div>
        <div id="clear"></div>
        <div id="footer" >
            <img src="img/footer.jpg" />
        </div>
        <div id="clear"></div>
    <div>
    <p>聯繫咱們 聯繫咱們 聯繫咱們 聯繫咱們 聯繫咱們 聯繫咱們
    </p>
    <p>
        Copyright © 2005-2016 傳智商城 版權全部
    </p>
</div>
    </body>

</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--方式1:內聯式   經過script標籤-->
        <script>
            /*直接在標籤體中編寫js代碼便可*/
            // 
            alert("hello js!");
        </script>
        
        <!--方式2:外聯式     a.首先編寫外部的js代碼    b.引入該js文件-->
        <script type="text/javascript" src="js/first.js" >
            alert("情緒是智慧不夠的產物!");
            
        </script>
        
        
        
        <!--
            注意事項:
                加載順序:
                    從上到下
                    從左到右
                一個頁面中能夠出現多個script標籤,能夠放在任何位置(通常放在head標籤中,注意正確嵌套)
                外聯式的script一旦是src屬性,那麼標籤體失效.
        -->
    </head>
    <body>
        <script>
            /*直接在標籤體中編寫js代碼便可*/
            // 
            alert("hello js11111!");
        </script>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //變量聲明
            var age = 18;
            var name1 = "tom";
//            alert(age);
            alert(name1);
        </script>
    </head>
    <body>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var age = 18;   //number
            age = "tom";    //string
            age = true;        //boolean
//            alert(typeof age);
            var age1 = null;    //object
//            alert(typeof age1); 彈出一個窗口(會中止程序的運行)
            var age2;    //undefined
            alert(typeof age2);
        </script>
    </head>
    <body>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //等性運算符
            // == !=    判斷數值
//            alert(18==18);    //true
//            alert(18=="18");    //true
            //一個number類型的數值和一個非數值形式的字符串不能比較
//            alert(66=="B");        //false 
//            alert("B"=="B");    //true 比較ASCII
//            alert("A"=="B");    //false
            
            // === !==   判斷數值和類型
//            alert(18==="18");    //false
//            alert(18!=="18");    //true
//            alert("B"==="B");    //true

            //關係運算符
            // > < >= <=
//            alert(18>19);        //fasle
//            alert(18>"17");        //true
            //一個number類型的數值和一個非數值形式的字符串不能比較
//            alert(67>"B");        //false
//            alert("B">"A");        //true  比較ASCII
            
            //邏輯運算符
            //&& || !
            //&&
//            alert(true&&false);        //false
//            alert(false&&true);        //fasle
//            alert(true&&true);        //true
            //在&&運算中,若是兩邊都爲true(對象轉爲的Boolean),那麼運算結果爲右邊的值
//            alert("abc"&&true);        //true
//            alert(true&&"abc");        //abc
            //||
//            alert(true||false);        //true
//            alert(false||true);        //true
//            alert(false||false);    //false
            //在||運算中,若是兩邊都爲true(對象轉爲的Boolean),那麼運算結果爲左邊的值
//            alert("abc"||false);    //abc
//            alert(false||"abc");    //abc
            alert("abc"||true);        //abc



        </script>
    </head>
    <body>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
//            if(18>17){
//                alert("18大於17");
//            }
            for(var i=0;i<3;i++){
                alert(i);
            }
        </script>
    </head>
    <body>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            
            //編寫普通函數
            function add(){
                alert(1+1);
            }
            //調用函數
//            add();

            
            //匿名函數(先編寫後使用)
            var add1 = function(i,j){
                alert(i+j);
            }
//            add1(4,4);

            //帶有參數的函數
            function add2(i,j){
                alert(i+j);
            }
//            add2(3,3);
            //返回值
            function add3(i,j){
                return i+j;
            }
            var sum = add3(5,5);
            alert(sum);
        </script>
    </head>
    <body>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function btn(){
                alert("44944");
            }
            
        </script>
    </head>
    <body>
        <!--方式1:綁定事件   經過標籤的事件屬性-->
        <input type="button" value="點我44" onclick="btn("111")" />
        <!--方式2:派發事件    -->
        <input type="button" value="再點我44" id="btnId" />
    </body>
    <script>
        //1.獲取事件源(標籤對象)
        var inpObj = document.getElementById("btnId");
        //2.給事件源派發事件
        inpObj.onclick = function(data){
            alert(449444444);
        }
    </script>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //頁面加載成功事件 等頁面加載完畢後再來加載頁面加載成功事件中的代碼片斷  
            onload = function(){
//                alert("123");
                //1.獲取事件源(標籤對象)
                var inpObj = document.getElementById("btnId");
                //2.給事件源派發事件
                inpObj.onclick = function(){
                    alert(449444444);
                }
            }
            
        </script>
    </head>
    <body>
        <!--方式2:派發事件    -->
        <input type="button" value="再點我44" id="btnId" />
    </body>
</html>


<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script>
        /*    步驟分析:
        1.肯定事件(表單提交事件)
            //checkForm函數必需要有返回值(Boolean)
            <form onsubmit="return checkForm()"></form>
        2.編寫函數(校驗用戶名和密碼)
            a.獲取用戶名和密碼的標籤對象
                var obj = document.getElementById("id");
            b.獲取用戶名和密碼的值(value屬性)
                var userVal = obj.value;
            c.校驗是否爲空
                if(userVal==""){
                    alert("用戶名不可爲空");
                    return false;
                }
            d.返回值
            return true;*/
        //必需要有返回值
        function checkForm(){
            //a.獲取用戶名和密碼的標籤對象
            var userObj = document.getElementById("username");
            var pwdObj = document.getElementById("password");
            //b.獲取用戶名和密碼的值(value屬性)
            var userVal = userObj.value;
            var pwdVal = pwdObj.value;
//            alert(userVal+"   "+pwdVal);
            //c.校驗是否爲空
            if(userVal==""){
                alert("用戶名不可爲空");
                return false;
            }
            if(pwdVal==""){
                alert("密碼不可爲空");
                return false;
            }
            return true;
        }
    </script>
    <body>
        <form action="#" method="get" onsubmit="return checkForm()">
            <table width="60%" height="60%"  align="center" bgcolor="#ffffff">
                <tr>
                    <td colspan="3">會員註冊USER REGISTER</td>
                </tr>
                <tr>
                    <td width="20%">用戶名:</td>
                    <td width="40%"><input type="text" name="username" id="username"></td>
                    <td width="40%"><span id="username_msg"></span></td>
                </tr>
                <tr>
                    <td>密碼:</td>
                    <td><input type="password" name="password" id="password"></td>
                    <td><span id="password_msg"></span></td>
                </tr>
                <tr>
                    <td>確認密碼:</td>
                    <td><input type="password" name="repassword" id="repassword"></td>
                    <td><span id="repassword_msg"></span></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input type="text" name="email" id="email"></td>
                    <td><span id="email_msg"></span></td>
                </tr>
                <tr>
                    <td>姓名:</td>
                    <td><input type="text" name="name"></td>
                </tr>
                <tr>
                    <td>性別:</td>
                    <td>
                        <input type="radio" name="sex" value="男"> 男
                        <input type="radio" name="sex" value="女" />女
                    </td>
                </tr>
                <tr>
                    <td>出生日期</td>
                    <td>
                        <input type="text" name="birthday">

                    </td>
                </tr>
                <tr>
                    <td>驗證碼</td>
                    <td>
                        <input type="text" name="checkcode">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="註冊" />
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        
        <title></title>
        <link rel="stylesheet" href="../css/lunbo.css" />
        <script type="text/javascript">
        /*    步驟分析:
        1.肯定事件(頁面加載成功事件)
            onload = function(){
                //設置週期執行的定時
                setInterval(changeImg,2000);
            }
        2.編寫changeImg函數(改變圖片)
            function changeImg(){
                a.獲取圖片的標籤對象
                    var imgObj = document.getElementById("id");
                b.改變src屬性的值
                    imgObj.src = "url";
            }*/
            onload = function(){
                //設置週期執行的定時
                setInterval(changeImg,2000);
            }
            var i = 1;
            function changeImg(){
                i++;
                //a.獲取圖片的標籤對象
                var imgObj = document.getElementById("imgId");
                //b.改變src屬性的值
//                alert(imgObj.src);
                imgObj.src = "../img/"+i+".jpg";
                //判斷是不是最後一張
                if(i==3){
                    i=0;
                }
            }
        </script>
    </head>
    <body>
        <!--
            一個大div中放置8個div
        -->
        <div>
            <!--logo
                嵌套三個div
            -->
            <div class="header">
                <div>
                    <img src="../img/logo2.png" height="40px" />
                </div>
                <div>
                    <img src="../img/header.jpg" />
                </div>
                <div>
                    <a href="#">登陸</a>
                    <a href="#">註冊</a>
                    <a href="#">購物車</a>
                </div>
            </div>
            
            <div class="cle"></div>
            
            <!--菜單-->
            <div class="menu">
                <ul>
                    <li><a href="#">首頁</a></li>
                    <li><a href="#">首頁</a></li>
                    <li><a href="#">首頁</a></li>
                    <li><a href="#">首頁</a></li>
                </ul>
            </div>
            
            <!--輪播圖-->
            <div class="lunbo">
                <img id="imgId" src="../img/1.jpg"/>
            </div>
            
            <!--熱門
                將起劃分紅兩個div
                    左邊放圖片
                    右邊的放商品
                        
            -->
            <div class="hot">
                <!--存放熱門商品和一張圖片-->
                <div>
                    <h2 style="display: inline;">熱門商品</h2>
                    <img  src="../img/title2.jpg" />
                </div>
                <div>
                    <!--存放左邊的圖片-->
                    <div class="left">
                        <img src="../img/big01.jpg" />
                    </div>
                    <!--存放商品圖片-->
                    <div class="right">
                        <div class="middle">
                            <img src="../img/middle01.jpg" />
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">電飯煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">電飯煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">電飯煲</a></p>
                            <p align="center">200</p>
                        </div>
                        
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">電飯煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">電飯煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">電飯煲</a></p>
                            <p align="center">200</p>
                        </div>
                        
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">電飯煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">電飯煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">電飯煲</a></p>
                            <p align="center">200</p>
                        </div>
                        
                    </div>
                </div>
            </div>
            
            <div class="cle"></div>
            
            <!--廣告-->
            <div class="ad1">
                <img src="../img/ad.jpg"/>
            </div>
            
            <!--最新-->
            <div></div>
            
            <!--廣告-->
            <div class="ad1">
                <img src="../img/footer.jpg"/>
            </div>
            
            <!--版權foot-->
            <div class="foot">
                <p>
                        <a href="#">關於咱們</a> 
                        <a href="#">關於咱們</a> 
                        <a href="#">關於咱們</a> 
                        <a href="#">關於咱們</a> 
                        <a href="#">關於咱們</a> 
                    </p>
                    <p>
                        Copyright &copy; 2005-2016 傳智商城 版權全部
                    </p>
            </div>
            
            
        </div>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //週期執行定時器
//            var interId = setInterval(fun,1000);
//            var interId = setInterval("fun()",1000);
            var i = 0;
            function fun(){
                i++;
                alert(i);
                if(i==3){
                    //清除週期執行定時器
                    clearInterval(interId);
                }
            }
            //單次執行定時器
//            var timeId = setTimeout(fun1,1000);
            var timeId = setTimeout("fun1()",1000);
            function fun1(){
                i++;
                alert(i);
            }
            //清除單次執行定時器
            //clearTimeout(timeId);
        </script>
    </head>
    <body>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            a{
                text-decoration: none;
            }
            .cle{
                clear: both;
            }
            /*logo 部分的div*/
            .header{
                width: 100%;
            }
            .header div{
                float:left;
                width:33.33%;
                height: 60px;
                line-height: 50px;
            }
            .header a{
                padding: 15px;
            }
            
            /*菜單部分*/
            .menu{
                width: 100%;
                background-color: #000;
                height: 50px;
                padding-top:1px
            }
            
            .menu ul li{
                list-style-type: none;
                display: inline;
            }
            
            .menu a{
                font-size: 25px;
                color: #fff;
                
            }
            
            /*輪播圖*/
            .lunbo{
                width:100%;
                margin-top:10px;
                margin-bottom: 10px;
            }
            
            .lunbo img{
                width:100%;
            }
            
            /*熱門商品*/
            /*.left,.right{
                float:left;
            }*/
            .left{
                float:left;
                width: 16%;
                height: 500px;
            }
            .right{
                float: left;
                width:84%;
                text-align: center;
                height: 500px;
            }
            
            .middle{
                float:left;
                width: 50%;
                height: 250px;
            }
            .item{
                float:left;
                width:16.66%;
                height: 250px;
            }
            
            /*給廣告*/
            .ad1{
                width: 100%;
            }
            .ad1 img{
                width: 100%;
            }
            
            /*版權*/
            .foot{
                width:100%;
            }
            .foot p{
                text-align: center;
            }
        </style>
        <script>
        /*    步驟分析:
        1.肯定事件(頁面加載成功事件)
            0.設置週期執行定時器的id
            var interId;
            0.設置計數器
            var count = 0;
            onload = function(){
                //設置週期執行的定時器
                interId = setInterval(showAd,4000);
            }
        2.編寫showAd函數(展現廣告)
            0.計數
            count++;
            a.獲取div標籤對象
                var divObj = document.getElementById("divId");
            b.展現廣告(顯示div)
                divObj.style.css屬性 = "block";
            c.設置單次執行定時器(用來計時)
                setTimeout(hideAd,2000);
            d.判斷是否已經執行三次了
                if(count==3){
                    clearInterval(interId);
                }
        3.編寫hideAd函數(隱藏div)
            a.獲取div標籤對象
                var divObj = document.getElementById("divId");
            b.展現廣告(顯示div)
                divObj.style.css屬性 = "none";*/
            var interId;
            var count = 0;
            onload = function(){
                //設置週期執行的定時器
                interId = setInterval(showAd,4000);
            }
            //2.編寫showAd函數(展現廣告)
            function showAd(){
                //0.計數
                count++;
                //a.獲取div標籤對象
                var divObj = document.getElementById("ad");
                //b.展現廣告(顯示div)
                divObj.style.display = "block";
                //c.設置單次執行定時器(用來計時)
                setTimeout("hideAd()",2000);
                //d.判斷是否已經執行三次了
                if(count==3){
                    clearInterval(interId);
                }
            }
            function hideAd(){
                //a.獲取div標籤對象
                var divObj = document.getElementById("ad");
                //b.展現廣告(顯示div)
                divObj.style.display = "none";
            }
        </script>
    </head>
    <body>
        <div id="ad" style="width:100%;display: none;">
            <img src="../img/ad_.jpg" width="100%" />
        </div>
        <!--
            一個大div中放置8個div
        -->
        <div>
            <!--logo
                嵌套三個div
            -->
            <div class="header">
                <div>
                    <img src="../img/logo2.png" height="40px" />
                </div>
                <div>
                    <img src="../img/header.jpg" />
                </div>
                <div>
                    <a href="#">登陸</a>
                    <a href="#">註冊</a>
                    <a href="#">購物車</a>
                </div>
            </div>
            
            <div class="cle"></div>
            
            <!--菜單-->
            <div class="menu">
                <ul>
                    <li><a href="#">首頁</a></li>
                    <li><a href="#">首頁</a></li>
                    <li><a href="#">首頁</a></li>
                    <li><a href="#">首頁</a></li>
                </ul>
            </div>
            
            <!--輪播圖-->
            <div class="lunbo">
                <img src="../img/1.jpg"/>
            </div>
            
            <!--熱門
                將起劃分紅兩個div
                    左邊放圖片
                    右邊的放商品
                        
            -->
            <div class="hot">
                <!--存放熱門商品和一張圖片-->
                <div>
                    <h2 style="display: inline;">熱門商品</h2>
                    <img src="../img/title2.jpg" />
                </div>
                <div>
                    <!--存放左邊的圖片-->
                    <div class="left">
                        <img src="../img/big01.jpg" />
                    </div>
                    <!--存放商品圖片-->
                    <div class="right">
                        <div class="middle">
                            <img src="../img/middle01.jpg" />
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">電飯煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">電飯煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">電飯煲</a></p>
                            <p align="center">200</p>
                        </div>
                        
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">電飯煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">電飯煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">電飯煲</a></p>
                            <p align="center">200</p>
                        </div>
                        
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">電飯煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">電飯煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">電飯煲</a></p>
                            <p align="center">200</p>
                        </div>
                        
                    </div>
                </div>
            </div>
            
            <div class="cle"></div>
            
            <!--廣告-->
            <div class="ad1">
                <img src="../img/ad.jpg"/>
            </div>
            
            <!--最新-->
            <div></div>
            
            <!--廣告-->
            <div class="ad1">
                <img src="../img/footer.jpg"/>
            </div>
            
            <!--版權foot-->
            <div class="foot">
                <p>
                        <a href="#">關於咱們</a> 
                        <a href="#">關於咱們</a> 
                        <a href="#">關於咱們</a> 
                        <a href="#">關於咱們</a> 
                        <a href="#">關於咱們</a> 
                    </p>
                    <p>
                        Copyright &copy; 2005-2016 傳智商城 版權全部
                    </p>
            </div>
            
            
        </div>
    </body>
    
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function btn1(){
//                history.forward();
                history.go(1);
            }
        </script>
    </head>
    <body>
        我是a頁面<br />
        <a href="b.html">b.html</a><br>
        <input type="button" value="前進" onclick="btn1()"/>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function btn2(){
//                history.back();
                history.go(-1);
            }
        </script>
    </head>
    <body>
        我是b頁面<br />
        
            <input type="button" value="後退" onclick="btn2()"/>
        
    </body>
    
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function btn3(){
                alert(location.href);
            }
            function btn(){
                location.href = "../案例3-彈出廣告.html";
            }
        </script>
    </head>
    
    <body>
        <input type="button" value="獲取url" onclick="btn3()">
        <input type="button" value="設置url" onclick="btn()">
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            onload = function(){
                document.getElementById("inp").onclick = function(){
                    window.close();
                }
            }
        </script>
        
    </head>
    <body>
        我是a頁面
        <input type="button" value="close" id="inp"/>
    </body>
    <script>
        
    </script>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //打開a頁面
            function btn(){
                window.open("a.html");            
            }
        </script>
    </head>
    <body>
            <input type="button" value="openA" onclick="btn()"/>
    </body>
    
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //對話框
//            var mes = window.prompt("請輸入你的姓名","tom");
//            alert(mes);
            //確認框
            var message = confirm("你肯定付款嗎");
            alert(message);
        </script>
    </head>
    <body>
    </body>
    
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //獲取文本框的值
            function getVal(){
                //1.獲取要操做的標籤對象
                var inpObj = document.getElementById("inp");
                //2.獲取value屬性的值
                alert(inpObj.value);
            }
            //設置value屬性的值
            function setVal(){
                //1.獲取要操做的標籤對象
                var inpObj = document.getElementById("inp");
                //2.設置value的值
                inpObj.value = "jerry";
            }
        </script>
    </head>
    <body>
        <input type="text" name="username" value="tom" id="inp"/><br />
        <input type="button" value="獲取value的值" onclick="getVal()"/>
        <input type="button" value="設置value的值" onclick="setVal()"/>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //獲取標籤體的內容
            function getVal(){
                //1.獲取要操做的標籤對象
                var spObj = document.getElementById("sp");
                //2.獲取標籤體的內容
                alert(spObj.innerHTML);
            }
            //設置標籤體的內容
            function setVal(){
                //1.獲取要操做的標籤對象
                var spObj = document.getElementById("sp");
                //2.設置標籤體的內容
                spObj.innerHTML += "<font color='red'>現在的如今早已不是曾經說好的之後</font>";
            }
        </script>
    </head>
    <body>
        <span id="sp">佑我中華</span><br />
        <input type="button" value="獲取標籤體的內容" onclick="getVal()"/>
        <input type="button" value="設置標籤體的內容" onclick="setVal()"/>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //校驗
            function checkInp(){
                //0.獲取要校驗的值
                var val = document.getElementById("inp").value;
                //校驗
                //1.編寫正則表達式
                var zz = /^[a-z0-9_-]{3,16}$/;  //object
                var kzz = /^\s*$/;
//                alert(typeof zz);
                //2.校驗值
//                var flag = zz.test(val);
//                alert(flag);

//                alert(kzz.test(val));
                if(kzz.test(val)){
                    alert("用戶名不可爲空");
                }else if(!zz.test(val)){
                    alert("用戶名不符合格式");
                }else{
                    alert("知足格式....");
                }
            }
        </script>
    </head>
    <body>
        <input type="text" id="inp" /><br />
        <input type="button" value="校驗輸入的值" onclick="checkInp()"/>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //得到焦點的時候要觸發的函數
            function focusFun(){
                document.getElementById("sp").innerHTML = "輸入框得到焦點";
            }
            //失去焦點的時候要觸發的函數
            function blurFun(){
                document.getElementById("sp").innerHTML = "輸入失去焦點了啊....";
            }
            //內容改變的時候要觸發的函數
            function changeFun(){
                alert("輸入框的內容改變了...");
            }
        </script>
    </head>
    <body>
        <input type="text" onfocus="focusFun()" onblur="blurFun()" onchange="changeFun()"/><br />
        <span id="sp"></span><br />
    </body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <style type="text/css">
        #e02, #e022 {
            border: 1px solid #000000;
              height: 200px;
             width: 200px;
        }
    </style>
    <script type="text/javascript">
        
        // 頁面加載事件：當整個html頁面加載成功調用
        window.onload = function(){
            // 文本框事件
            var e01 = document.getElementById("e01");
            e01.onfocus = function(){
                html("textMsg","文本框得到焦點：focus");
            }
            e01.onblur = function(){
                html("textMsg","文本框失去焦點：blur");
            }
            e01.onkeydown = function(){
                html("textMsg","鍵盤按下：keydown；");
            }
            e01.onkeypress = function(event){
                var event = event || window.event;
                append("textMsg","鍵盤按：keypress ("+ String.fromCharCode(event.keyCode)+")；");
            }
            e01.onkeyup = function(){
                append("textMsg","鍵盤彈起：keyup；");
            }
            
            // 鼠標事件
            var e02 = document.getElementById("e02");
            e02.onmouseover = function(){
                html("divMsg","鼠標移上：mouseover");
            }
            e02.onmouseout = function(){
                html("divMsg","鼠標移出：mouseout");
            }
            
            
            var e022 = document.getElementById("e022");
            e022.onmousedown = function(){
                html("divMsg2","鼠標按下：mousedown");
            }
            e022.onmouseup = function(){
                html("divMsg2","鼠標彈起：mouseup");
            }
            
            
            // 按鈕事件
            var e03 = document.getElementById("e03");
            e03.onclick = function () {
                html("buttonMsg","單擊：click");
            };
            e03.ondblclick= function () {
                html("buttonMsg","雙擊：dblclick");
            };
            
        };
        
        /**
         * 指定位置顯示指定信息
         * @param objId ，元素的id屬性值
         * @param  text，須要顯示文本信息
         */
        function html(objId,text){
            document.getElementById(objId).innerHTML = text;
        }
        /**
         * 指定位置追加指定信息
         * @param objId ，元素的id屬性值
         * @param  text，須要顯示文本信息
         */
        function append(objId,text){
            document.getElementById(objId).innerHTML += text;
        }
        
    </script>
    
</head>
<body>
    <input id="e01" type="text" /><span id="textMsg"></span>
    <hr/>
    <div id="e02" >鼠標移上來試試</div><span id="divMsg"></span>
    <hr/>
    <div id="e022" >鼠標移上來點擊試試</div><span id="divMsg2"></span>
    <hr/>
    <input id="e03" type="button" value="能夠點擊"/><span id="buttonMsg"></span>
</body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function btn(){
                /*經過id選擇器獲取文本框的值*/
                var userObj = document.getElementById("usernameId");
//                alert(userObj.value);
                /*獲取全部span標籤中的值*/
//                var spanObjArr = document.getElementsByTagName("span");
//                for(var i=0;i<spanObjArr.length;i++){
//                    alert(spanObjArr[i].innerHTML);
//                }
                /*獲取全部class爲spanClass的元素對象*/
//                var spanObjArr1 = document.getElementsByClassName("spanClass");
//                for(var i=0;i<spanObjArr1.length;i++){
//                    alert(spanObjArr1[i].innerHTML);
//                }
                /*獲取name爲hobby的元素對象*/
                var hobbyObjArr = document.getElementsByName("hobby");
                alert(hobbyObjArr.length);
            }
        </script>
    </head>
    <body>
        <input type="text" value="tom" id="usernameId" name="username"/><br />
        <input type="checkbox" name="hobby" value="抽菸" />抽菸<br />
        <input type="checkbox" name="hobby" value="喝酒" />喝酒<br />
        <input type="checkbox" name="hobby" value="燙頭" />燙頭<br />
        <span class="spanClass">佑我中華</span>
        <span class="spanClass">佑我中華1</span>
        <span>佑我中華2</span><br />
        <input type="button" value="獲取對象" onclick="btn()" />
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            
            function btn(){
//                //建立一個標題元素節點,標題名稱客,並將它加到div內部     <h1>客</h1>
//                //建立元素節點
//                var ele = document.createElement("h1");//<h1></h1>
//                //建立文本節點
//                var eleText = document.createTextNode("客");//客
//                //將文本節點添加到指定的節點中
//                ele.appendChild(eleText);//<h1>客</h1>
//                //獲取div元素對象
//                var divObj = document.getElementById("di");
//                divObj.appendChild(ele);
                
                var divObj = document.getElementById("di");
                divObj.innerHTML+="<h1>客</h1>";
            }
            function btn1(){
                //刪除div元素中的子節點
                var divObj = document.getElementById("di");
//                divObj.removeChild(divObj.childNodes[0]);
//                divObj.innerHTML = "";
                divObj.remove();
            }
        </script>
    </head>
    <body>
        <div id="di">
        
        </div>
        <input type="button" value="設置" onclick="btn()" />
        <input type="button" value="刪除" onclick="btn1()" />
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function btn(){
                var inpObj = document.getElementById("inp");
                /*給標籤對象設置屬性和值*/
//                inpObj.setAttribute("value","jerry");
                inpObj.value = "jerry";
            }
            function btn1(){
                var inpObj = document.getElementById("inp");
//                var Val = inpObj.getAttribute("value");
//                alert(Val);
                alert(inpObj.value);
            }
            function btn2(){
                var inpObj = document.getElementById("inp");
                inpObj.removeAttribute("value");
//                inpObj.value = "";
            }
        </script>
    </head>
    <body>
        <input id="inp" name="asd" value="tom"/><br />
        <input type="button" value="給輸入框設置默認值" onclick="btn()" /><br />
        <input type="button" value="獲取輸入框的值" onclick="btn1()" /><br />
        <input type="button" value="刪除輸入框的value屬性" onclick="btn2()" /><br />
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            var arr = new Array();
            var arr1 = new Array(3);
            var arr2 = new Array(1,2,3);
            
            arr[0] = 11;
            arr[1] = "tom";
            arr[2] = true;
//            alert(arr.length);
//            alert(arr.join("#"));//遍歷數組,在數組每一個元素之間加入#
//            alert(arr);
//            var ele = arr.shift();
//            alert(ele);
            var l = arr.unshift(5,3);
            alert(arr);
//            alert(l);
//            alert(arr);
//            alert(arr.sort());
//            alert(arr.reverse());
        </script>
    </head>
    <body>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //String
            var str = "[www.baidu.com]";
//            alert(str.length);
//            alert(str.substring(1,str.length-1));
//            alert(str.slice(1,-1));
            //Boolean
//            alert(Boolean("abc"));
            //Math
//            alert(Math.PI);
            
            //Date
//            alert(new Date().toLocaleString());
            
            var str = "188.8元";
//            alert(parseInt(str));
//            alert(parseFloat(str));
//            alert(Number(str)); //NaN
            
            var str1 = "www.baidu.com/引用數據類型 .html";
            var str2 = encodeURI(str1);
            document.write(str2+"<br/>");
            var str3 = decodeURI(str2);            
            document.write(str3);
            
            var str4 = "alert('hello js')";
            eval(str4);
            
        </script>
    </head>
    <body>
    </body>
</html>


<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script>
        /*    步驟分析:
        1.肯定事件(表單提交事件)
            <form onsubmit="retrun checkForm()"></form>
            <form id="formId"></form>
        2.編寫checkForm函數
            function checkForm(){
                //0/設置全局開關
                var flag = true;
                //a.獲取用戶名和密碼輸入框對象
                    var 對象 = document.getElementById("id");
                //b.獲取用戶名和密碼的值
                    var val = 對象.value;
                //c.編寫正則表達式
                    
                //d.校驗
                    if(zz.test(val)){
                        //校驗不經過
                        給對應的span標籤中填寫提示信息
                        flag = false;
                    }else{
                        //校驗經過
                        給對應的span標籤中填寫提示信息
                    }
                //e.返回值
                return flag;
                    
            }*/
            onload = function(){
                document.getElementById("formId").onsubmit=function(){
                    //設置全局開關
                    var flag = true;
                    //a.獲取用戶名和密碼輸入框對象
                    var userObj = document.getElementById("username");
                    var pwdObj = document.getElementById("password");
                    //b.獲取用戶名和密碼的值
                    var userVal = userObj.value;
                    var pwdVal = pwdObj.value;
//                    alert(userVal+"   "+pwdVal);
                    //c.編寫正則表達式
                    var zz = /^[a-z0-9_-]{3,16}$/;  //object
                    var kzz = /^\s*$/; 
                    //d.校驗
                    //用戶名
                    if(kzz.test(userVal)){
                        //校驗不經過
                        //給對應的span標籤中填寫提示信息
                        //獲取span標籤對象
                        document.getElementById("username_msg").innerHTML = "用戶名不可爲空";
                        flag = false;
                    }else if(!zz.test(userVal)){
                        //獲取span標籤對象
                        document.getElementById("username_msg").innerHTML = "用戶名的格式不合法";
                        flag = false;
                    }else{
                        //獲取span標籤對象
                        document.getElementById("username_msg").innerHTML = "✔";
                    }
                    
                    //密碼
                    if(kzz.test(pwdVal)){
                        //校驗不經過
                        //給對應的span標籤中填寫提示信息
                        //獲取span標籤對象
                        document.getElementById("password_msg").innerHTML = "<font color='#f00'>密碼不可爲空</font>";
                        flag = false;
                    }else if(!zz.test(pwdVal)){
                        //獲取span標籤對象
                        document.getElementById("password_msg").innerHTML = "密碼的格式不合法";
                        flag = false;
                    }else{
                        document.getElementById("password_msg").innerHTML = "✔";
                    }
                    
                    return flag;
                }
            }
    </script>
    <body>
        <form action="#" method="get" id="formId">
            <table width="60%" height="60%"  align="center" bgcolor="#ffffff">
                <tr>
                    <td colspan="3">會員註冊USER REGISTER</td>
                </tr>
                <tr>
                    <td width="20%">用戶名:</td>
                    <td width="40%"><input type="text" name="username" id="username"></td>
                    <td width="40%"><span id="username_msg"></span></td>
                </tr>
                <tr>
                    <td>密碼:</td>
                    <td><input type="password" name="password" id="password"></td>
                    <td><span id="password_msg"></span></td>
                </tr>
                <tr>
                    <td>確認密碼:</td>
                    <td><input type="password" name="repassword" id="repassword"></td>
                    <td><span id="repassword_msg"></span></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input type="text" name="email" id="email"></td>
                    <td><span id="email_msg"></span></td>
                </tr>
                <tr>
                    <td>姓名:</td>
                    <td><input type="text" name="name"></td>
                </tr>
                <tr>
                    <td>性別:</td>
                    <td>
                        <input type="radio" name="sex" value="男"> 男
                        <input type="radio" name="sex" value="女" />女
                    </td>
                </tr>
                <tr>
                    <td>出生日期</td>
                    <td>
                        <input type="text" name="birthday">

                    </td>
                </tr>
                <tr>
                    <td>驗證碼</td>
                    <td>
                        <input type="text" name="checkcode">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="註冊" />
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            /*        步驟分析:
            1.肯定事件(頁面加載成功事件)
                onload = function(){
                    
                }
            2.編寫匿名函數
                a.獲取當前頁面全部行對象
                    var trObjArr = document.getElementsByTagName("tr");
                b.遍歷數組對象,給計數行和偶數行添加不一樣的背景顏色
                    for(var i=0;i<trObjArr.length;i++){
                        if(i%2==0){
                            trObjArr[i].style.backgroundColor = "顏色";
                        }else{
                            trObjArr[i].style.backgroundColor = "顏色";
                        }
                    }*/
            onload = function (){
                //a.獲取當前頁面全部行對象
                var trObjArr = document.getElementsByTagName("tr");
                //b.遍歷數組對象,給計數行和偶數行添加不一樣的背景顏色
                for(var i=1;i<trObjArr.length;i++){
                    if(i%2==0){
                        trObjArr[i].style.backgroundColor = "#ff0";
                    }else{
                        trObjArr[i].style.backgroundColor = "#f0f";
                    }
                }
            }
        </script>
    </head>
    <body>
        <table id="tab1" border="1" width="800" align="center" >
            
            <tr style="background-color: #999999;">
                <th>分類ID</th>
                <th>分類名稱</th>
                <th>分類描述</th>
                <th>操做</th>
            </tr>
            <tr>
                <td>1</td>
                <td>手機數碼</td>
                <td>手機數碼類商品</td>
                <td><a href="">修改</a>|<a href="">刪除</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>電腦辦公</td>
                <td>電腦辦公類商品</td>
                <td><a href="">修改</a>|<a href="">刪除</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>鞋靴箱包</td>
                <td>鞋靴箱包類商品</td>
                <td><a href="">修改</a>|<a href="">刪除</a></td>
            </tr>
            <tr>
                <td>4</td>
                <td>家居飾品</td>
                <td>家居飾品類商品</td>
                <td><a href="">修改</a>|<a href="">刪除</a></td>
            </tr>
        </table>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            /*    步驟分析:
        1.肯定事件(單擊事件)
            給頭部的複選框添加單擊事件
        2.編寫函數
            a.獲取頭部複選框狀態
                對象.checked;
            b.獲取其餘的複選框對象
            c.遍歷其餘的複選框對象數組,分別給每個複選框對象設置checked屬性*/
            function checkAll(flag){
//                alert(flag);
                //a.獲取頭部複選框狀態
//                alert(obj.checked);
                //b.獲取其餘的複選框對象
                var elseTrObjArr = document.getElementsByClassName("itemSelect");
                //c.遍歷其餘的複選框對象數組,分別給每個複選框對象設置checked屬性
                for(var i=0;i<elseTrObjArr.length;i++){
                    elseTrObjArr[i].checked = flag;
                }
            }
        </script>
    </head>
    <body>
        <table id="tab1" border="1" width="800" align="center" >
            <tr>
                <td colspan="5"><input type="button" value="添加"/> <input type="button" value="刪除"></td>
            </tr>
            <tr>                                <!--this表示當前元素對象-->
                <th><input type="checkbox" onclick="checkAll(this.checked)"></th>
                <th>分類ID</th>
                <th>分類名稱</th>
                <th>分類描述</th>
                <th>操做</th>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect"></td>
                <td>1</td>
                <td>手機數碼</td>
                <td>手機數碼類商品</td>
                <td><a href="">修改</a>|<a href="">刪除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect"></td>
                <td>2</td>
                <td>電腦辦公</td>
                <td>電腦辦公類商品</td>
                <td><a href="">修改</a>|<a href="">刪除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect"></td>
                <td>3</td>
                <td>鞋靴箱包</td>
                <td>鞋靴箱包類商品</td>
                <td><a href="">修改</a>|<a href="">刪除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect"></td>
                <td>4</td>
                <td>家居飾品</td>
                <td>家居飾品類商品</td>
                <td><a href="">修改</a>|<a href="">刪除</a></td>
            </tr>
        </table>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            // 定義二維數組:
            var arr = new Array(4);
            arr[0] = new Array("石家莊","邯鄲","保定","秦皇島");
            arr[1] = new Array("鄭州市","洛陽市","安陽市","南陽市");
            arr[2] = new Array("瀋陽市","錦州市","大連市","鐵嶺市");
            arr[3] = new Array("長春市","吉林市","四平市","通化市");
        </script>
        <script>
            /*步驟分析:
        1.肯定事件(改變事件)
            給省份的下拉選添加改變事件
        2.編寫changePro函數
            function changePro(){
                a.獲取選中省份所對應的市數組(value)
                    var cityArr = arr[value];
                b.獲取市的下拉選對象
                    var cityObj = document.getElementById("cityId");
                
                c.遍歷市數組,將每個市拼成option追加到市的下拉選中
                    cityObj.innerHTML += "";
                    
            }*/
            function changePro(index){
//                alert(index);
//                a.獲取選中省份所對應的市數組(value)
                var cityArr = arr[index];
                //b.獲取市的下拉選對象
                var cityObj = document.getElementById("city");
                //初始化
                cityObj.innerHTML = "<option>=請選擇=</option>";
                //c.遍歷市數組,將每個市拼成option追加到市的下拉選中
                for(var i=0;i<cityArr.length;i++){
                    cityObj.innerHTML += "<option>"+cityArr[i]+"</option>";
                }
            }
        </script>
    </head>
    <body>
        <form action="#" method="get">
            <input type="hidden" name="id" value="007"/>
            姓名:<input name="username" value="xuduoduo"/><br>
            密碼:<input type="password" name="password"  value="123"><br>
            性別:<input type="radio" name="sex" value="1" checked="checked">男
                <input type="radio" name="sex" value="0">女
                <br>
            愛好:<input type="checkbox" name="hobby" value="eat">吃
                <input type="checkbox" name="hobby" value="drink" checked="checked">喝
                <input type="checkbox" name="hobby" value="sleep" checked="checked">睡
                <br>
            頭像:<input type="file" name="photo"><br>
            籍貫:
                <select name="pro" onchange="changePro(this.value)">
                    <option >--請選擇--</option>
                    <option value="0">河北</option>
                    <option value="1">河南</option>
                    <option value="2">遼寧</option>
                    <option value="3">吉林</option>
                </select>
                <select id="city">
                    <option >-請選擇-</option>     
                </select>
            <br>
            自我介紹:
                <textarea name="intr" cols="40" rows="4">good!</textarea>
            <br>
            <input type="submit" value="保存"/>
            <input type="reset" />
            <input type="button" value="普通按鈕"/>
        </form>
    </body>
</html>
<!--
    
-->


案例1-註冊頁面的簡單校驗
    需求分析:
        當表單提交的時候,對用戶名和密碼進行校驗,校驗是否爲空,若是用戶名和密碼爲空,則彈框提示並不容許表單提交.反之容許
    技術分析:
        javaScript:
    //////////////
    步驟分析:
        1.肯定事件(表單提交事件)
            //checkForm函數必需要有返回值(Boolean)
            <form onsubmit="return checkForm()"></form>
        2.編寫函數(校驗用戶名和密碼)
            a.獲取用戶名和密碼的標籤對象
                var obj = document.getElementById("id");
            b.獲取用戶名和密碼的值(value屬性)
                var userVal = obj.value;
            c.校驗是否爲空
                if(userVal==""){
                    alert("用戶名不可爲空");
                    return false;
                }
            d.返回值
            return true;
案例2-輪播圖
    需求分析:
        頁面加載成功後,每隔2秒切換一張圖片
    技術分析:
        javaScript:
        定時器
    ///////////
    步驟分析:
        1.肯定事件(頁面加載成功事件)
            onload = function(){
                //設置週期執行的定時
                setInterval(changeImg,2000);
            }
        2.編寫changeImg函數(改變圖片)
            function changeImg(){
                a.獲取圖片的標籤對象
                    var imgObj = document.getElementById("id");
                b.改變src屬性的值
                    imgObj.src = "url";
            }

案例3-彈出廣告
    需求分析:
        頁面加載成功後,每隔4秒展現一次廣告,廣告時間2秒鐘,以此輪詢3次
    技術分析:
        定時器
    /////////////////////
    步驟分析:
        1.肯定事件(頁面加載成功事件)
            0.設置週期執行定時器的id
            var interId;
            0.設置計數器
            var count = 0;
            onload = function(){
                //設置週期執行的定時器
                interId = setInterval(showAd,4000);
            }
        2.編寫showAd函數(展現廣告)
            0.計數
            count++;
            a.獲取div標籤對象
                var divObj = document.getElementById("divId");
            b.展現廣告(顯示div)
                divObj.style.css屬性 = "block";
            c.設置單次執行定時器(用來計時)
                setTimeout(hideAd,2000);
            d.判斷是否已經執行三次了
                if(count==3){
                    clearInterval(interId);
                }
        3.編寫hideAd函數(隱藏div)
            a.獲取div標籤對象
                var divObj = document.getElementById("divId");
            b.展現廣告(顯示div)
                divObj.style.css屬性 = "none";
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程