web9（cookie）

原創

2020-02-29 02:51

基礎知識

	Client	Offset	scroll
尺寸	元素可以顯示內容的區域（元素的可視區域）	元素除了外邊距之外的尺寸。	元素的內容實際佔用的尺寸（新瀏覽器有最小值是client範圍）
位置	取元素左、上邊框的寬度	取元素相對於定位參照元素的偏移值。	取元素內容因爲滾動條而被超出的部分的尺寸。

例如：
ClientX,ClientY
OffsetX,OffectY
scrollX,scrollY

Cookie

定義: cookie是瀏覽器的本地存儲，瀏覽器會以文本文件的方式來存儲數據。 cookie中的數據本地es和遠程後臺程序都可以操作的。
特點：
1、存儲數據有長度限制。
2、前後臺都可用。
3、存儲和讀取速度較慢。
4、數據只能設置，無法主動移除，只能通過設置過期時間的方式來移除數據。
cookie判斷名稱相同的標準是：
name相同、域名相同、路徑相同

本地存儲

h5本地存儲： localStorage、sessionStorage（兩者屬於h5新增的）
和cookie的不同之處：
1、cookie是本地和後臺都可以訪問操作的，而Storage僅僅本地可以操作，後臺無法讀取操作。
2、存儲的數據可以比cookie大很多。
3、讀取寫入的速度比cookie快。
localStorage - 用於長久保存整個網站的數據，保存的數據沒有過期時間，直到手動去除。
sessionStorage - 用於臨時保存同一窗口(或標籤頁)的數據，在關閉窗口或標籤頁之後將會刪除這些數據。
不管是 localStorage，還是 sessionStorage，可使用的API都相同，
常用的有如下幾個（以localStorage爲例）：

保存數據：localStorage.setItem(key,value);
讀取數據：localStorage.getItem(key);
刪除單個數據：localStorage.removeItem(key);
刪除所有數據：localStorage.clear();
得到某個索引的key：localStorage.key(index);


對於需要和服務器傳輸的數據，或將來要傳輸到服務器的數據。
必須做編碼，得到編碼的數據後需要解碼後再使用
encodeURIComponent(txt) 編碼
decodeURIComponent(txt)  解碼

和服務器傳輸的經常是json（數組或對象）數據，需要轉化
JSON.parse(txt)  將字符串（格式化的字符串）轉化爲json。
JSON.stringify(json)  將json轉化爲字符串用來保存或傳輸

cookie或Storage存儲的數據只能是字符串形式。

畫布標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>畫布</title>
    <style>

    </style>
</head>
<body>
<canvas width="500" height="500" id="huabu"></canvas>
<script>

    var huabu = document.getElementById('huabu');
    var bi = huabu.getContext('2d');
    bi.translate(250,250);
    var img = new Image();
    img.src = 'images/zhaosi.png';

    setInterval(doit,13);

    function doit() {
        bi.clearRect(-250,-250,500,500);
        bi.fillStyle = 'black';
        bi.fillRect(-250,-250,500,500);

        bi.fillStyle = '#dcdcdc';
        bi.beginPath();
        bi.arc(0,0,250,0,Math.PI*2);
        bi.fill();
        bi.closePath();

        var jbs = bi.createRadialGradient(0,0,10,0,0,240);
        jbs.addColorStop(0,'white');
        jbs.addColorStop(1,'yellow');
        bi.fillStyle = jbs;
        bi.beginPath();
        bi.arc(0,0,240,0,Math.PI*2);
        bi.fill();
        bi.closePath();

        bi.fillStyle = 'black';
        bi.textAlign = 'center';
        bi.textBaseline = 'middle';
        bi.font="30px Arial";
        for (var i=0;i<60;i++){
            bi.rotate(Math.PI/30*i);
            if(i%5 == 0){
                if(i%15 ==0){
                    bi.fillRect(-2,-240,4,20);
                }else{
                    bi.fillRect(-1,-240,2,20);
                }
                bi.translate(0,-200);
                bi.rotate(-Math.PI/30*i);
                bi.fillText(i==0?12:i/5,0,0);
                bi.rotate(Math.PI/30*i);
                bi.translate(0,200);
            }else{
                bi.fillRect(-1,-240,2,10);
            }
            bi.rotate(-Math.PI/30*i);
        }

        var date = new Date();

        var hh = date.getTime();
        hh = hh/1000/60/60%12+8;
        bi.rotate(Math.PI*hh/6);
        bi.fillStyle = '#666666';
        bi.fillRect(-4,-160,8,190);
        bi.rotate(-Math.PI*hh/6);

        var mm = date.getTime();
        mm = mm/1000/60%60;
        bi.rotate(Math.PI*mm/30);
        bi.fillStyle = '#666666';
        bi.fillRect(-3,-180,6,220);
        bi.rotate(-Math.PI*mm/30);

        var ss = date.getTime();
        ss = ss/1000%60;
        bi.rotate(Math.PI*ss/30);
        bi.fillStyle = 'red';
        bi.beginPath();
        bi.moveTo(0,-220);
        bi.lineTo(-3,30);
        bi.lineTo(3,30);
        bi.lineTo(0,-220);
        bi.fill();
        bi.closePath();
        bi.drawImage(img,-30,-180,60,100);
        bi.rotate(-Math.PI*ss/30);

        bi.beginPath();
        bi.fillStyle = 'green';
        bi.arc(0,0,10,0,Math.PI*2);
        bi.fill()
        bi.closePath();
    }

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

表單及按鍵事件

按鍵事件中keypress是高級事件，觸發的條件是有字符輸出。
按鍵事件的觸發順序是按下（onkeydown），keypress，彈起（onkeyup），字符是在keypress，彈起之間完成輸出
阻止字符輸出，必須在按下，keypress這兩個事件中阻止。

表單的本地驗證

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單的本地驗證</title>
    
</head>
<body>
<!--autocomplete="off"-->表示當鼠標進入輸入框中，沒有下拉提示
<form>
    用戶名：<input type="text" name="uid" autocomplete="off"><span></span><br>
    密碼：<input type="password" name="pwd"><span></span><br>
    <button type="submit">提交</button>
</form>

<script>
    var form = document.forms[0];

    form.onsubmit = function (e) {
        var key = true;
        if(form.uid.value.length <6){
            key = false;
        }
        if(form.pwd.value.length <8){
            key = false;
        }

        return key;
    };

    form.uid.onfocus = function () {
        // 當函數是由事件觸發調用的，那麼this表示觸發事件的元素
        var tips = this.nextElementSibling;
        tips.innerHTML = '字母爲首的字母數字和下劃線6-18位';
        tips.style.color = 'black';
    }
    form.uid.onblur = function () {
        var tips = this.nextElementSibling;
        var txt = this.value;
        if(!txt){
            tips.innerHTML = '';
        }else{
            if(/^[a-z][a-z0-9_]{5,17}$/i.test(txt)){
                tips.innerHTML = '正確';
                tips.style.color = 'green';
            }else{
                tips.innerHTML = '錯誤';
                tips.style.color = 'red';
            }
        }
    }


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

效果圖

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

web9（cookie）

基礎知識

Cookie

本地存儲

畫布標籤

表單及按鍵事件

表單的本地驗證

web10(表單的本地驗證+Ajax)

想要快速播放網頁視頻麼（直接修改網頁代碼實現加速）

JSP程序設計(第一天)

帶模糊查詢的網頁分頁技術

JAVA基礎（第1天java介紹）

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結