1. 首页
  2. 分类
  3. 前端技术
js实现点击复制功能
System
2024-08-15
所有,javascript

在JavaScript中，实现点击复制功能通常涉及到选择文本和使用剪贴板API。以下是一个简单的实现示例：




// 复制文本到剪贴板的函数
function copyTextToClipboard(text) {
  // 创建一个临时的输入框来保存文本
  const textArea = document.createElement('textarea');
  
  // 设置输入框的属性
  textArea.value = text;
  textArea.style.position = 'fixed';
  textArea.style.top = '0';
  textArea.style.left = '0';
  textArea.style.width = '2em';
  textArea.style.height = '2em';
  textArea.style.padding = '0';
  textArea.style.border = 'none';
  textArea.style.outline = 'none';
  textArea.style.boxShadow = 'none';
  textArea.style.background = 'transparent';
  
  // 将输入框添加到文档中
  document.body.appendChild(textArea);
  
  // 选中输入框的文本
  textArea.select();
  
  // 执行复制命令
  try {
    const successful = document.execCommand('copy');
    console.log(successful ? 'Copy successful' : 'Copy failed');
  } catch (err) {
    console.error('Oops, unable to copy', err);
  }
  
  // 移除输入框
  document.body.removeChild(textArea);
}
 
// 绑定点击事件到按钮
document.querySelector('#copyButton').addEventListener('click', () => {
  const textToCopy = document.querySelector('#textToCopy').textContent;
  copyTextToClipboard(textToCopy);
});

在这个示例中，我们定义了一个copyTextToClipboard函数，它接受一个文本参数并将其复制到剪贴板。我们还创建了一个按钮点击事件监听器，当按钮被点击时，会调用copyTextToClipboard函数并传入需要复制的文本内容。

请注意，document.execCommand('copy')方法在某些浏览器中可能不起作用，尤其是在受限制的上下文环境中（例如某些移动浏览器）或者用户设备的安全设置禁止了自动复制行为的情况下。

- 阅读更多 -
JS【详解】Map （含Map 和 Object 的区别，Map 的常用 API，Map与Object 的性能对比，Map 的应用场景和不适合的使用场景）
System
2024-08-15
所有,javascript

在JavaScript中，Map对象是一组键值对的集合，可以存储任何类型的对象。Map和Object都可以用于存储键值对，但它们之间有一些重要的区别：

  1. Object的键必须是字符串或者可以转换为字符串的对象，而Map的键可以是任意对象。
  2. Object的属性也是对象，可以是数组、函数等，而Map的值可以是任意对象。
  3. Object的属性是按照插入的顺序排序，而Map的元素是按照插入的顺序排序。
  4. Object的键是字符串，如果需要存储数字或其他类型的对象作为键，需要进行转换，而Map可以直接使用任何对象作为键。

Map的常用API：

  • new Map(): 创建一个新的Map实例。
  • map.set(key, value): 添加一个新的键值对。
  • map.get(key): 获取指定键对应的值。
  • map.has(key): 检查是否包含指定的键。
  • map.delete(key): 删除指定的键值对。
  • map.clear(): 清空Map中的所有键值对。
  • map.size: 获取Map中键值对的数量。

Map与Object的性能对比：

在大多数现代浏览器中，Map的性能通常优于Object。Map的查找和插入操作的平均时间复杂度都是O(1)，而Object的这些操作的时间复杂度最坏是O(n)。

示例代码：




// Map的使用
let map = new Map();
map.set('key1', 'value1');
map.set(true, 789);
map.set(new Object(), {a: 1, b: 2});
 
console.log(map.get('key1')); // 输出：value1
console.log(map.has(true));   // 输出：true
console.log(map.get(new Object())); // 输出：undefined，因为对象是不同的引用
 
// Object的使用
let obj = {};
obj['key2'] = 'value2';
obj[123] = 456;
obj[{c: 3}] = 'complexValue';
 
console.log(obj['key2']); // 输出：value2
console.log(obj[123]);    // 输出：456
console.log(obj[{c: 3}]); // 输出：undefined，因为对象作为键被转换成了字符串'[object Object]'
- 阅读更多 -
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
System
2024-08-15
所有,javascript

以下是实现一个带有二级菜单的头部导航菜单的简单示例代码：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header Menu with Submenu</title>
<style>
  /* 添加CSS样式 */
</style>
</head>
<body>
 
<nav>
  <ul id="menu">
    <li><a href="#">Home</a></li>
    <li class="submenu">
      <a href="#">Products</a>
      <ul>
        <li><a href="#">Product 1</a></li>
        <li><a href="#">Product 2</a></li>
        <li><a href="#">Product 3</a></li>
      </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
 
<script>
  // 添加JavaScript代码
</script>
 
</body>
</html>

CSS:




nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
 
nav ul li {
  float: left;
}
 
nav ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
nav ul li a:hover {
  background-color: #111;
}
 
.submenu {
  position: relative;
}
 
.submenu ul {
  position: absolute;
  display: none;
  left: 0;
  top: 100%;
  background-color: #666;
}
 
.submenu:hover ul {
  display: block;
}
 
.submenu ul li {
  float: none;
}
 
.submenu ul a:hover {
  background-color: #555;
}

JavaScript:




// 无需额外JavaScript代码，二级菜单的显示和隐藏通过CSS实现

这个示例提供了一个基本的二级菜单实现，没有使用JavaScript，仅通过CSS来控制菜单的显示和隐藏。当用户将鼠标悬停在具有子菜单的项上时，子菜单会显示出来。这个实现简洁而直观，适合作为学习如何构建下拉菜单的起点。

- 阅读更多 -
高级编程JavaScript。js实现 Notifications 浏览器消息通知
System
2024-08-15
所有,javascript



// 检查浏览器是否支持Notification API
if ('Notification' in window) {
  // 检查用户是否允许通知
  Notification.requestPermission()
    .then((permission) => {
      if (permission === 'granted') {
        // 如果允许，创建一个通知
        var notification = new Notification('标题', {
          body: '这是通知的内容',
          icon: 'notif-icon.png' // 可选的图标
        });
 
        // 可选：点击通知时的回调
        notification.onclick = function(event) {
          // 在这里处理点击事件
          window.open('https://example.com'); // 打开一个新窗口或者页面
        };
      }
    });
} else {
  alert('你的浏览器不支持通知！');
}

这段代码首先检查Notification是否在window对象中，如果存在，它会请求用户权限来显示通知。如果用户同意，则创建一个通知实例，并提供可选的图标和点击事件处理程序。如果浏览器不支持Notification API，会显示一个警告框。

- 阅读更多 -
js判断浏览器及终端
System
2024-08-15
所有,javascript

在JavaScript中，可以使用navigator对象来获取有关用户浏览器的信息，但是无法直接获取到终端的具体型号。不过，可以通过用户代理字符串（navigator.userAgent）来间接判断。以下是一个简单的示例，展示了如何使用JavaScript来判断常见的浏览器和操作系统。




function getBrowserInfo() {
  var ua = navigator.userAgent;
  var browserInfo = {
    browser: null,
    version: null,
    os: null
  };
 
  // 判断浏览器
  if (ua.indexOf('Firefox') !== -1) {
    browserInfo.browser = 'Firefox';
  } else if (ua.indexOf('Opera') !== -1 || ua.indexOf('OPR') !== -1) {
    browserInfo.browser = 'Opera';
  } else if (ua.indexOf('Trident') !== -1) {
    browserInfo.browser = 'IE';
  } else if (ua.indexOf('Edge') !== -1) {
    browserInfo.browser = 'Edge';
  } else if (ua.indexOf('Chrome') !== -1) {
    browserInfo.browser = 'Chrome';
  } else if (ua.indexOf('Safari') !== -1) {
    browserInfo.browser = 'Safari';
  }
 
  // 判断浏览器版本
  if (browserInfo.browser) {
    var verRegex = new RegExp(browserInfo.browser + '(?:/([^)]+)|$)', 'i');
    var version = ua.match(verRegex);
    browserInfo.version = version ? version[1] : null;
  }
 
  // 判断操作系统
  if (ua.indexOf('Windows NT') !== -1) {
    browserInfo.os = 'Windows';
  } else if (ua.indexOf('Macintosh') !== -1) {
    browserInfo.os = 'Mac';
  } else if (ua.indexOf('X11') !== -1 || ua.indexOf('Linux') !== -1) {
    browserInfo.os = 'Linux';
  } else if (ua.indexOf('iPhone') !== -1) {
    browserInfo.os = 'iOS';
  } else if (ua.indexOf('Android') !== -1) {
    browserInfo.os = 'Android';
  }
 
  return browserInfo;
}
 
var browserInfo = getBrowserInfo();
console.log(browserInfo);

这段代码定义了一个getBrowserInfo函数，它返回一个包含浏览器、版本和操作系统信息的对象。请注意，用户代理字符串可以被用户或浏览器插件修改，所以它不是一个完全可靠的方法来识别终端。此外，由于移动设备的浏览器和操作系统差异巨大，代码中没有包括所有可能的操作系统或设备型号。

- 阅读更多 -
如何用JS校验HTTP和HTTPS地址
System
2024-08-15
所有,javascript

您可以通过检查URL的protocol部分来验证是HTTP还是HTTPS地址。以下是一个简单的JavaScript函数，用于验证URL是否为HTTP或HTTPS：




function isHttpOrHttps(url) {
    try {
        const parsedUrl = new URL(url);
        return parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:';
    } catch (e) {
        // URL is invalid
        return false;
    }
}
 
// 示例
console.log(isHttpOrHttps('http://example.com')); // true
console.log(isHttpOrHttps('https://example.com')); // true
console.log(isHttpOrHttps('ftp://example.com')); // false
console.log(isHttpOrHttps('not a url')); // false

这个函数尝试使用URL构造函数来解析提供的URL。如果解析成功且协议为http:或https:，则返回true；否则，如果URL无法解析，将捕获异常并返回false。

- 阅读更多 -
JS实现chatgpt数据流式回复效果
System
2024-08-15
所有,javascript

在JavaScript中实现与ChatGPT相似的数据流式回复效果，可以使用递归的Promise和异步函数来模拟。以下是一个简单的示例代码：




// 模拟ChatGPT的交互函数
async function chatGPT(message) {
  // 这里只是模拟发送消息和接收回复，实际应用中需要与服务器通信
  console.log('You: ' + message);
  
  // 模拟延迟接收到的回复
  await new Promise(resolve => setTimeout(resolve, 1000)); // 延迟1秒
  
  // 模拟随机生成的回复
  let response = randomResponse();
  console.log('Assistant: ' + response);
  
  // 模拟用户的下一条消息输入
  let nextMessage = await getUserInput();
  
  // 递归调用自身以模拟连续对话
  return chatGPT(nextMessage);
}
 
// 随机生成回复的函数
function randomResponse() {
  const responses = ['回复1', '回复2', '回复3'];
  return responses[Math.floor(Math.random() * responses.length)];
}
 
// 模拟用户输入的函数
function getUserInput() {
  return new Promise(resolve => {
    // 假设用户在1秒后输入消息
    setTimeout(() => resolve('用户输入的消息'), 1000);
  });
}
 
// 开始模拟聊天
chatGPT('用户的初始消息').then(() => {
  console.log('聊天结束');
});

在这个例子中，chatGPT 函数模拟了用户输入消息并接收回复的过程。它首先打印出用户的消息，然后模拟服务器的延迟回复，随后打印出随机生成的回复。然后，它等待用户的下一条消息输入，并递归调用自身以模拟连续的聊天会话。

注意：这个例子仅用于演示如何实现数据流式回复的效果，并不是实际的聊天机器人实现。在实际应用中，你需要与ChatGPT的服务器API进行通信，并处理实际的用户输入和服务器回复。

- 阅读更多 -
推荐项目：Draft.js - 轻松构建富文本编辑器
System
2024-08-15
所有,javascript

Draft.js 是 Facebook 开发的一个富文本编辑器框架，旨在构建文本编辑器时提供灵活性和可以维护性。以下是一个简单的例子，展示如何使用 Draft.js 创建一个基本的富文本编辑器。




import React from 'react';
import { Editor, EditorState } from 'draft-js';
 
class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
    };
  }
 
  onChange = (editorState) => {
    this.setState({
      editorState,
    });
  };
 
  render() {
    return (
      <Editor
        editorState={this.state.editorState}
        onChange={this.onChange}
        placeholder="Enter some text..."
      />
    );
  }
}
 
export default MyEditor;

这段代码创建了一个简单的富文本编辑器组件，其中包含了 Editor 组件，它是 Draft.js 的核心部分。EditorState 维护编辑器的状态，onChange 方法用于监听用户的输入并更新状态。这个例子展示了如何将 Draft.js 集成到一个现代的 React 应用中。

- 阅读更多 -
vue中axios的二次封装——vue 封装axios详细步骤
System
2024-08-15
所有,javascript

在Vue中，可以通过创建一个axios实例并配置默认行为，然后再导出这个实例，以便在其他组件中使用。以下是一个简单的二次封装示例：

  1. 创建一个http.js文件用于封装axios。



import axios from 'axios';
 
// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});
 
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可以在这里添加请求头等信息
    // 例如：config.headers['Authorization'] = 'your token';
    return config;
  },
  error => {
    // 请求错误处理
    return Promise.reject(error);
  }
);
 
// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做处理，例如只返回data部分
    const res = response.data;
    // 根据返回的状态码做相应处理，例如401未授权等
    return res;
  },
  error => {
    // 响应错误处理
    return Promise.reject(error);
  }
);
 
export default service;
  1. 在其他组件中使用封装后的axios实例发送请求。



import http from '@/path/to/http.js';
 
export default {
  data() {
    return {
      // ...
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await http.get('/some-endpoint');
        // 处理响应数据
        console.log(response);
      } catch (error) {
        // 处理错误
        console.error(error);
      }
    }
  }
}

这样，你就可以在Vue项目中方便地使用二次封装后的axios实例了。

- 阅读更多 -
nodejs高版本与低版本切换的方案
System
2024-08-15
所有,javascript

在Node.js中，如果需要在不同的项目中切换使用不同版本的Node.js，可以使用以下几种方法：

  1. 使用nvm（Node Version Manager）：

    • 安装nvm：在终端运行curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash或者访问nvm GitHub repository获取安装指令。
    • 安装不同版本的Node.js：使用nvm install <version>，例如nvm install 14。
    • 切换版本：使用nvm use <version>，例如nvm use 14。

  2. 使用n：

    • 安装n：在终端运行npm install -g n。
    • 安装不同版本的Node.js：使用n <version>，例如n 14。

  3. 使用Docker容器：

    • 拉取不同版本的Node.js Docker镜像：使用docker pull node:<version>，例如docker pull node:14。
    • 运行容器并在容器中工作：使用docker run -it node:14 /bin/bash。

  4. 使用asdf：

    • 安装asdf：在终端运行asdf GitHub repository的安装指令。
    • 添加Node.js插件：asdf plugin-add nodejs https://github.com/asdf-vm/asdf-nodejs.git。
    • 安装不同版本的Node.js：asdf install nodejs <version>。
    • 切换版本：asdf global nodejs <version>或asdf local nodejs <version>。

选择适合你需求的方法进行版本管理。

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