键盘按键左右上下移动+保存cookie数据

最新推荐文章于 2024-05-28 10:57:15 发布

小琳琳之编程之路

最新推荐文章于 2024-05-28 10:57:15 发布

阅读量404

点赞数

CC 4.0 BY-SA版权

分类专栏： js分享 javascript习题文章标签： javascript 遍历 cookie

本文链接：https://blog.youkuaiyun.com/guo_rui_lin/article/details/53638777

javascript习题同时被 2 个专栏收录

5 篇文章

订阅专栏

js分享

2 篇文章

订阅专栏

本文介绍了一个简单的网页应用，通过键盘的方向键控制页面上图片的移动与翻转效果，并利用Cookie记录位置信息实现刷新后的状态保持。该应用涉及HTML、CSS布局及JavaScript事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}

html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}

img {
width: 100px;
height: 80px;
position: absolute;
top: 0;
left: 0;
}

.rotate {
-webkit-transform: rotateY(180deg);
}
</style>
<script>
window.onload = function() {

//按住左右键盘有移动效果改变IMG的top,left

var IMG = document.getElementsByTagName("img")[0];
//得到的cookie的值是数组拆分刷新的时候保存cookie
var save = document.cookie.split("; ");

for(var i = 0, len = save.length; i < len; i++) {
var arr = save[i].split("=");

if(arr[0] === "IMG.style.left") {
//得到的arr[1]是带px 不需要再加px
IMG.style.left = arr[1];

} else if(arr[0] === "IMG.style.top") {
IMG.style.top = arr[1];
}
}

document.onkeydown = function(e) {
e = e || window.event;

//得到的save是一个数组需要遍历拆分数组

if(e.keyCode === 39) {
IMG.style.left = IMG.offsetLeft + 10 + "px";

IMG.className = "rotate";

} else if(e.keyCode === 40) {

IMG.style.top = IMG.offsetTop + 10 + "px";

} else if(e.keyCode === 38) {
IMG.style.top = IMG.offsetTop - 10 + "px";
} else if(e.keyCode === 37) {
IMG.style.left = IMG.offsetLeft - 10 + "px";
IMG.className = "-rotate";
}
//获取cookie数据当left 和top 固定时获取
document.cookie = "IMG.style.left=" + IMG.style.left;
document.cookie = "IMG.style.top=" + IMG.style.top;

//穿墙效果
if(IMG.offsetTop< 0) {
IMG.style.top = window.innerHeight + 'px';
} else if(IMG.offsetTop > window.innerHeight) {
IMG.style.top = 0 + "px";
console.log(IMG.style.top)
} else if(IMG.offsetLeft < 0) {
IMG.style.left = window.innerWidth + 'px';
} else if(IMG.offsetLeft > window.innerWidth) {
IMG.style.left = 0 + "px";
}

}

}
</script>
</head>

<body>
<img src="img/bird.jpg" alt="" />
</body>

</html>