微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

响应式网络相册及node.js常规模块下载更新基础操作

卢先生

原创

509人浏览过

响应式网络图片示例
当前使用到的代码示例：

代码	示例	说明
insertAdjacentHTML	元素.insertAdjacentHTML(“插入位置”,插入的html字符串);	主要用于某个位置插入html操作（位置说明请看https://www.php.cn/blog/detail/32044.html）
insertAdjacentElement	元素.insertAdjacentElement(“插入的位置”,元素)	某个位置插入元素操作，同样有位置
previousElementSibling	ele.previousElementSibling，（这个要看下面的代码，首先要拿到节点的前兄弟元素）	某一个节点的前一个兄弟的语法糖previousElementSibling
nextElementSibling	ele.nextElementSibling，（拿到节点的后一个元素）	某一个节点的后一个兄弟的语法糖
after	节点后插入
before	节点前插入

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网络相册管理器实现案例</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    body {
        display: grid;
    }
    .box {
        display: grid;
        grid-template-columns: 33.33vw 33.33vw 33.33vw;
        place-items: center;
    }
    li {
        list-style: none;
    }
    button {
        width: 60px;
        outline: green 1px solid;
        border: 0px;
        background-color: #fff;
        margin-bottom: 4px;
        cursor: pointer;
    }
    button:hover {
        background-color: orange;
        color: #fff;
    }
    li div {
        display: flex;
        clear: none;
        width: 200px;
        place-content: center;
    }
    img {
        width: 200px;
        height: 200px;
    }
</style>
<body>
    <div class="box">
        <!-- js代码部分 -->
    </div>
</body>
<script>
    let imgs = [
        "images/img_1.jpg",
        "images/img_2.jpg",
        "images/img_3.jpg",
        "images/img_4.jpg",
        "images/img_5.jpg",
        "images/img_6.jpg",
        "images/img_7.jpg",
        "images/img_8.jpg",
    ];
    div = document.querySelector(".box");
    console.log(div);
    // window.onload元素加载完成即立即执行
    window.onload = img;
    /////组装html处理图片
    function img() {
        let htmlstr = imgs.reduce(function(acc, img) {
            let tpl = `
          <li>
                      <img src="${img}" />
                      <div>
                          <button onclick="del(this.parentNode.parentNode)">删除</button>
                          <button onclick="next(this.parentNode.parentNode)">向后</button>
                          <button onclick="prev(this.parentNode.parentNode)">向前</button>
                      </div>
                  </li>
          `;
            return acc + tpl;
        }, "");
        ("");
        console.log(htmlstr);
        // 元素.insertAdjacentHTML("插入位置",插入的html字符串);
        div.insertAdjacentHTML("afterBegin", htmlstr);
        //元素.insertAdjacentElement("插入的位置",元素)
    }
    /////删除某个图片
    function del(ele) {
        //判断是否是最后一张图片
        //如果最前面一张ele.previousElementSibling拿到的元素是空，说明是最前面一张了，就提示用户最后一张了
        if (ele.previousElementSibling === null) {
            alert("已经到最前面一张了");
            return false;
        }
        //  confirm提示是否删除，类似alert，但是alert是个弹出，无取消的回调工作
        return confirm("是否删除") ? ele.remove() : false;
    }
    function prev(ele) {
        //向前
        // 先声明一个变量，是当前位置的前一个元素，
        let prevNode = ele.previousElementSibling;
        // 将当前元素插入到前一个元素的位置后面
        // prevNode.before(ele);
        // 使用定时器给图片一个延迟操作
        setTimeout(() => {
            prevNode.before(ele);
        }, 300);
    }
    function next(ele) {
        //向后
        // 拿到当前元素的后面一个元素ele.nextElementSibling;
        let nextNode = ele.nextElementSibling;
        //将当前元素插入到后面一个元素的位置后面
        //netNode.after(ele);
        //使用定时器给图片做一个延迟操作
        setTimeout(() => {
            prevNode.after(ele);
        }, 300);
    }
</script>
</html>

node.js基础操作

# Node.js 基础
## 1. 下载与安装
1. 下载: <https://nodejs.org/zh-cn/>
2. 参考镜像: <http://nodejs.cn/>
```shell
# node版本号
node --version
node -v;
# npm版本号
npm --version
npm -v;
# 查看当前路径
pwd
# 进入目录
cd path # path用具体路径名称代替
# 清屏
clear

node 参数规律: 全称用”—“, 简化用 “-“

2. 命令行交互式

node
> let a = 1;
> let b = 2;
> console.log(`${a} + ${b} = ${a+b}`);
> process.exit() # 退出命令行
> .exit # process.exit()简化
#使用简体的时候，不要加()

3. 执行 js 文件

demo1.js

let a = 1;
let b = 2;
console.log(`${a} + ${b} = ${a + b}`);
// console.log()控制台输出,类似还有:
// console.info(): 与console.log()功能类似
// console.dir(): 对象信息
// console.warn(): 警告信息
// console.error(): 出错信息
// console.trace(): 当前跟踪栈信息
// console.time(f),console.timeEnd(f)统计执行时间

执行

# node js文件名
node demo1.js
> 1 + 2 = 3
# node 默认执行的就是js文件,所以扩展名可省略
node demo1
> 1 + 2 = 3

4. npm

npm: node 内置的”包”管理器,与 node 发行版本一起提供
npm version: 查询当前npm更详细的描述信息

NPM 是通过package.json配置文件管理当前项目依赖项

package.json

{
“name”: “0111”, //现在是目录所在的名字，也就是项目的名字，包名
“version”: “1.0.0”,//版本，
“description”: “”,//最好给描述一个东西，如果不给，后面会总是给警告
“main”: “demo.js”,//默认的 node.js 文件的名
“dependencies”: {
“lodash”: “^4.17.21”
},
“devDependencies”: {},
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1”
},
“keywords”: [],
“author”: “”,
“license”: “ISC”
“private”:true //如果是 true 就是声明为私有
}

生成package.json
- 交互式: npm init
- 默认: npm init --yes 或 npm init -y(推荐)

版本号规则: 主版本.次版本.补丁版本,例如3.2.3
- ^: 锁定主版本,更新到最新的次版本和补丁版本,^3.3.3=>3.5.x,但不会到4.0.x
- ~: 锁定次版本,更新到最新的补丁版本,~3.2.3=>3.2.5但不会到3.3.x
- *: 任意版本,即最新版本
- a,b,c: 锁定到指定版本,禁止更新
版本书写举例
- 只接受补丁版本的更新:
- 1.0
- 1.0.x
- ~1.0.4
只接受小版本更新:默认补丁也接受
- 1
- 1.x
- ^1.0.4
可接受大版本更新,默认次版本补丁都接受
- *

5. 安装与删除包

package.json与包相关字段
- dependencies: 生产依赖如果下载默认就是生产依赖当然就是-S
- devDependencies: 开发依赖配合下面的开发依赖 -D
安装包指令: npm install package 或 npm i package
删除包指令 npm uninstall package 或 npm uni package
安装指定版本指定 npm i package@3.*
参数:
- 生产依赖: --save或-S
- 开发依赖: --save-dev或-D 插件的
包会自动下载到node_modules目录中,如果目录不存在会自动创建
并会创建或更新package-lock.json文件,锁定当前版本
当再次安装时,会直接安装package-lock.json中的指定的版本

5.1 全局更新

查看全局项目包地址


npm root
# 不加参数就是当前项目地址 里面的模块目录
npm root --glocal/ npm root -g
# 当前全局模块安装的位置
# 删除全局模块
npm uninstall package -g
#更新完成

6. 更新包

# 检查是否有可更新的包
# 检查全部
npm outdated
# 检查指定包
npm outdated lodash
# 安装用来更新包的插件,推荐安装到全局
npm i -g npm-check-updates
# 查看本地的包
npm list
# 查看是否安装成功?
npm list -g
# 用更新插件来检查可更新的包的列表
# 如果不更新 就可能是权限问题，可以以管理员权限运行
npm-check-updates
# 该命令太长, 通常用 ncu 简化
ncu
# 更新所包更新
npm-check-updates -u
 #下面是简化
# 更新所有包到最新版本
ncu -u
# 或仅更新指定的包也可以
ncu -u lodash
# 查看 package.json, 版本号已更新
# 现在只是版本了版本号, 最新的包,还是下载安装到项目中
# 即 "node_modules"中的包,还是老版本
# 所以,还要用 npm install 安装一下
#不指定就默认更新所有
npm install
#更新某一个就指定包名
npm i lodash
# 再次查看包版本,已更新到最新版本
npm list
# 打开package-lock.json,可以看到已锁定到最新版本
# 更新成功,结束

商品管理 太差了，凑出来的，本来想map循环，没写出来
```php
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商品管理器</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>商品名</th>
                <th>商品库存</th>
                <th>商品今日销售</th>
                <th>上下架</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>花生</td>
                <td>50</td>
                <td>120</td>
                <td><button>下架花生</button></td>
            </tr>
            <tr>
                <td>玉米</td>
                <td>200</td>
                <td>58</td>
                <td><button>下架玉米</button></td>
            </tr>
            <tr>
                <td>苹果</td>
                <td>180</td>
                <td>26</td>
                <td><button>下架苹果</button></td>
            </tr> -->
        </tbody>
        <tfoot></tfoot>
    </table>
    <button onclick="on(this)">一键上架</button>
</body>
<script>
    let commodity = {
        hua: {
            name: "花生",
            stock: "50",
            today: "120",
        },
        yumi: {
            name: "玉米",
            stock: "200",
            today: "50",
        },
        ap: {
            name: "苹果",
            stock: "180",
            today: "26",
        },
    };
    console.log(commodity);
    // window.onload(on(ele));
    function on(ele) {
        const ab = document.querySelector("tbody");
        // console.log(ab);
        let html = `
             <tr class="tr1" >
                <td>${commodity.hua.name}</td>
                <td>${commodity.hua.stock}</td>
                <td>${commodity.hua.today}</td>
                <td><button onclick="on1(this)" >下架花生</button></td>
            </tr>
            <tr class ="tr2">
                <td>${commodity.yumi.name}</td>
                <td>${commodity.yumi.stock}</td>
                <td>${commodity.yumi.today}</td>
                <td><button onclick="on2(this)">下架玉米</button></td>
            </tr>
            <tr  class ="tr3">
                <td>${commodity.ap.name}</td>
                <td>${commodity.ap.stock}</td>
                <td>${commodity.ap.today}</td>
                <td><button onclick="on3(this)">下架苹果</button></td>
            </tr>
        `;
        ab.insertAdjacentHTML("afterBegin", html);
    }
    function on1(ele) {
        ele.parentNode.parentNode.remove();
    }
    function on2(ele) {
        ele.parentNode.parentNode.remove();
    }
    function on3(ele) {
        ele.parentNode.parentNode.remove();
    }
</script>
</html>