原生JS实现九宫格拼图_js 背景图9宫格-程序员宅基地

概要

用js实现简单九宫格拼图

代码如下

结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<style></style>
<body>
    <div class="map">
        <ul>
            <li><span>1</span></li>
            <li><span>2</span></li>
            <li><span>3</span></li>
            <li><span>4</span></li>
            <li><span>5</span></li>
            <li><span>6</span></li>
            <li><span>7</span></li>
            <li><span>8</span></li>
            <li><span>9</span></li>
        </ul>
   </div>
    //深拷贝
   <script src="./js/deepCopy.js"></script>
    <script src="./js/index.js"></script>
   
    <script></script>
</body>
</html>

css代码，图片路径记得改

* {
    padding: 0;
    margin: 0;
}
ul {
    list-style: none;
}
.map {
    width: 600px;
    height: 600px;
    background-color: #ccc;
}
.map ul {
    width: 600px;
    height: 600px;
    /* 相对定位 */
    position: relative;
    
}

/* 
3行  每一行多高? 200
3列  每一列多宽? 200
*/
.map ul li {
    //图片路径
    background-image: url(../img/600_600.jpeg);
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}
.map ul li.empty::after {
    content: "";
    position: absolute;
    top: 0;
    top: 0;
    z-index: 10;
    width: 200px;
    height: 200px;
    background-color: deepskyblue;
}

/* 设置点击的li标签半透明 */
.map ul li.active {
    opacity: .5;
}

/* 设置提示 */
.map ul li span {
    width: 200px;
    height: 100px;
    display: block;
    text-align: center;
    line-height: 200px;
    font-size: 70px;
    color: #fff;
}

js代码

深拷贝代码

// 深拷贝的思路
function deepCopy(data) {
    // 创建新地址
    var newData = Array.isArray(data) === true ? [] : {};
    // 循环data
    for (var key in data) {
        // 判断拷贝的数据是否为引用类型
        if (typeof data[key] === "object") {

            //执行递归，直到复制的数据为基本类型为止
            newData[key] = deepCopy(data[key]);
        }
        else {
            //是基本数据类型，就直接复制
            newData[key] = data[key]
        }
    }
    //返回新数据
    return newData;
}

var map = document.querySelector('.map');
var ul = document.querySelector('ul');
var lis = document.querySelectorAll('li');

var data = [];
for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 3; j++) {
        var point = {};
        point.x = j * 200;
        point.y = i * 200;
        data.push(point)
    }
}

for (var index = 0; index < lis.length; index++) {
    lis[index].style["left"] = data[index].x + 'px';
    lis[index].style["top"] = data[index].y + 'px';
    lis[index].style["backgroundPosition"] = `-${data[index].x}px   -${data[index].y}px`;
}

var arr = deepCopy(data);
arr.sort(function () {
    return Math.random() - .5;
})
lis[data.length - 1].className = `empty`;
for (var index = 0; index < lis.length; index++) {
    lis[index].style["left"] = arr[index].x + 'px';
    lis[index].style["top"] = arr[index].y + 'px';
}

var arr2 = [];

for (var z = 0; z < lis.length; z++) {
    for (var c = 0; c < lis.length; c++) {
        lis[c].classList.remove('active')
    }
    (function (z) {
        lis[z].onclick = function () {
            if (arr2.length == 0 && lis[z].className != 'empty') {
                var p1 = {}
                p1.ele = lis[z];
                p1.x = parseInt(p1.ele.style['left'])
                p1.y = parseInt(p1.ele.style['top'])
                console.log('p1=>', p1);
                // p1.ele = lis[z];
                arr2.push(p1);
                lis[z].className = `active`;
                // console.log('p1=>', p1);
            } else if (arr2.length == 1 && lis[z].className == 'empty') {
                var empty = document.querySelector('.empty');
                var p2 = {};
                p2.x = parseInt(empty.style['left'])
                p2.y = parseInt(empty.style['top'])
                arr2.push(p2);
                // var p1 = arr2[0];
                // console.log(arr2);
                // console.log('p1_2=>',p1);
                console.log('p2=>', p2);

                if (arr2[0].x == p2.x && (arr2[0].y - 200) == p2.y) {
                    arr2[0].ele.style['left'] = p2.x + 'px';
                    arr2[0].ele.style['top'] = p2.y + 'px';
                    empty.style['left'] = arr2[0].x + 'px';
                    empty.style['top'] = arr2[0].y + 'px';
                }
                if (arr2[0].x == p2.x && (arr2[0].y + 200) == p2.y) {
                    arr2[0].ele.style['left'] = p2.x + 'px';
                    arr2[0].ele.style['top'] = p2.y + 'px';
                    empty.style['left'] = arr2[0].x + 'px';
                    empty.style['top'] = arr2[0].y + 'px';
                }
                if ((arr2[0].x - 200) == p2.x && arr2[0].y == p2.y) {
                    arr2[0].ele.style['left'] = p2.x + 'px';
                    arr2[0].ele.style['top'] = p2.y + 'px';
                    empty.style['left'] = arr2[0].x + 'px';
                    empty.style['top'] = arr2[0].y + 'px';
                }
                if ((arr2[0].x + 200) == p2.x && arr2[0].y == p2.y) {
                    arr2[0].ele.style['left'] = p2.x + 'px';
                    arr2[0].ele.style['top'] = p2.y + 'px';
                    empty.style['left'] = arr2[0].x + 'px';
                    empty.style['top'] = arr2[0].y + 'px';
                }
                arr2 = [];
                for (var d = 0; d < lis.length; d++) {
                    lis[d].classList.remove('active')
                }
                console.log(arr2);
            } else {
                arr2 = [];
                for (var e = 0; e < lis.length; e++) {
                    lis[e].classList.remove('active')
                }
            }
        }
    })(z)
}

小结

基础功能都实现了，但是通关条件没有做

本文链接：https://blog.csdn.net/m0_59302271/article/details/136635936

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

5个超厉害的资源搜索网站，每一款都可以让你的资源满满！_最全资源搜索引擎-程序员宅基地

文章浏览阅读1.6w次，点赞8次，收藏41次。生活中我们无时不刻不都要在网站搜索资源，但就是缺少一个趁手的资源搜索网站，如果有一个比较好的资源搜索网站可以帮助我们节省一大半时间！今天小编在这里为大家分享5款超厉害的资源搜索网站，每一款都可以让你的资源丰富精彩！网盘传奇一款最有效的网盘资源搜索网站你还在为找网站里面的资源而烦恼找不到什么合适的工具而烦恼吗？这款网站传奇网站汇聚了4853w个资源，并且它每一天都会持续更新资源；..._最全资源搜索引擎

Book类的设计(Java)_6-1 book类的设计java-程序员宅基地

文章浏览阅读4.5k次，点赞5次，收藏18次。阅读测试程序，设计一个Book类。函数接口定义：class Book{}该类有四个私有属性分别是书籍名称、价格、作者、出版年份，以及相应的set 与get方法；该类有一个含有四个参数的构造方法，这四个参数依次是书籍名称、价格、作者、出版年份。裁判测试程序样例：import java.util.*;public class Main { public static void main(String[] args) { List <Book>_6-1 book类的设计java

基于微信小程序的校园导航小程序设计与实现_校园导航微信小程序系统的设计与实现-程序员宅基地

文章浏览阅读613次，点赞28次，收藏27次。相比于以前的传统手工管理方式，智能化的管理方式可以大幅降低学校的运营人员成本，实现了校园导航的标准化、制度化、程序化的管理，有效地防止了校园导航的随意管理，提高了信息的处理速度和精确度，能够及时、准确地查询和修正建筑速看等信息。课题主要采用微信小程序、SpringBoot架构技术，前端以小程序页面呈现给学生，结合后台java语言使页面更加完善，后台使用MySQL数据库进行数据存储。微信小程序主要包括学生信息、校园简介、建筑速看、系统信息等功能，从而实现智能化的管理方式，提高工作效率。

有状态和无状态登录

传统上用户登陆状态会以 Session 的形式保存在服务器上，而 Session ID 则保存在前端的 Cookie 中；而使用 JWT 以后，用户的认证信息将会以 Token 的形式保存在前端，服务器不需要保存任何的用户状态，这也就是为什么 JWT 被称为无状态登陆的原因，无状态登陆最大的优势就是完美支持分布式部署，可以使用一个 Token 发送给不同的服务器，而所有的服务器都会返回同样的结果。有状态和无状态最大的区别就是服务端会不会保存客户端的信息。

九大角度全方位对比Android、iOS开发_ios 开发角度-程序员宅基地

文章浏览阅读784次。发表于10小时前| 2674次阅读| 来源TechCrunch| 19 条评论| 作者Jon EvansiOSAndroid应用开发产品编程语言JavaObjective-C摘要：即便Android市场份额已经超过80%，对于开发者来说，使用哪一个平台做开发仍然很难选择。本文从开发环境、配置、UX设计、语言、API、网络、分享、碎片化、发布等九个方面把Android和iOS_ios 开发角度

搜索引擎的发展历史

搜索引擎的发展历史可以追溯到20世纪90年代初，随着互联网的快速发展和信息量的急剧增加，人们开始感受到了获取和管理信息的挑战。这些阶段展示了搜索引擎在技术和商业模式上的不断演进，以满足用户对信息获取的不断增长的需求。

随便推点

控制对象的特性_控制对象特性-程序员宅基地

文章浏览阅读990次。对象特性是指控制对象的输出参数和输入参数之间的相互作用规律。放大系数K描述控制对象特性的静态特性参数。它的意义是：输出量的变化量和输入量的变化量之比。时间常数T当输入量发生变化后，所引起输出量变化的快慢。（动态参数） ..._控制对象特性

FRP搭建内网穿透(亲测有效)_locyanfrp-程序员宅基地

文章浏览阅读5.7w次，点赞50次，收藏276次。FRP搭建内网穿透1.概述：frp可以通过有公网IP的的服务器将内网的主机暴露给互联网，从而实现通过外网能直接访问到内网主机；frp有服务端和客户端，服务端需要装在有公网ip的服务器上，客户端装在内网主机上。2.简单的图解：3.准备工作：1.一个域名（www.test.xyz）2.一台有公网IP的服务器(阿里云、腾讯云等都行)3.一台内网主机4.下载frp，选择适合的版本下载解压如下：我这里服务器端和客户端都放在了/usr/local/frp/目录下4.执行命令# 服务器端给执_locyanfrp