javaScript學習基礎篇(4)-（window,正則,eventListener）

小溪彼岸發表於2016-06-27
JavaScript

  • javaScript正規表示式

    • test() 方法檢索字串中的指定值。返回值是 true 或 false。
    • exec() 方法檢索字串中的指定值。返回值是被找到的值。如果沒有發現匹配，則返回 null。
    • compile() 方法用於改變 RegExp。compile() 既可以改變檢索模式，也可以新增或刪除第二個引數。
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free")); 


var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free")); 


var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));

  • javaScript Window操作

    • 獲取螢幕寬和高
    • window.open() - 開啟新視窗
    • window.close() - 關閉當前視窗
    • window.moveTo() - 移動當前視窗
    • window.resizeTo() - 調整當前視窗的尺寸

    a. 獲取螢幕寬和高

<body>
<p id="demo">sss</p>
<script>
    function getWindowHW() {
        var w = window.innerWidth
                || document.documentElement.clientWidth
                || document.body.clientWidth;

        var h = window.innerHeight
                || document.documentElement.clientHeight
                || document.body.clientHeight;

        x = document.getElementById("demo");
        x.innerHTML = "瀏覽器的內部視窗寬度：" + w + "，高度：" + h + "。"
    }
    //根據螢幕變化呼叫方法
    window.onresize = getWindowHW;
    getWindowHW();
</script>
</body>

b.window.open() - 開啟新視窗

//開啟新視窗
   <script type="text/javascript">
       window.open();
       window.open("http://www.baidu.com");
   </script>

c.window.close() - 關閉當前視窗

    //關閉新視窗
    <script type="text/javascript">
         window.close();
    </script>

d. javaScript獲取螢幕的寬高

<script>
    document.write("可用寬度：" + screen.availWidth);
    document.write("可用高度：" + screen.availHeight);
</script>

e. javaScript獲取當前的URL

<script>
    document.writ(location.href);
    //獲取路徑
    document.write(location.pathname);
    // document.location = "http://www.baidu.com";
</script>

f.javaScript利用window.location.assign開啟新頁面

<script>
//開啟新頁面  window.location.assign("http://www.w3school.com.cn");
</script>

g.瀏覽器上一頁面，下一頁面

<script>
       //瀏覽器返回上一次開啟的頁面
       function goBack()
       {
           window.history.back()
       }
       //瀏覽器進入下一頁面
       function goForward()
       {
           window.history.forward()
       }
   </script>

h.獲取瀏覽器資訊

<label id="example"></label>
<!--獲取瀏覽器資訊-->
<script>
    txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
    txt+= "<p>Browser Name: " + navigator.appName + "</p>";
    txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
    txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
    txt+= "<p>Platform: " + navigator.platform + "</p>";
    txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
    txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";

    document.getElementById("example").innerHTML=txt;

</script>

i.提示框

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function disp_alert()
        {
            alert("我是警告框！！")
        }
        function disp_alert1()
        {
            alert("再次向您問好！在這裡，我們向您演示" + '\n' + "如何向警告框新增折行。")
        }
        function show_confirm()
        {
            var r=confirm("Press a button!");
            if (r==true)
            {
                alert("You pressed OK!");
            }
            else
            {
                alert("You pressed Cancel!");
            }
        }

        function disp_prompt()
        {
            var name=prompt("請輸入您的名字","Bill Gates")
            if (name!=null && name!="")
            {
                document.write("你好！" + name + " 今天過得怎麼樣？")
            }
        }
    </script>
</head>
<body>
<input type="button" onclick="disp_alert()" value="顯示警告框" /><br>
<input type="button" onclick="disp_alert1()" value="折行警告框" /><br>
<input type="button" onclick="show_confirm()" value="確定提示框" /><br>
<input type="button" onclick="disp_prompt()" value="確定提示框" />
</body>
</html>

j. 計時器的實現：

<script>
        function timedMsg()
        {
            var t=setTimeout("alert('1 秒！')",1000)
        }
        function timedText()
        {
            var t1=setTimeout("document.getElementById('txt').value='2 秒'",2000)
            var t2=setTimeout("document.getElementById('txt').value='4 秒'",4000)
            var t3=setTimeout("document.getElementById('txt').value='6 秒'",6000)
        }


       //無限計時器
        var c=0
        var t
        function timedCount()
        {
            document.getElementById('txt').value=c
            c=c+1
            t=setTimeout("timedCount()",1000)
        }
    </script>

    <script type="text/javascript">
        //無限計時器，帶有暫停功能
        var c=0
        var t
        function timedCount()
        {
            document.getElementById('txt2').value=c
            c=c+1
            t=setTimeout("timedCount()",1000)
        }

        function stopCount()
        {
            c=0;
            setTimeout("document.getElementById('txt').value=0",0);
            clearTimeout(t);
        }
    </script>

k.倒數計時的實現

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>JS實現倒數計時(時、分，秒)</title>
    <script language="javascript" type="text/javascript">
        var interval = 1000;
        function ShowCountDown(year,month,day,tmhour,tmmin,tmsec,divname)
        {
            var now = new Date();
            var endDate = new Date(year, month-1, day,tmhour,tmmin,tmsec);
            var leftTime=endDate.getTime()-now.getTime();
            var leftsecond = parseInt(leftTime/1000);
            var day1=Math.floor(leftsecond/(60*60*24));
            var hour=Math.floor((leftsecond-day1*24*60*60)/3600);
            var minute=Math.floor((leftsecond-day1*24*60*60-hour*3600)/60);
            var second=Math.floor(leftsecond-day1*24*60*60-hour*3600-minute*60);
            var cc = document.getElementById(divname);
            cc.innerHTML = "提示時間距離"+year+"年"+month+"月"+day+"日還有："+day1+"天"+hour+"小時"+minute+"分"+second+"秒";
        }
        window.setInterval(function(){ShowCountDown(2016,6,28,12,00,00,'divdown1');}, interval);

    </script>
</head>
<body>
<div id="divdown1"></div>
</body>
</html>

l.設定cookie

<html>
<head>
    <script type="text/javascript">
        function getCookie(c_name)
        {
            if (document.cookie.length>0)
            {
                c_start=document.cookie.indexOf(c_name + "=")
                if (c_start!=-1)
                {
                    c_start=c_start + c_name.length+1
                    c_end=document.cookie.indexOf(";",c_start)
                    if (c_end==-1) c_end=document.cookie.length
                    return unescape(document.cookie.substring(c_start,c_end))
                }
            }
            return ""
        }

        function setCookie(c_name,value,expiredays)
        {
            var exdate=new Date()
            exdate.setDate(exdate.getDate()+expiredays)
            document.cookie=c_name+ "=" +escape(value)+
            ((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
        }

        function checkCookie()
        {
            username=getCookie('username')
            if (username!=null && username!="")
            {alert('Welcome again '+username+'!')}
            else
            {
                username=prompt('Please enter your name:',"")
                if (username!=null && username!="")
                {
                    setCookie('username',username,1)
                }
            }
        }
    </script>
</head>
<body onLoad="checkCookie()">
</body>
</html>

EventListener

  • 新增事件監聽
  • 移除事件監聽
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
<button id="div1">按鈕</button>
<script>
     var x =document.getElementById('div1');
     //新增事件監聽
     x.addEventListener('click',hello);
     x.addEventListener('click',world);
     function hello(){
         alert("hello");
     }
     function world(){
         alert("world");
     }
    //移除事件監聽
     x.removeEventListener('click',hello);
</script>
</body>
</html>

相關文章