Web前端——JavaScript練習

one發表於2019-06-29
Web前端JavaScript

Js練習

顯示和隱藏，改變display屬性(點選檢視圖片)

關鍵程式碼：

e.style.display = "block";
e.style.display = "none";

原始碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>顯示和隱藏</title>
        <script type="text/javascript">
            function showPicture(){
                //普通方式獲得控制元件例項
                var e = document.getElementById("myimg");
                e.style.display = "block";
            }
            
            function hidePicture(){
                //querySelector是html5增加的
                //id前面得寫#,class前面得寫
                document.querySelector("#myimg").style.display = "none";
                //標籤直接寫即可,獲取到第一個img標籤
                //document.querySelector("img").style.display = "none";
            }
        </script>
    </head>
    <body>
        <a href="javascript:void(0);"onclick="showPicture()">檢視圖片</a>
        <a href="javascript:void(0);"onclick="hidePicture()">隱藏圖片</a>
        <br />
        <img id="myimg" src="http://www.w3school.com.cn/i/eg_mouse.jpg" style="display: none;"  >
    </body>
</html>

querySelector三種方法介紹

滑鼠滑動更改內容 onmouseover

關鍵：
onmouse事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            function moveToBlue(){
                var e = document.querySelector("#btn_blue");
                var e2 = document.querySelector("#btn_green");
                var div = document.querySelector("#content");
                e.style.border = "1px solid #ccc";
                e.style.backgroundColor = "white";
                e2.style.border = "none";
                e2.style.backgroundColor = "none";
                div.style.backgroundColor = "blue";
            }
            function moveToGreen(){
                var e = document.querySelector("#btn_blue");
                var e2 = document.querySelector("#btn_green");
                var div = document.querySelector("#content");
                e2.style.border = "1px solid #ccc";
                e2.style.backgroundColor = "white";
                e.style.border = "none";
                e.style.backgroundColor = "none";
                div.style.backgroundColor = "green";
            }
        </script>
    </head>
    <body>
        <div style="width: 100px;height: 50px;">
            <button id="btn_blue" style="width: 45px;"onmousemove="moveToBlue()">藍色</button>
            <button id="btn_green" style="width: 45px;"onmousemove="moveToGreen()">綠色</button>
            <div id="content" style="background-color: blue;width: auto;height: 50px;"></div>
        </div>

        <br />
        <img id="myimg" src="http://www.w3school.com.cn/i/eg_mouse.jpg" style="display: none;">
    </body>
</html>

時間自動更新

關鍵程式碼：
Js中內建了Date物件

  • getFullYear 年
  • getMonth 月
  • getDate 日
  • getHours 小時
  • getMinutes 分鐘
  • getSeconds 秒
  • getDay 星期幾（0-6） 星期日為0
方法 說明
getFullYear() 從 Date 物件以四位數字返回年份。
getMonth() 從 Date 物件返回月份 (0 ~ 11)。
getDate() 從 Date 物件返回一個月中的某一天 (1 ~ 31)。
getDay() 從 Date 物件返回一週中的某一天 (0 ~ 6)。
getHours() 返回 Date 物件的小時 (0 ~ 23)。
getMinutes() 返回 Date 物件的分鐘 (0 ~ 59)。
getSeconds() 返回 Date 物件的秒數 (0 ~ 59)。
getMilliseconds() 返回 Date 物件的毫秒(0 ~ 999)。
toString() 把 Date 物件轉換為字串。
toTimeString() 把 Date 物件的時間部分轉換為字串。
toDateString() 把 Date 物件的日期部分轉換為字串。
toUTCString() 根據世界時，把 Date 物件轉換為字串。
toLocaleString() 根據本地時間格式，把 Date 物件轉換為字串。
toLocaleTimeString() 根據本地時間格式，把 Date 物件的時間部分轉換為字串。
toLocaleDateString() 根據本地時間格式，把 Date 物件的日期部分轉換為字串。 
 var now = new Date();

 var time =now.getFullYear() + '年' + now.getMonth() + '月'
     + now.getDate() + '日'
     +now.getHours() +'時' + now.getMinutes() +'分' + now.getSeconds() + '秒';
  1. setTomeout(fn, 週期：豪秒): 週期只會執行一次
  2. setInterval(fn, 週期：豪秒)： 間隔週期一直執行

原始碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>時間自動更新</title>
    </head>
    <body>
        <p></p>
        <script type="text/javascript">
            function setTime() {
                var date = new Date();
                var time = date.toTimeString();
                document.querySelector("p").innerText = time;
            }
            setTime();
            //setIime不能加上括號
            // setInterval(setTime, 1000);
            //加括號得得在外層加雙引號或者單引號
            setInterval("setTime()", 1000);
        </script>
    </body>
</html>

原始碼（es拼接字串）：

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

    </head>
    <body>
        <p></p>
        <script type="text/javascript">
            function setTime() {
                var now = new Date();
                // 通過css的選擇符獲得html元素
                var timer1 = document.querySelector('p');
                var year = now.getFullYear();
                var month = now.getMonth() + 1;
                var date = now.getDate();
                var hours = now.getHours();
                var minutes = now.getMinutes();
                var seconds = now.getSeconds();
                //es6中模板字串,拼接
                timer1.innerText = `${year}年${month}月${date}日${hours}時${minutes}分${seconds}秒`;
            }
            setTime();
            //setIime不能加上括號
            // setInterval(setTime, 1000);
            //加括號得得在外層加雙引號或者單引號
            setInterval("setTime()", 1000);
        </script>
    </body>
</html>

表單

關鍵程式碼：e.checked=true;

全選和反選的實現

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            function selectAll() {
                var hobbys = document.getElementsByName("hobby");
                var btn = document.getElementById("checkall");
                //原生for,推薦使用這一種
                /*
                for (var i = 0; i < hobbys.length; i++) {
                    if (btn.checked) {
                        hobbys[i].checked = true;
                    } else {
                        hobbys[i].checked = false;
                    }

                }
                */
                //使用foreach,使用HBuilderX,在內建的瀏覽器會報錯,提示foreach不起作用
                //使用谷歌瀏覽器開啟則沒有問題,下面使用lambda也是如此情況,可能是HBuilder的bug
                hobbys.forEach(function(hobby) {
                    //如果全選的是選中,則把全部設定為選中的狀態,否則設定為未選中
                    if (btn.checked) {
                        hobby.checked = true;
                    } else {
                        hobby.checked = false;
                    }
                });
                //使用lambda
                /*
                hobbys.forEach((hobby) => {
                    console.log(hobby);
                    if (btn.checked) {
                        hobby.checked = true;
                    } else {
                        hobby.checked = false;
                    }
                });
                */

            }

            function selectRevese() {
                var hobbys = document.getElementsByName("hobby");
                for (var i = 0; i < hobbys.length; i++) {
                    //設定為另外的狀態
                    hobbys[i].checked = !hobbys[i].checked;
                }
            }
        </script>
    </head>
    <body>

        <input type="checkbox" name="hobby">讀書<br><br>
        <input type="checkbox" name="hobby">電影<br><br>
        <input type="checkbox" name="hobby">遊戲<br><br>
        <input type="checkbox" name="hobby">游泳<br><br>
        <input type="checkbox" name="hobby">寫程式碼<br><br>
        <input type="checkbox" id="checkall" onclick="selectAll()">全選 </input>
        <button type="button" onclick="selectRevese()">反選</button>


    </body>
</html>

相關文章