一、cookie
<script>
//存取cookie
// document.cookie = "username=111";
// console.info(document.cookie);
//设置多个cookie
// document.cookie = "password=2222";
// document.cookie = "userId=10";
// console.info(document.cookie);
//设置时间
var dt = new Date();//获取当前时间
// console.log(dt.getTime() + 2000);
dt.setTime(dt.getTime() + 2000);//让当前时间扩大2s
document.cookie = "userAge=18;expires=" + dt.toGMTString();//设置过期时间
console.info(document.cookie);
setTimeout(function() {
console.info(document.cookie);
}, 3000);
//添加cookie(easy edison)
function addCookie(key, val, expiresHours) {
var dt = new Date();
dt.setTime(dt.getTime() + expiresHours * 60 * 60 * 1000);
document.cookie = key + "=" + val + ";expires=" + dt.toGMTString();
}
addCookie("userSex", "lady", 3 * (1 / 60 / 60));
console.info(document.cookie);
setTimeout(function() {
console.info(document.cookie);
}, 4000);
//获取cookie
function removeCookie(removeKey) {
var multiCookies = document.cookie.split(";");
for (var i = 0, len = multiCookies.length; i < len; ++i) {
var singleCookie = multiCookies[i];
var key = singleCookie.split("=")[0];
var val = singleCookie.split("=")[1];
if (key === removeKey) {
//过期设置
var dt = new Date();
dt.setTime(dt.getTime() - 1000);
document.cookie = key + "=" + val + ";expires=" + dt.toGMTString();
break;
}
}
}
removeCookie("username");
console.info(document.cookie);
</script>
二、html5的拖拽
<body>
<!-- 不用定义draggable就可以拖动的元素 -->
<a href="javascript:void(0)">a标签</a>
<img id="img" style="position:absolute;left:0;top:250px;" src="./1.jpg">
<!-- 需要定义draggable的元素 -->
<div id="dragdiv" style="position:absolute;left:0;top:250px;" draggable=true ></div>
</body>
<script>
/*取消document对拖动事件的默认行为，让它可以放*/
document.ondragover = function() {
return false;
}
/*html中任何拖动事件开始的时候就会触发dragstart事件*/
document.ondragstart = function(event) {
var oEvent = event || window.event;
var ele = oEvent.target || oEvent.srcElement;//拖动的元素
// console.info(1);
// console.info(ele);
oEvent.dataTransfer.setData("id", ele.getAttribute("id"));//只能传字符串
oEvent.dataTransfer.setData("oldMouseLeft", oEvent.clientX);//把鼠标刚抓取div时候的x位置传过去
oEvent.dataTransfer.setData("oldMouseTop", oEvent.clientY);//把鼠标刚抓取div时候的y位置传过去
}
/*当被拖动元素被放下的时候触发ondrop事件*/
document.ondrop = function(event) {
var oEvent = event || window.event;
var ele = oEvent.target || oEvent.srcElement;//被放上去的元素
// console.info(2);
// console.info(ele);
//获取数据
var eleId =oEvent.dataTransfer.getData("id");
var oldMouseLeft =oEvent.dataTransfer.getData("oldMouseLeft");
var oldMouseTop =oEvent.dataTransfer.getData("oldMouseTop");
//初始化数据
var draggedEle = document.getElementById(eleId);//被拖动的div
var left = parseInt(draggedEle.style.left);//div之前的x坐标
var top = parseInt(draggedEle.style.top);//div之前的y坐标
var distanceX = oEvent.clientX - oldMouseLeft;//鼠标在x方向移动的距离
var distanceY = oEvent.clientY - oldMouseTop;//鼠标在y方向移动的距离
//计算结果
draggedEle.style.left = left + distanceX + "px";//div之后的x坐标
draggedEle.style.top = top + distanceY + "px";//div之后的y坐标
}
</script>
三、 //跳转页面
location.href = "登陆.html";
四、登陆验证
//获取参数
var usernameVal = usernameEle.value,
passwordVal = passwordEle.value,
success = false;//状态变量
for (var i = 0, len = localStorage.length; i < len; ++i) {
//获取key，因为key是由username而来，所以只要key===username，就可以进行判断密码
var key = localStorage.key(i);
//判断账号是否正确
if (key === usernameVal) {
//获取json字符串
var jsonStr = localStorage.getItem(key);
//把json字符串转成json对象
var json = JSON.parse(jsonStr);
//判断密码是否正确
if (json.password === passwordVal) {
alert("恭喜登陆成功！");
success = true;
break;
}
}
}
//如果失败，则弹框
if (!success) {
alert("登陆失败！");
}