1. 首页
  2. 分类
  3. javascript
js 获取url的多种方式
System
2024-08-09
所有,javascript

在JavaScript中，可以使用多种方式获取当前页面的URL信息。以下是一些常用方法：

  1. window.location.href：这会返回当前页面的完整URL。



var url = window.location.href;
console.log(url); // 输出当前页面的URL
  1. window.location.protocol：返回页面使用的协议（例如 http: 或 https:）。



var protocol = window.location.protocol;
console.log(protocol); // 输出协议
  1. window.location.host：返回主机名和端口号（如果有的话）。



var host = window.location.host;
console.log(host); // 输出主机名
  1. window.location.hostname：返回不带端口号的主机名。



var hostname = window.location.hostname;
console.log(hostname); // 输出主机名
  1. window.location.port：返回URL中指定的端口号。



var port = window.location.port;
console.log(port); // 输出端口号
  1. window.location.pathname：返回URL中的路径部分。



var pathname = window.location.pathname;
console.log(pathname); // 输出路径
  1. window.location.search：返回URL的查询字符串部分（包括?）。



var search = window.location.search;
console.log(search); // 输出查询字符串
  1. window.location.hash：返回URL的哈希部分（包括#）。



var hash = window.location.hash;
console.log(hash); // 输出哈希

以上每种方法都适用于获取URL的不同部分。可以根据需要选择合适的方法来获取URL信息。

- 阅读更多 -
nodejs 中 yarn的安装和使用
System
2024-08-09
所有,javascript

在Node.js环境中安装Yarn，你可以使用npm（Node.js的包管理器）来安装Yarn。以下是安装Yarn的步骤：

  1. 打开终端（在Windows上是命令提示符或PowerShell，在macOS或Linux上是终端）。
  2. 运行以下命令以全局安装Yarn：



npm install -g yarn
  1. 安装完成后，你可以通过运行以下命令来检查Yarn是否正确安装：



yarn --version

使用Yarn的基本步骤：

  1. 初始化新的Node.js项目：



yarn init
  1. 添加依赖项：



yarn add [package_name]
  1. 将依赖项添加到开发依赖：



yarn add [package_name] --dev
  1. 移除依赖项：



yarn remove [package_name]
  1. 安装所有依赖项：



yarn install

这些是Yarn的基本使用方法。Yarn也有其他高级功能，如工作区、版本控制等，你可以通过它的官方文档进一步了解。

- 阅读更多 -
vue3+ts+element-plus集成bpmn.js
System
2024-08-09
所有,javascript

要在Vue 3、TypeScript和Element Plus中集成bpmn.js，你需要按照以下步骤操作：

  1. 安装bpmn.js依赖：



npm install bpmn-js
  1. 创建一个Vue组件来集成bpmn.js：



<template>
  <div ref="bpmnContainer" style="height: 600px;"></div>
</template>
 
<script lang="ts">
import { ref, onMounted, defineComponent } from 'vue';
import BpmnModeler from 'bpmn-js/lib/Modeler';
 
export default defineComponent({
  name: 'BpmnViewer',
  setup() {
    const bpmnContainer = ref<HTMLElement | null>(null);
    let bpmnModeler: BpmnModeler;
 
    onMounted(() => {
      if (bpmnContainer.value) {
        bpmnModeler = new BpmnModeler({
          container: bpmnContainer.value
        });
 
        // 加载默认的BPMN 2.0图
        bpmnModeler.importDiagram('https://cdn.jsdelivr.net/npm/bpmn-js-examples/diagrams/welcome.bpmn');
      }
    });
 
    return {
      bpmnContainer
    };
  }
});
</script>
  1. 在你的主组件或App.vue中引用这个新组件。

这个例子提供了一个简单的Vue 3组件，它使用bpmn.js加载并显示一个默认的BPMN 2.0图。你可以根据需要进一步定制这个组件，比如添加事件监听器来处理用户交互。

- 阅读更多 -
TS 对象，为对象动态添加属性
System
2024-08-09
所有,javascript

在TypeScript中，你可以使用类型断言来为对象动态添加属性。这里有一个例子：




let myObj: { [key: string]: any } = {};
 
// 动态添加属性
(myObj as any).newProperty = "Hello, World!";
 
// 或者使用类型断言
(myObj as Record<string, unknown>).anotherProperty = 42;
 
console.log(myObj.newProperty); // 输出: Hello, World!
console.log(myObj.anotherProperty); // 输出: 42

在这个例子中，myObj 最开始被定义为一个空对象，没有预定义的属性。通过类型断言，我们为 myObj 动态添加了 newProperty 和 anotherProperty 属性。

注意，使用 as any 或 as Record<string, unknown> 来绕过TypeScript的类型检查，允许你给对象添加任意的属性。然而，这样做可能会使类型系统失效，所以在添加属性之前最好确保这样做是必要的。

- 阅读更多 -
Three.js学习2：页面引入 Three.js
System
2024-08-09
所有,javascript

在HTML页面中引入Three.js，通常有以下几种方式：

  1. 通过CDN引入：



<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  1. 本地引入（将Three.js文件下载到本地项目目录）：



<script src="path/to/three.min.js"></script>
  1. NPM安装：



npm install three

然后在JavaScript文件中引入Three.js：




import * as THREE from 'three';

以下是一个简单的HTML页面示例，使用CDN方式引入Three.js：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three.js Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
    <script>
        // 这里是你的Three.js代码
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
 
        // 示例：创建一个立方体
        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
 
        camera.position.z = 5;
 
        function animate() {
            requestAnimationFrame(animate);
            // 旋转立方体
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
 
            renderer.render(scene, camera);
        }
 
        animate();
    </script>
</body>
</html>

这个页面创建了一个简单的3D场景，包含一个旋转的立方体。

- 阅读更多 -
在 Next.js 应用中创建ContactForm表单提交
System
2024-08-09
所有,javascript



import { useState } from 'react';
import Router from 'next/router';
import { Box, Button, FormField, TextInput, TextArea } from 'grommet';
import { doc, setDoc } from "firebase/firestore";
import { db } from '../../firebase/config';
 
const ContactForm = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
 
  const handleSubmit = async (e) => {
    e.preventDefault();
    const contactData = { name, email, message };
    await setDoc(doc(db, 'contacts', 'exampleContact'), contactData);
    Router.push('/success');
  };
 
  return (
    <Box
      as="form"
      onSubmit={handleSubmit}
      width="medium"
      pad="medium"
      gap="medium"
    >
      <FormField label="Name">
        <TextInput name="name" value={name} onChange={(e) => setName(e.target.value)} />
      </FormField>
      <FormField label="Email">
        <TextInput name="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      </FormField>
      <FormField label="Message">
        <TextArea name="message" value={message} onChange={(e) => setMessage(e.target.value)} />
      </FormField>
      <Button type="submit" label="Submit" primary />
    </Box>
  );
};
 
export default ContactForm;

这个代码实例展示了如何在Next.js应用中创建一个简单的ContactForm组件，并处理表单的提交。它使用React状态钩子管理表单输入的状态，并使用Firestore的setDoc函数将表单数据保存到Firebase。最后，当数据保存成功后，它使用Next.js的Router.push函数重定向到一个成功页面。

- 阅读更多 -
超级牛逼 专业的 js 汉字拼音转换库
System
2024-08-09
所有,javascript

"超级牛逼" 专注于提供最简洁的代码，让开发者能够快速理解和使用。以下是一个使用了 pinyin-pro 库进行汉字拼音转换的示例代码：




const { pinyin } = require('pinyin-pro');
 
// 设置拼音格式
pinyin.setOptions({ toneType: 'none' });
 
// 转换单个汉字为拼音
const convertSingle = (chinese) => {
    return pinyin(chinese, { pattern: 'normal' });
};
 
// 转换整个句子为拼音
const convertSentence = (sentence) => {
    return pinyin(sentence, { pattern: 'normal' }).map(word => word.join(''));
};
 
// 示例
console.log(convertSingle('中')); // 输出: ["zhong"]
console.log(convertSentence('你好世界')); // 输出: ["ni", "hao", "shi", "jie"]

这段代码首先导入了 pinyin-pro 库，并设置了拼音格式（去除声调）。然后定义了两个函数 convertSingle 和 convertSentence 分别用于转换单个汉字和整个句子的拼音。最后，提供了使用这两个函数的示例，并打印出了转换结果。

- 阅读更多 -
【HTML | CSS | JS】耗时一下午，整理出了一个精美的响应式登陆注册表单
System
2024-08-09
所有,javascript

以下是一个简化的响应式登录注册表单的HTML和CSS代码示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login/Register Form</title>
<style>
  body {
    font-family: Arial, sans-serif;
    padding: 24px;
    background-color: #F1F1F1;
  }
 
  .form-container {
    max-width: 300px;
    margin: auto;
    padding: 20px;
    background-color: #FFF;
    border: 1px solid #DDD;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
 
  input[type="text"], input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #DDD;
    border-radius: 5px;
  }
 
  input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #509839;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
 
  input[type="submit"]:hover {
    background-color: #3B8020;
  }
 
  .tab {
    display: none;
  }
 
  #login:checked + .tab-content .login,
  #register:checked + .tab-content .register {
    display: block;
  }
</style>
</head>
<body>
 
<div class="form-container">
  <label for="login">Login</label>
  <input type="radio" name="tab" id="login" checked>
  <label for="register">Register</label>
  <input type="radio" name="tab" id="register">
  <div class="tab-content">
    <div class="login">
      <form action="/submit-login" method="post">
        <input type="text" placeholder="Username" required>
        <input type="password" placeholder="Password" required>
        <input type="submit" value="Login">
      </form>
    </div>
    <div class="register">
      <form action="/submit-register" method="post">
        <input type="text" placeholder="Username" required>
        <input type="password" placeholder="Password" required>
        <input type="email" placeholder="Email" required>
        <input type="submit" value="Register">
      </form>
    </div>
  </div>
</div>
 
</body>
</html>

这段代码提供了一个简单的登录注册表单，使用CSS的:checked伪类实现无JS的切换效果。表单采用响应式设计，在不同屏幕尺寸上都能良好显示。

- 阅读更多 -
推荐开源项目：JS-SHA256 - 简易高效的JavaScript SHA256加密库
System
2024-08-09
所有,javascript



// 引入JS-SHA256库
const jssha256 = require('js-sha256');
 
// 使用SHA256加密字符串
const message = "Hello, World!";
const hash = jssha256(message);
 
console.log(hash); // 输出加密后的哈希值

这段代码演示了如何使用js-sha256库来生成一个字符串的SHA256哈希值。首先，通过require函数引入库，然后使用jssha256函数对一个字符串进行加密，最后打印出加密后的哈希值。这个例子简单明了，并且能够教会开发者如何使用这个库进行常规的加密操作。

- 阅读更多 -
js中window.open怎么修改新窗口名字
System
2024-08-09
所有,javascript

在JavaScript中，window.open 方法用于打开一个新窗口。如果你想要修改新窗口的名字（即窗口的名称属性），你可以在调用 window.open 时提供第二个参数，该参数将作为新窗口的名称。




// 打开一个新窗口，并将其名称设置为 "myWindow"
var myWindow = window.open("", "myWindow");
 
// 如果你想要在新窗口中打开一个页面
myWindow.document.write("Hello, this is a new window!");

请注意，现代浏览器的安全设置可能会阻止通过 window.open 弹出新窗口，除非它是由用户操作（如点击事件）触发的。因此，确保 window.open 是响应用户交互事件执行的。

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