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