html-拖拽
html-拖拽(draggable="true")
拖拽的7個(gè)事件:
> 拖拽塊.οndragstart=function(){console.log("拖拽開(kāi)始");}
> 拖拽塊.οndrag=function(){console.log("拖拽中");}
> 拖拽塊.οndragend=function(){console.log("拖拽結(jié)束");}
> 投放區(qū).οndragenter=function(){console.log("進(jìn)入投放區(qū)");}
> 投放區(qū).οndragοver=function(){console.log("投放區(qū)移動(dòng)");
????//阻止默認(rèn)事件發(fā)生
????e.preventDefault();
????}
> 投放區(qū).οndragleave=function(){console.log("離開(kāi)投放區(qū)");}
> 投放區(qū).οndrοp=function(){console.log("投放區(qū)投放");}
?????(后3個(gè)容易沖突,要阻止其中一些的默認(rèn)事件。要ondrop起作用,需要把ondragover也運(yùn)行起來(lái)。
?????為了不在2個(gè)區(qū)域重疊發(fā)生事件,要設(shè)置阻止事件冒泡
用js做拖拽:????
>1. 要拖動(dòng)需要不停獲得坐標(biāo),所有需要絕對(duì)定位,用position:absolute;
2.?css在body前。js在body后
3.?匿名函數(shù)
> (function fun(){
?????console.log(“執(zhí)行匿名函數(shù),一定要用括號(hào)把函數(shù)括起來(lái)”);
?}())
###地理定位
>(navigator.geolocation.getCurrentPosition(showPosition->傳遞進(jìn)來(lái)的函數(shù),名字自己取);)
function showPosition(position->傳遞進(jìn)來(lái)的){
????document.body.innerHTML +=??"經(jīng)度"+position.coords.longitude+"\n"+"緯度"+position.coords.latitude
}
###web存儲(chǔ)
-?http協(xié)議是無(wú)法保存狀態(tài)的。
-?瀏覽器請(qǐng)求響應(yīng)模型,無(wú)論在電腦上的什么操作都要提交到服務(wù)器,服務(wù)器返回信息到電腦。
-?無(wú)狀態(tài):請(qǐng)求響應(yīng)之后會(huì)斷開(kāi)連接,就相當(dāng)于重來(lái)沒(méi)連接過(guò),下次就會(huì)認(rèn)為是新的連接,需要重新連接(所以無(wú)法保存帳號(hào)什么)。
-?為了保存狀態(tài),就有了cookie。是瀏覽器和服務(wù)器之間維持狀態(tài)的方法之一
-?cookie作用:用來(lái)保存服務(wù)器返回的信息,為了維持登錄狀態(tài)+網(wǎng)站對(duì)
????于客戶的數(shù)據(jù)跟蹤(消費(fèi)習(xí)慣、瀏覽習(xí)慣。。。)。下一次訪問(wèn)服務(wù)器,服務(wù)器就能讀取里面的登錄信息,就會(huì)知道以前的登錄過(guò)的。
-?cookie限制:每個(gè)cookie文件的大小最大為4kb(4000英文或者2000
????中文),所以只能存用戶名之類(lèi)的,文章就不能存了。
????
-?cookie使用:
????document.cookie;//通過(guò)這個(gè)得到COOKIE信息
????function setCookie(){ //事件:創(chuàng)建cookie,setCookie
????????var date = new Date();
????????date.setDate(date.getDate()+30);?
????????document.cookie = "name=abc&age=12;expires="+date.toUTCString(); //新的cookie名為abc,設(shè)置過(guò)期時(shí)間為??,默認(rèn)過(guò)期時(shí)間是關(guān)閉瀏覽器后
????????document.cookie = "sex=male";
????}
????function getCookie(){//事件:獲得cookie,getCookie
????????console.log(document.cookie);//在控制臺(tái)顯示cookie信息
????}
????
-?sessionStorage:存在的時(shí)間只有一次會(huì)話(打開(kāi)瀏覽器——關(guān)閉瀏覽器)
????每個(gè)用戶訪問(wèn)服務(wù)器的時(shí)候,服務(wù)器會(huì)給每個(gè)用戶建立一個(gè)session對(duì)象,都會(huì)產(chǎn)生一個(gè)sessionID,然后sessionID會(huì)存在cookie里面。
????也有時(shí)候時(shí)間長(zhǎng)沒(méi)操作,服務(wù)器會(huì)把sessionID給刪掉
????使用:????創(chuàng)建getsessionStorage.name="" //創(chuàng)建(set)和獲取(get)都和cookie一樣,只用換后面的類(lèi)型名
????function setsessionStorage(){
????????window.sessionStorage.name="張三";//創(chuàng)建的名字。
????}
-?localStorage:沒(méi)有時(shí)間限制也沒(méi)有大小限制。存儲(chǔ)信息除非刪掉,否則一致都是存在瀏覽器。
????使用:????創(chuàng)建getlocalStorage.name="" //創(chuàng)建(set)和獲取(get)都和cookie一樣,只用換后面的類(lèi)型名
????function setlocalStorage(){
????????window.localStorage.name="張三";//創(chuàng)建的名字。
????}
-?cookie、sessionStorage(會(huì)話,新標(biāo)簽頁(yè)不共享)、
????localStorage(整個(gè)瀏覽器共享)都是在瀏覽器保存,換了瀏覽器就沒(méi)了
-?sql
##字符串和json對(duì)象互相轉(zhuǎn)換
?>JSON 使用 JavaScript 語(yǔ)法來(lái)描述數(shù)據(jù)對(duì)象,但是 JSON 仍然獨(dú)立于語(yǔ)言和平臺(tái)。JSON 解析器和 JSON 庫(kù)支持許多不同的編程語(yǔ)言。
-?stringify:??json轉(zhuǎn)字符串
-?parse:????字符串轉(zhuǎn)json????
????
-?function getlocalStorage(){
????????var user = JSON.parse(window.localStorage.user);
????????console.log(user.name);
????}
通過(guò)我們的編輯器,您可以在線編輯 JavaScript 代碼,然后通過(guò)點(diǎn)擊一個(gè)按鈕來(lái)查看結(jié)果:
?
> <html>
> <body>
> <h3>在 JavaScript 中創(chuàng)建 JSON 對(duì)象</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 中創(chuàng)建 JSON 對(duì)象
>?
> Name: Bill Gates
>
> Age: 56
>?
> Address: Fifth Avenue New York 666
>
> Phone: 555 1234567
###2個(gè)div水平放
直接是
css樣式:
????div{
????????float:left;
????}
<body>
????<div>1<\div>
????<div>2<\div>
<\body>
margin、padding、font、盡量用一個(gè)屬性設(shè)置完
有相同的計(jì)算方式就可以封裝
轉(zhuǎn)載于:https://www.cnblogs.com/Rt-long/p/4844718.html
總結(jié)
- 上一篇: HDU 2842 Chinese Rin
- 下一篇: 别人7天乐,运维还苦逼值班?