html-拖拽

時間 2019-11-18

標籤 html 欄目 HTML 简体版

原文原文鏈接

html-拖拽(draggable="true")
拖拽的7個事件：
> 拖拽塊.ondragstart=function(){console.log("拖拽開始")；}

> 拖拽塊.ondrag=function(){console.log("拖拽中")；}

> 拖拽塊.ondragend=function(){console.log("拖拽結束")；}

> 投放區.ondragenter=function(){console.log("進入投放區")；}

> 投放區.ondragover=function(){console.log("投放區移動")；
    //阻止默認事件發生
    e.preventDefault();
    }
> 投放區.ondragleave=function(){console.log("離開投放區");}

> 投放區.ondrop=function(){console.log("投放區投放")；}

     (後3個容易衝突，要阻止其中一些的默認事件。要ondrop起做用，須要把ondragover也運行起來。
     爲了避免在2個區域重疊發生事件，要設置阻止事件冒泡

用js作拖拽：
>1. 要拖動須要不停得到座標，全部須要絕對定位，用position：absolute;
2. css在body前。js在body後
3. 匿名函數

> (function fun(){
     console.log(「執行匿名函數，必定要用括號把函數括起來」)；
}())

###地理定位
>(navigator.geolocation.getCurrentPosition(showPosition->傳遞進來的函數,名字本身取);)
function showPosition(position->傳遞進來的)｛
    document.body.innerHTML +=  "經度"+position.coords.longitude+"\n"+"緯度"+position.coords.latitude
｝

###web存儲

- http協議是沒法保存狀態的。
- 瀏覽器請求響應模型，不管在電腦上的什麼操做都要提交到服務器，服務器返回信息到電腦。
- 無狀態：請求響應以後會斷開鏈接，就至關於重來沒鏈接過，下次就會認爲是新的鏈接，須要從新鏈接（因此沒法保存賬號什麼）。
- 爲了保存狀態，就有了cookie。是瀏覽器和服務器之間維持狀態的方法之一
- cookie做用:用來保存服務器返回的信息，爲了維持登陸狀態+網站對
    於客戶的數據跟蹤（消費習慣、瀏覽習慣。。。）。下一次訪問服務器，服務器就能讀取裏面的登陸信息，就會知道之前的登陸過的。
- cookie限制：每一個cookie文件的大小最大爲4kb（4000英文或者2000
    中文），因此只能存用戶名之類的，文章就不能存了。

- cookie使用：
    document.cookie;//經過這個獲得COOKIE信息
    function setCookie(){ //事件：建立cookie,setCookie
        var date = new Date();
        date.setDate(date.getDate()+30);
        document.cookie = "name=abc&age=12;expires="+date.toUTCString(); //新的cookie名爲abc,設置過時時間爲  ，默認過時時間是關閉瀏覽器後
        document.cookie = "sex=male";
    }
    function getCookie(){//事件：得到cookie,getCookie
        console.log(document.cookie);//在控制檯顯示cookie信息
    }

- sessionStorage：存在的時間只有一次會話（打開瀏覽器——關閉瀏覽器）
    每一個用戶訪問服務器的時候，服務器會給每一個用戶創建一個session對象，都會產生一個sessionID，而後sessionID會存在cookie裏面。
    也有時候時間長沒操做，服務器會把sessionID給刪掉
    使用：    建立getsessionStorage.name="" //建立(set)和獲取(get)都和cookie同樣，只用換後面的類型名
    function setsessionStorage(){
        window.sessionStorage.name="張三"；//建立的名字。
    }
- localStorage：沒有時間限制也沒有大小限制。存儲信息除非刪掉，不然一致都是存在瀏覽器。
    使用：    建立getlocalStorage.name="" //建立(set)和獲取(get)都和cookie同樣，只用換後面的類型名
    function setlocalStorage(){
        window.localStorage.name="張三"；//建立的名字。
    }

- cookie、sessionStorage（會話，新標籤頁不共享）、
    localStorage（整個瀏覽器共享）都是在瀏覽器保存，換了瀏覽器就沒了
- sql

##字符串和json對象互相轉換
>JSON 使用 JavaScript 語法來描述數據對象，可是 JSON 仍然獨立於語言和平臺。JSON 解析器和 JSON 庫支持許多不一樣的編程語言。

- stringify：  json轉字符串

- parse：    字符串轉json


- function getlocalStorage(){
        var user = JSON.parse(window.localStorage.user);
        console.log(user.name);
    }

經過咱們的編輯器，您能夠在線編輯 JavaScript 代碼，而後經過點擊一個按鈕來查看結果：

> <html>
> <body>
> <h3>在 JavaScript 中建立 JSON 對象</h3>
>
> <p>
> Name: <span id="jname"></span><br />
> Age: <span id="jage"></span><br />
> Address: <span id="jstreet"></span><br />
> Phone: <span id="jphone"></span><br />
> </p>
>
> <script type="text/javascript">
> var JSONObject= {
> "name":"Bill Gates",
> "street":"Fifth Avenue New York 666",
> "age":56,
> "phone":"555 1234567"};
> document.getElementById("jname").innerHTML=JSONObject.name
> document.getElementById("jage").innerHTML=JSONObject.age
> document.getElementById("jstreet").innerHTML=JSONObject.street
> document.getElementById("jphone").innerHTML=JSONObject.phone
> </script>
>
> </body>
> </html>

顯示爲：
> 在 JavaScript 中建立 JSON 對象
>
> Name: Bill Gates
>
> Age: 56
>
> Address: Fifth Avenue New York 666
>
> Phone: 555 1234567

###2個div水平放
直接是
css樣式：
    div{
        float:left;
    }
<body>
    <div>1<\div>
    <div>2<\div>
<\body>

margin、padding、font、儘可能用一個屬性設置完
有相同的計算方式就能夠封裝javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。