标签 Javascript 下的文章

2024-08-07




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无缝轮播图</title>
<style>
  .slider {
    position: relative;
    width: 300px;
    height: 200px;
    margin: auto;
    overflow: hidden;
  }
  .slider img {
    width: 300px;
    height: 200px;
    position: absolute;
    transition: transform 0.5s ease-in-out;
  }
</style>
</head>
<body>
 
<div class="slider">
  <img src="image1.jpg" alt="Image 1" class="active">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>
 
<script>
  let currentIndex = 0;
  const images = document.querySelectorAll('.slider img');
  const imageCount = images.length;
 
  function showImage(index) {
    images[currentIndex].style.transform = 'translateX(100%)';
    images[index].style.transform = 'translateX(0)';
    currentIndex = index;
  }
 
  function nextImage() {
    const nextIndex = (currentIndex + 1) % imageCount;
    showImage(nextIndex);
  }
 
  function startSlider() {
    setInterval(nextImage, 3000);
  }
 
  startSlider();
</script>
 
</body>
</html>

这个简单的无缝轮播图示例使用了基本的HTML、CSS和JavaScript。轮播图中有三张图片，每张图片都是绝对定位的，并且初始都在左侧（translateX(100%)）。当轮播开始时，当前活动图片会移动到右侧（translateX(0)），而下一张图片会移动到视图中（translateX(100%)变为translateX(0)）。这个例子使用了简单的模运算来处理图片的索引循环。

- 阅读更多 -

nuxt.js中使用axios以及二次封装

System

2024-08-07

所有,javascript

在Nuxt.js中使用axios并进行二次封装，可以通过以下步骤实现：

安装axios:




npm install axios

在plugins目录下创建axios.js文件，并编写二次封装的代码:




// plugins/axios.js
import axios from 'axios';
 
let axiosInstance = axios.create({
  baseURL: 'http://your-api-url/',
  // 其他配置...
});
 
// 添加请求拦截器
axiosInstance.interceptors.request.use(config => {
  // 可以在这里添加例如token等请求头
  // if (store.state.token) {
  //   config.headers.common['Authorization'] = `Bearer ${store.state.token}`;
  // }
  return config;
}, error => {
  return Promise.reject(error);
});
 
// 添加响应拦截器
axiosInstance.interceptors.response.use(response => {
  // 对响应数据做处理
  return response.data;
}, error => {
  // 处理响应错误
  return Promise.reject(error);
});
 
export default axiosInstance;

在nuxt.config.js中配置axios插件:




// nuxt.config.js
export default {
  // ...
  plugins: [
    '@/plugins/axios'
  ],
  // ...
}

在组件或页面中使用封装后的axios实例:




// 在组件中
export default {
  async fetch() {
    const response = await this.$axios.get('/your-endpoint');
    this.data = response;
  }
}

通过以上步骤，你可以在Nuxt.js项目中使用二次封装的axios实例，并能够方便地在请求和响应中添加全局的处理逻辑。

System

2024-08-07

所有,javascript

Highlight.js 和 Markdown-it 是两个常用的JavaScript库，分别用于代码高亮和Markdown解析。以下是如何将它们结合使用的示例代码：

首先，确保在你的项目中包含了这两个库的CSS和JavaScript文件。
在HTML文件中，创建一个容器来显示高亮后的代码和解析后的Markdown。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Highlight.js and Markdown-it Example</title>
    <link rel="stylesheet" href="path/to/highlight.js/styles/default.css">
    <script src="path/to/highlight.js/highlight.pack.js"></script>
    <script src="path/to/markdown-it.js"></script>
</head>
<body>
    <div id="code-container"></div>
    <div id="markdown-container"></div>
    <script>
        // 初始化Markdown-it
        var md = markdownit();
 
        // 初始化Highlight.js
        hljs.initHighlightingOnLoad();
 
        window.onload = function() {
            // 示例代码
            var code = '```javascript\nconsole.log("Hello, World!");\n```';
 
            // 将代码放入代码容器
            document.getElementById('code-container').innerHTML = code;
 
            // 解析Markdown并放入Markdown容器
            document.getElementById('markdown-container').innerHTML = md.render(code);
        };
    </script>
</body>
</html>

在这个例子中，我们首先在HTML的<head>部分包含了Highlight.js和Markdown-it的CSS和JavaScript文件。然后，在<body>中创建了两个<div>容器，分别用于显示高亮后的代码和解析后的Markdown。在<script>标签中，我们初始化了Markdown-it，并在页面加载完成后通过Highlight.js的initHighlightingOnLoad函数进行代码高亮。最后，我们使用Markdown-it的render函数将代码块解析为HTML，并将其显示在页面上。

System

2024-08-07

所有,javascript

AST-HOOK是一种用于JavaScript的逆向工程技术，它允许开发者在JavaScript的抽象语法树(AST)级别进行代码分析和操作。

在这里，我们将使用ast-hook-for-js-re库来实现一个简单的内存漫游的例子。首先，我们需要安装这个库：




npm install ast-hook-for-js-re

下面是一个简单的使用ast-hook-for-js-re的例子，它会在AST层面修改一个函数的行为，使其在执行时打印一条特定的消息：




const hook = require('ast-hook-for-js-re');
 
// 要修改的JavaScript代码
const code = `
function add(a, b) {
  return a + b;
}
`;
 
// 创建一个hook实例
const hookInstance = hook(code);
 
// 定义一个钩子函数，它会在add函数执行时被调用
const hookedAdd = hookInstance.hookFunction('add', function(args, original) {
  console.log('Function add is about to be called with arguments:', args);
  // 调用原始函数
  const result = original(...args);
  console.log('Function add has been called with result:', result);
  // 返回结果
  return result;
});
 
// 执行修改后的代码
const addResult = hookInstance.exec(); // 这将执行add函数，并应用了我们的钩子函数
 
// 打印结果
console.log(addResult); // 这将输出我们在钩子函数中记录的信息

在这个例子中，我们首先导入了ast-hook-for-js-re库，然后定义了一些JavaScript代码。接着，我们使用hook函数创建了一个hook实例，并使用hookFunction方法钩住了add函数的执行。在hookFunction方法中，我们记录了函数调用的参数和结果，并在函数执行前后打印了相关信息。最后，我们执行了修改后的代码，并打印了结果。

这个例子展示了如何使用AST-HOOK进行代码的逆向工程和修改，这在进行安全研究、逆向工程和调试等领域有着广泛的应用。

- 阅读更多 -

Vue3+NodeJS 接入文心一言，发布一个 VSCode 大模型问答插件

System

2024-08-07

所有,javascript

以下是一个简化的示例，展示如何在Vue3和NodeJS环境中接入文心一言，并创建一个VSCode插件用于提供大模型问答服务。




// Vue3 前端部分，简单的问答界面
<template>
  <div>
    <input v-model="query" placeholder="输入你的问题" />
    <button @click="askQuestion">提问</button>
    <div v-if="answer">{{ answer }}</div>.
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
import axios from 'axios';
 
const query = ref('');
const answer = ref('');
 
async function askQuestion() {
  try {
    const response = await axios.post('/api/ask-question', { query: query.value });
    answer.value = response.data.answer;
  } catch (error) {
    console.error('问答失败:', error);
  }
}
</script>




// NodeJS 后端部分，处理前端请求并转发至文心一言
const express = require('express');
const axios = require('axios');
 
const app = express();
const port = 3000;
 
app.use(express.json());
 
app.post('/api/ask-question', async (req, res) => {
  try {
    const { query } = req.body;
    const response = await axios.post('https://aip.baidubce.com/rpc/2.0', {
      // 文心一言的请求参数
    });
    const answer = response.data.result; // 假设文心一言的响应格式
    res.json({ answer });
  } catch (error) {
    console.error('调用文心一言失败:', error);
    res.status(500).json({ error: '服务器错误' });
  }
});
 
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

以上代码仅为示例，具体实现时需要根据文心一言的API文档填充请求参数和处理响应。在实际部署时，还需要处理身份验证、错误处理、缓存等问题。此外，VSCode插件的具体实现会有所不同，需要遵循VSCode的插件开发规范。

- 阅读更多 -

Node.js 基于HTML的企业进销存管理系统

System

2024-08-07

所有,html

由于这个项目涉及的代码量较大且涉及商业敏感信息，我无法提供完整的代码实例。但我可以提供一个简化的Express服务器初始化的例子，这个例子展示了如何使用Express框架来设置一个简单的服务器，并且如何在服务器中定义路由来响应HTTP请求。




const express = require('express');
const app = express();
const port = 3000;
 
// 中间件，用于解析URL编码的请求体
app.use(express.urlencoded({ extended: true }));
 
// 中间件，用于提供静态文件服务
app.use(express.static('public'));
 
// 主页路由
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});
 
// 监听指定端口
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

这个代码实例展示了如何设置一个简单的Express服务器，并且如何定义一个主页路由和一个用于提供静态文件服务的中间件。这个例子不包含数据库连接和业务逻辑处理，但它可以作为开始学习如何使用Node.js和Express创建Web应用的起点。在实际应用中，你需要根据具体需求添加数据库集成、用户认证、业务逻辑处理等功能。

- 阅读更多 -

截屏插件 js-web-screen-shot（Vue 、html）

System

2024-08-07

所有,html

如果你想要在Vue应用中使用js-web-screen-shot插件来实现截屏功能，首先需要安装这个插件：




npm install js-web-screen-shot --save

然后在你的Vue组件中引入并使用这个插件：




// 引入插件
import screenShot from 'js-web-screen-shot';
 
export default {
  methods: {
    takeScreenshot() {
      // 调用插件的方法来截屏
      screenShot({
        // 你可以设置截图的格式、质量和缩放比例等
        format: 'jpeg',
        quality: 1,
        scale: 2,
      }).then((imgDataURL) => {
        // 这里处理截屏后的数据，例如显示图片或下载
        console.log(imgDataURL);
      }).catch((error) => {
        // 处理可能出现的错误
        console.error(error);
      });
    }
  }
}

在你的Vue模板中，你可以添加一个按钮来触发截屏功能：




<template>
  <div>
    <button @click="takeScreenshot">截屏</button>
  </div>
</template>

这样，当用户点击这个按钮时，就会触发截屏功能，并且你可以在回调中处理截屏后的数据（例如显示图片或下载）。

System

2024-08-07

所有,javascript




// 引入图片操作的API
import image from '@ohos.multimedia.image';
 
// 图片缩放函数
function scaleImage(path, scale) {
  image.createImageBitmap(path).then((imageBitmap) => {
    let width = imageBitmap.width;
    let height = imageBitmap.height;
    let scaledWidth = width * scale;
    let scaledHeight = height * scale;
    let config = {
      src: imageBitmap,
      destWidth: scaledWidth,
      destHeight: scaledHeight,
    };
 
    image.createImageBitmap(config).then((scaledImageBitmap) => {
      // 在这里处理缩放后的图片，例如显示或保存
      console.log('图片缩放成功:', scaledImageBitmap);
    }).catch((error) => {
      console.error('图片缩放失败:', error);
    });
  }).catch((error) => {
    console.error('创建图片位图失败:', error);
  });
}
 
// 使用示例
scaleImage('/path/to/image.jpg', 0.5); // 缩放为原图的50%

这段代码演示了如何在OpenHarmony（鸿蒙）操作系统中使用JavaScript进行图片缩放操作。首先引入了@ohos.multimedia.image模块，然后定义了一个scaleImage函数，该函数接受图片路径和缩放比例作为参数。使用createImageBitmap函数加载图片，并通过config对象设置缩放后的尺寸，最后创建并处理缩放后的图片位图。

- 阅读更多 -

html和原生js实现年月或者日期选择并设置默认值

System

2024-08-07

所有,html

以下是使用HTML和原生JavaScript实现日期选择并设置默认值的简单示例。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date Picker Example</title>
<script>
function setDefaultDate() {
    var defaultDate = "2023-03-01"; // 设置默认日期格式为 "年-月-日"
    var dateParts = defaultDate.split("-");
    var year = dateParts[0];
    var month = dateParts[1] - 1; // 月份是从0开始的，所以减1
    var day = dateParts[2];
 
    document.getElementById("year").value = year;
    document.getElementById("month").value = month;
    document.getElementById("day").value = day;
}
</script>
</head>
<body onload="setDefaultDate()">
<form>
    <label for="year">Year:</label>
    <select id="year">
        <!-- 这里应该是年份的选择，可以用JavaScript生成 -->
    </select>
 
    <label for="month">Month:</label>
    <select id="month">
        <option value="0">January</option>
        <option value="1">February</option>
        <option value="2">March</option>
        <option value="3">April</option>
        <option value="4">May</option>
        <option value="5">June</option>
        <option value="6">July</option>
        <option value="7">August</option>
        <option value="8">September</option>
        <option value="9">October</option>
        <option value="10">November</option>
        <option value="11">December</option>
    </select>
 
    <label for="day">Day:</label>
    <select id="day">
        <!-- 这里应该是每个月的日期选择，可以用JavaScript生成 -->
    </select>
</form>
</body>
</html>

在这个例子中，我们设置了一个默认日期2023-03-01，并在页面加载完成时通过onload事件调用setDefaultDate函数来设置这个日期。这个函数将默认日期分割成年、月和日，并分别设置到对应的select元素中。注意，月份下拉菜单中的值是从0开始的，所以当你设置月份时需要减去1。日期下拉菜单中的值应该是动态生成的，这里为了简化例子，没有包括动态生成日期的代码。

- 阅读更多 -

HTML+JavaScript+Canvas编写2D小游戏

System

2024-08-07

所有,html

由于原代码较长，我们将提供核心函数的示例代码。这个示例展示了如何在HTML页面中使用JavaScript和Canvas API创建一个简单的2D游戏场景，其中包含了玩家控制和敌人移动的逻辑。




<!DOCTYPE html>
<html>
<head>
    <title>2D Game Example</title>
    <style>
        canvas {
            border:1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="300"></canvas>
    <script>
        var canvas = document.getElementById('gameCanvas');
        var ctx = canvas.getContext('2d');
        var player = { x: 190, y: 240, width: 20, height: 40 };
        var enemies = [{ x: 50, y: 50, width: 20, height: 20 }, { x: 150, y: 180, width: 20, height: 20 }];
 
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
 
            // Draw player
            ctx.fillStyle = 'blue';
            ctx.fillRect(player.x, player.y, player.width, player.height);
 
            // Draw enemies
            ctx.fillStyle = 'red';
            for (var i = 0; i < enemies.length; i++) {
                var enemy = enemies[i];
                ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
                enemy.x += 1; // Simple enemy movement
                if (enemy.x > canvas.width) enemy.x = 0;
            }
        }
 
        function update(event) {
            if (event.keyCode === 37) { // Left arrow key
                player.x -= 5;
            } else if (event.keyCode === 39) { // Right arrow key
                player.x += 5;
            }
            if (player.x < 0) player.x = canvas.width;
            if (player.x > canvas.width) player.x = 0;
        }
 
        // Start game loop
        setInterval(draw, 30);
        window.addEventListener('keydown', update);
    </script>
</body>
</html>

这段代码创建了一个简单的游戏，其中有一个玩家和几个敌人。玩家可以通过左右箭头键控制位置，敌人将简单地沿着画布边缘移动。这个示例提供了如何使用JavaScript和Canvas API来绘制简单图形、处理键盘输入和游戏循环的基础。

- 阅读更多 -