html-拖拽(draggable="true")
拖拽的7个事件：
> 拖拽块.οndragstart=function(){console.log("拖拽开始")；}
> 拖拽块.οndrag=function(){console.log("拖拽中")；}
> 拖拽块.οndragend=function(){console.log("拖拽结束")；}
> 投放区.οndragenter=function(){console.log("进入投放区")；}
> 投放区.οndragοver=function(){console.log("投放区移动")；
//阻止默认事件发生
e.preventDefault();
}
> 投放区.οndragleave=function(){console.log("离开投放区");}
> 投放区.οndrοp=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、尽量用一个属性设置完
有相同的计算方式就可以封装
转载于:https://www.cnblogs.com/Rt-long/p/4844718.html
)
