1. 首页
  2. 分类
  3. javascript
学习使用js监测浏览器窗口大小变化
System
2024-08-21
所有,javascript

在JavaScript中，可以使用window对象的resize事件来监测浏览器窗口的大小变化。以下是一个简单的例子，展示了如何设置一个事件监听器来响应窗口大小的变化，并且输出新的窗口大小。




// 定义一个函数来处理窗口大小变化的事件
function handleResize() {
    // 获取窗口的宽度和高度
    const windowWidth = window.innerWidth || document.documentElement.clientWidth;
    const windowHeight = window.innerHeight || document.documentElement.clientHeight;
 
    // 输出窗口的新大小
    console.log('窗口宽度: ' + windowWidth + ', 窗口高度: ' + windowHeight);
}
 
// 设置事件监听器来监听resize事件
window.addEventListener('resize', handleResize);

当你调整浏览器窗口的大小时，handleResize函数会被触发，并输出新的窗口宽度和高度。这个函数首先尝试使用window.innerWidth和window.innerHeight来获取窗口大小，如果这些属性不可用，则会使用document对象的documentElement.clientWidth和documentElement.clientHeight属性。

- 阅读更多 -
html-docx-js网页转为word格式框架
System
2024-08-21
所有,javascript

html-docx-js是一个JavaScript库，可以将HTML内容转换成Word文档格式（.docx）。以下是使用html-docx-js的基本步骤和示例代码：

  1. 引入html-docx-js库。
  2. 准备要转换的HTML内容。
  3. 使用html-docx-js将HTML转换成Word文档。
  4. 可选择使用file-saver库保存生成的Word文档。

示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>HTML to Word Example</title>
    <script src="https://cdn.jsdelivr.net/npm/html-docx-js/dist/html-docx.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script>
</head>
<body>
    <div id="content">
        <h1>Hello World</h1>
        <p>This is an example paragraph.</p>
    </div>
    <button onclick="convertToWord()">Convert to Word</button>
 
    <script>
        function convertToWord() {
            var content = document.getElementById('content').outerHTML;
            var converted = htmlDocx.asBlob(content);
            
            saveAs(converted, 'example.docx');
        }
    </script>
</body>
</html>

在这个示例中，我们定义了一个包含标题和段落的简单HTML内容。有一个按钮用于触发转换过程，它会将HTML内容转换成Word文档，并使用file-saver保存到用户的设备上。

- 阅读更多 -
JS获取本机IP地址的2种方法
System
2024-08-21
所有,javascript

在JavaScript中获取本机IP地址的方法主要有两种：通过WebRTC和通过Node.js。

  1. 使用WebRTC

WebRTC (Web Real-Time Communications) 是一个由W3C推动的项目，它允许在没有任何插件或者第三方软件的情况下，建立浏览器之间的音频、视频和数据分享。




function getUserIP(onNewIP) {
    // 创建一个RTCPeerConnection对象
    let RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
 
    // 创建一个配置对象
    let rtcConfig = {
        iceServers: []
    };
 
    // 创建一个新的RTCPeerConnection对象
    let pc = new RTCPeerConnection(rtcConfig);
 
    // 创建一个本地的数据流
    let dataChannel = pc.createDataChannel('');
 
    // 当有数据通道打开的时候触发
    pc.onicecandidate = (ice) => {
        if (!ice || !ice.candidate || !ice.candidate.candidate) {
            onNewIP(false);
        } else {
            let ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3})/;
            let ipAddress = ipRegex.exec(ice.candidate.candidate)[1];
            onNewIP(ipAddress);
        }
    };
 
    // 创建一个SDP offer以开始交换过程
    pc.createOffer((sdp) => {
        pc.setLocalDescription(sdp);
    }, () => {});
 
    // 使用数据通道来传输数据
    dataChannel.onmessage = (event) => {
        console.log(event.data);
    };
    dataChannel.send('Hello World!');
}
 
// 使用函数
getUserIP(ip => console.log(ip));
  1. 使用Node.js

如果你在浏览器环境中运行JavaScript，那么你不能直接获取本机IP地址。但是，如果你在Node.js环境中，你可以使用os模块来获取本机IP地址。




const os = require('os');
const networkInterfaces = os.networkInterfaces();
 
function getIPAddress() {
    for (const ifaceKey in networkInterfaces) {
        for (const iface of networkInterfaces[ifaceKey]) {
            if ('IPv4' !== iface.family || iface.internal !== false) {
                // skip over internal (i.e. 127.0.0.1) and non-ipv4 addresses
                continue;
            }
            return iface.address;
        }
    }
    throw new Error('No IP address found, and we need to return one');
}
 
console.log('IP Address: ' + getIPAddress());

注意：这些方法在不同的环境和不同的浏览器中可能不起作用，因为它们依赖于特定的API和权限。在某些情况下，出于安全考虑，浏览器可能不允许访问本机IP地址。

- 阅读更多 -
js如何拦截全局Fetch的请求和响应
System
2024-08-21
所有,javascript

在JavaScript中，可以通过重写window.fetch方法来拦截全局的fetch请求和响应。以下是一个简单的示例：




(function() {
    const originalFetch = window.fetch;
 
    window.fetch = function() {
        // 在这里可以添加拦截逻辑，比如修改请求头，拦截响应等
        // 调用原始的fetch方法，并传入参数
        return originalFetch.apply(this, arguments)
            .then(response => {
                // 在这里可以添加处理响应的逻辑
                // 返回修改后的响应对象
                return response;
            });
    };
})();

使用这段代码，你可以在全局范围内拦截所有的fetch请求，并对请求或响应进行必要的处理。记得在代码的适当位置调用这个自执行函数来重写window.fetch方法。

- 阅读更多 -
JavaScript 删除数组中指定元素(5种方法)
System
2024-08-21
所有,javascript



// 方法1: 使用 filter 方法
let arr = [1, 2, 3, 4, 5];
arr = arr.filter(item => item !== 3); // [1, 2, 4, 5]
 
// 方法2: 使用 for 循环和 splice 方法
let arr2 = [1, 2, 3, 4, 5];
for (let i = 0; i < arr2.length; i++) {
  if (arr2[i] === 3) {
    arr2.splice(i, 1);
    i--; // 防止错过一个元素
  }
}
 
// 方法3: 使用 while 循环和 pop 方法
let arr3 = [1, 2, 3, 4, 5];
let index = arr3.indexOf(3);
while (index > -1) {
  arr3.splice(index, 1);
  index = arr3.indexOf(3);
}
 
// 方法4: 使用 reduce 方法
let arr4 = [1, 2, 3, 4, 5];
arr4 = arr4.reduce((acc, val) => {
  return val !== 3 ? acc.concat(val) : acc;
}, []);
 
// 方法5: 使用 map 方法
let arr5 = [1, 2, 3, 4, 5];
arr5 = arr5.map(item => item === 3 ? [] : [item]).flat(); // [1, 2, 4, 5]
- 阅读更多 -
Vue3前端访问后端API的两个配置（axios中的baseURL与vite.config.js中的proxy)
System
2024-08-21
所有,javascript

在Vue 3项目中，如果你使用axios来发送HTTP请求，那么baseURL用于指定API的基础路径。在Vite的配置文件vite.config.js中，proxy用于配置代理，以便在开发环境中将API请求转发到后端服务器。

以下是如何在axios中设置baseURL和在Vite中配置proxy的简单示例：

axios配置（通常在src/utils/http.js或类似文件中）：




import axios from 'axios';
 
const httpClient = axios.create({
  baseURL: 'http://backend-api.example.com/api/', // 后端API的URL
  // 其他配置...
});
 
export default httpClient;

Vite配置文件（通常在项目根目录的vite.config.js或vite.config.ts中）：




import { defineConfig } from 'vite';
 
export default defineConfig({
  // 其他配置...
  server: {
    proxy: {
      '/api': {
        target: 'http://backend-api.example.com', // 后端API的实际地址
        changeOrigin: true, // 允许跨域
        // 其他代理选项...
      },
    },
  },
});

在这个配置中，当你通过代理访问/api时，所有发送到该路径的请求都会被转发到http://backend-api.example.com。changeOrigin选项设置为true以确保请求头中的Host信息正确反映了原始服务器，这对于处理跨域请求是必要的。

这样配置后，当你使用httpClient发送请求时，例如httpClient.get('/some-endpoint')，axios会将请求发送到http://backend-api.example.com/api/some-endpoint。Vite服务器会根据配置文件中定义的proxy规则将请求转发到后端服务器。

- 阅读更多 -
【React】React18 Hooks 之 forwardRef useImperativeHandle
System
2024-08-21
所有,javascript



import React, { useImperativeHandle, forwardRef } from 'react';
 
// 自定义 Hooks 用于处理表单数据
function useFormData(initialData) {
  const [data, setData] = React.useState(initialData);
 
  // 通过 useImperativeHandle 暴露给父组件的方法
  useImperativeHandle(
    // ref 对象
    null,
    () => ({
      getData: () => data,
      setData: (newData) => setData(newData),
    }),
    [data]
  );
 
  // 其他的 Hooks 逻辑...
}
 
// 自定义组件
const MyForm = forwardRef((props, ref) => {
  const formData = useFormData(props.initialData);
 
  // 处理表单提交...
 
  // 通过 ref 暴露数据和方法
  useImperativeHandle(ref, () => formData, [formData]);
 
  return (
    <form>
      {/* 表单元素 */}
    </form>
  );
});
 
// 使用 MyForm 组件
class App extends React.Component {
  formRef = React.createRef();
 
  handleSubmit = () => {
    if (this.formRef.current) {
      console.log(this.formRef.current.getData());
    }
  };
 
  render() {
    return (
      <>
        <MyForm ref={this.formRef} initialData={{}} />
        <button onClick={this.handleSubmit}>Submit</button>
      </>
    );
  }
}
 
export default App;

这个例子中，我们创建了一个自定义 Hook useFormData 用于处理表单数据，并通过 forwardRef 和 useImperativeHandle 使得父组件能够访问和操作这些数据。然后我们定义了一个 MyForm 组件，它使用了这个 Hook 并通过 ref 暴露了数据和方法。最后，在 App 组件中，我们创建了一个 ref 并将它传递给 MyForm 组件，同时提供了一个按钮用于提交表单，并在点击事件中打印出表单数据。

- 阅读更多 -
利用原生HTML + CSS + JS实现歌词滚动
System
2024-08-21
所有,javascript

要实现歌词滚动，可以通过CSS的animation和@keyframes来创建滚动效果，并结合JavaScript来控制歌词的切换。以下是一个简单的实现示例：

HTML:




<div class="lyrics-container">
  <ul class="lyrics">
    <li class="lyric">第一句歌词</li>
    <li class="lyric">第二句歌词</li>
    <li class="lyric">第三句歌词</li>
    <!-- 更多歌词 -->
  </ul>
</div>

CSS:




.lyrics-container {
  overflow: hidden;
  position: relative;
  height: 50px; /* 根据需要设定歌词显示区域的高度 */
}
 
.lyrics {
  position: absolute;
  width: 100%;
  animation: scrollLyrics 5s linear infinite; /* 调整时长以改变滚动速度 */
}
 
.lyric {
  line-height: 50px; /* 与.lyrics-container的高度相同 */
}
 
@keyframes scrollLyrics {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(-50px);
  }
}

JavaScript (切换歌词):




// 假设有一个函数来获取下一句歌词并更新显示
function nextLyric() {
  const lyricsContainer = document.querySelector('.lyrics-container');
  const lyrics = document.querySelectorAll('.lyric');
  // 获取当前显示的歌词索引
  let currentIndex = Array.from(lyricsContainer.children).indexOf(lyrics[0]);
  // 计算下一句歌词的索引
  let nextIndex = (currentIndex + 1) % lyrics.length;
  // 更新显示的歌词
  lyricsContainer.appendChild(lyrics[nextIndex]);
}
 
// 设置定时器每隔一定时间调用nextLyric函数
setInterval(nextLyric, 5000); // 时间间隔应与CSS动画时长相匹配

这个简单的例子实现了歌词的循环滚动。你可以根据需要调整CSS中.lyrics-container的高度和.lyrics的animation时长来改变滚动速度。JavaScript部分用于切换显示的歌词，并且可以通过设置setInterval的时间来控制歌词更新的频率。

- 阅读更多 -
Vue3+Vite连接高德地图JS API——地图显示、输入搜索
System
2024-08-21
所有,javascript



<template>
  <div class="map-container">
    <div id="map" class="map"></div>
    <input v-model="searchValue" @keyup.enter="searchAddress" placeholder="请输入地址" />
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
 
const searchValue = ref('');
const map = ref(null);
 
const initMap = () => {
  map.value = new AMap.Map('map', {
    zoom: 11, // 缩放级别
    center: [116.397428, 39.90923], // 中心点坐标
  });
};
 
const searchAddress = () => {
  const geocoder = new AMap.Geocoder({
    radius: 1000,
    extensions: 'all',
  });
 
  geocoder.getLocation(searchValue.value, (status, result) => {
    if (status === 'complete' && result.info === 'OK') {
      // 清除之前的标记
      map.value.clearMap();
      // 将地图中心设置为搜索结果的坐标
      map.value.setCenter(result.geocodes[0].location);
      // 添加标记
      map.value.addMarker({
        position: result.geocodes[0].location,
      });
    }
  });
};
 
onMounted(() => {
  AMapLoader.load({
    key: '您的高德API Key',
    version: '2.0',
    plugins: ['AMap.Geocoder'],
  }).then((AMap) => {
    initMap();
  }).catch(e => {
    console.error(e);
  });
});
</script>
 
<style>
.map-container {
  width: 100%;
  height: 400px;
}
.map {
  width: 100%;
  height: 100%;
}
</style>

这段代码使用了Vue3的<script setup>语法糖，并结合Vite构建工具。它展示了如何在Vue3项目中集成高德地图API，并实现地图显示、搜索地址并在地图上标记位置的功能。代码中使用了AMapLoader来异步加载高德地图的JavaScript API，并在组件加载后初始化地图。用户可以通过输入框输入地址并按下回车键来触发搜索，然后在地图上显示搜索结果。

- 阅读更多 -
报错解决：npm ERR! code EPERM npm ERR! syscall open npm ERR! path D:Program Files odejs ode_cache\_cac
System
2024-08-21
所有,javascript

解释：

这个错误通常表示 npm 试图打开一个文件但是没有权限。这可能是因为 npm 正在试图写入一个它没有足够权限的文件，或者是操作系统的权限设置导致的问题。

解决方法：

  1. 确认你是否以管理员身份运行命令行工具。在 Windows 上，你可以通过右键点击命令行程序并选择 "以管理员身份运行"。
  2. 检查 npm 相关的目录和文件的权限。确保你有足够的权限去读写 npm 使用的文件和目录。
  3. 清理 npm 缓存。使用命令 npm cache clean --force。
  4. 删除 node_modules 文件夹和 package-lock.json 文件，然后重新运行 npm install。
  5. 如果问题依旧，尝试重启计算机，然后再次以管理员身份运行 npm 命令。

请注意，具体的解决步骤可能需要根据实际遇到的错误细节进行调整。

- 阅读更多 -
Copyright © 2024 Tech Blog
All Right Reserved | 京ICP备19053165号