标签 Javascript 下的文章

【Vue】前端Crypto-js加密库md5加密转成二进制/十六进制/Base64格式

2024-08-10

CryptoJS 提供了md5加密的功能，并且可以方便地将加密结果转换为二进制、十六进制、Base64格式。

解决方案1：




import CryptoJS from "crypto-js";
 
let message = "Hello, World!";
let messageMD5Binary = CryptoJS.MD5(message).toString(CryptoJS.enc.Binary);
let messageMD5Hex = CryptoJS.MD5(message).toString(CryptoJS.enc.Hex);
let messageMD5Base64 = CryptoJS.MD5(message).toString(CryptoJS.enc.Base64);
 
console.log(messageMD5Binary);
console.log(messageMD5Hex);
console.log(messageMD5Base64);

解决方案2：




import md5 from 'js-md5';
 
let message = "Hello, World!";
let messageMD5Binary = md5(message, { output: "binary" });
let messageMD5Hex = md5(message, { output: "hex" });
let messageMD5Base64 = md5(message, { output: "base64" });
 
console.log(messageMD5Binary);
console.log(messageMD5Hex);
console.log(messageMD5Base64);

解决方案3：




import crypto from 'crypto';
 
let message = "Hello, World!";
let messageMD5Binary = crypto.createHash('md5').update(message).digest('binary');
let messageMD5Hex = crypto.createHash('md5').update(message).digest('hex');
let messageMD5Base64 = crypto.createHash('md5').update(message).digest('base64');
 
console.log(messageMD5Binary);
console.log(messageMD5Hex);
console.log(messageMD5Base64);

以上三种方案都可以实现将明文转换为MD5加密的二进制、十六进制、Base64格式。其中，解决方案1和解决方案2使用的是CryptoJS库，解决方案3使用的是Node.js的crypto模块。这三种方案可以根据你的环境和需求选择使用。

- 阅读更多 -

next.js输出静态html部署

System

2024-08-10

所有,html

在Next.js中输出静态HTML并部署可以通过以下步骤完成：

构建你的Next.js应用：
```
npm run build
```
将构建产物（.next文件夹）上传到你的服务器。
确保服务器上安装了Node.js环境。

在服务器上部署Next.js应用通常需要一个进程管理器，如PM2：




npm install pm2 -g
pm2 start /path/to/your/nextjs-app/node_modules/next/dist/bin/next

配置服务器的web服务器（如Nginx或Apache）来转发请求到Next.js应用。

以下是一个基本的Nginx配置示例，用于转发到Next.js应用：




server {
    listen 80;
    server_name example.com;
 
    location / {
        proxy_pass http://localhost:3000; # 假设Next.js运行在服务器的3000端口
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

确保将server_name和proxy_pass中的localhost:3000替换为Next.js应用实际运行的地址和端口。

部署完成后，你可以通过服务器的域名访问你的Next.js静态HTML应用。

- 阅读更多 -

Go与JavaScript互操作：实现Go与JavaScript的混合编程

System

2024-08-10

所有,golang




package main
 
import (
    "syscall/js"
)
 
func main() {
    c := make(chan struct{}, 0)
 
    println := js.Global().Get("println")
 
    println.Invoke("Hello from Go!")
 
    js.Global().Set("goSayHello", js.NewCallback(func(args []js.Value) {
        println.Invoke("Hello from JavaScript!")
    }))
 
    <-c
}

这段代码演示了如何在Go程序中调用JavaScript全局函数println，并创建一个可以从JavaScript调用的Go函数goSayHello。这个简单的例子展示了Go和JavaScript代码如何通过GopherJS交互。

System

2024-08-10

所有,golang

报错解释：

这个错误表明你正在尝试使用Go语言的json包将一个JSON字符串解析到Go的结构体中，但是遇到了一个问题，那就是JSON字符串中的某个值并不匹配结构体中对应字段的数据类型。具体来说，你的结构体中的.tim字段可能是一个结构体类型，而JSON字符串中对应的值是一个字符串。

解决方法：

检查JSON数据，确保JSON中对应.tim字段的值的类型与Go结构体中的字段类型相匹配。
如果.tim字段是一个结构体，确保JSON中的字符串可以被正确地解析为该结构体。
如果.tim字段应该是一个字符串，确保JSON中的值也是一个字符串。

示例：

假设你的结构体定义如下：




type MyStruct struct {
    Tim time.Time `json:"tim"`
}

而你的JSON数据是这样的：




{
    "tim": "2021-01-01"
}

你需要确保JSON中的"2021-01-01"是一个有效的时间字符串，可以被time.Time类型正确解析。如果不是，你需要修改JSON数据或者结构体中的字段类型以确保匹配。如果JSON中的值不是一个时间字符串，你可能需要在Go结构体中为该字段使用适当的类型，或者在解析之前对JSON数据进行处理。

- 阅读更多 -

从零开始：Golang中JSON解析与生成的完全指南

System

2024-08-10

所有,golang




package main
 
import (
    "encoding/json"
    "fmt"
    "log"
)
 
// 定义一个结构体来表示一个用户
type User struct {
    ID   int
    Name string
    Age  int
}
 
func main() {
    // 解析JSON
    jsonStr := `{"ID":1,"Name":"张三","Age":30}`
    var user User
    err := json.Unmarshal([]byte(jsonStr), &user)
    if err != nil {
        log.Fatalf("JSON解析失败: %v", err)
    }
    fmt.Printf("解析后的用户: %+v\n", user)
 
    // 生成JSON
    user.ID = 2
    user.Name = "李四"
    user.Age = 25
    jsonBytes, err := json.Marshal(user)
    if err != nil {
        log.Fatalf("JSON生成失败: %v", err)
    }
    fmt.Printf("生成的JSON字符串: %s\n", jsonBytes)
}

这段代码首先定义了一个User结构体，用于表示用户信息。然后，它使用json.Unmarshal函数解析一个包含用户信息的JSON字符串，并打印解析后的结果。接着，它使用json.Marshal函数将User结构体的实例转换为JSON字符串并打印。这个过程展示了如何在Go语言中进行JSON的解析和生成。

- 阅读更多 -

html+css+js实现爱心表白树源码（分享）

System

2024-08-10

所有,html5

以下是一个简单的HTML和CSS代码示例，用于创建一个爱心表白树的静态版本。JavaScript代码将在后续解决方案中提供。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Love Tree</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #2c3e50;
  }
  .tree {
    position: relative;
    width: 150px;
    height: 200px;
    background: conic-gradient(#33cc99, #66ffff 10%, #66ffff 90%, #33cc99);
    border-radius: 50%;
    box-shadow: 0px 0px 20px rgba(0, 255, 0, 1);
  }
  .tree::before {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    background: conic-gradient(#33cc99, #66ffff 10%, #66ffff 90%, #33cc99);
    border-radius: 50%;
  }
  .tree::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    background: conic-gradient(#33cc99, #66ffff 10%, #66ffff 90%, #33cc99);
    border-radius: 50%;
  }
</style>
</head>
<body>
<div class="tree"></div>
</body>
</html>

这个示例展示了如何使用CSS创建一个简单的爱心树，你可以通过调整width、height、background等属性来自定义其尺寸和颜色。

JavaScript代码将用于添加动态特性，比如表白卡片的随机飘落，以及与树的互动。这部分将在后续的解决方案中提供。

- 阅读更多 -

JS特效第105弹：html5手机触摸滑动图片幻灯片轮播切换代码

System

2024-08-10

所有,html5

以下是一个简化版的HTML和JavaScript代码示例，用于创建一个简单的HTML5手机触摸滑动图片幻灯片轮播效果。




<!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 {
    overflow: hidden;
    position: relative;
  }
  .slider img {
    width: 100%;
    display: block;
  }
</style>
</head>
<body>
<div id="slider" class="slider">
  <img src="slide1.jpg" alt="Slide 1">
  <img src="slide2.jpg" alt="Slide 2">
  <img src="slide3.jpg" alt="Slide 3">
</div>
 
<script>
  let sliderImages = document.querySelectorAll('#slider img');
  let currentIndex = 0;
  let touchStart = 0;
 
  document.getElementById('slider').addEventListener('touchstart', function(e) {
    touchStart = e.changedTouches[0].clientX;
  });
 
  document.getElementById('slider').addEventListener('touchmove', function(e) {
    e.preventDefault();
  });
 
  document.getElementById('slider').addEventListener('touchend', function(e) {
    let touchEnd = e.changedTouches[0].clientX;
    if (touchEnd - touchStart > 100) { // 右滑
      changeSlide(-1);
    } else if (touchStart - touchEnd > 100) { // 左滑
      changeSlide(1);
    }
  });
 
  function changeSlide(direction) {
    let nextIndex = currentIndex + direction;
    if (nextIndex < 0) {
      nextIndex = sliderImages.length - 1;
    } else if (nextIndex >= sliderImages.length) {
      nextIndex = 0;
    }
    sli

- 阅读更多 -

Antv X6.js 内容居中相关问题

System

2024-08-10

所有,html5

在AntV X6中，要使得节点(Node)的内容居中，你可以通过自定义节点的布局(layout)方法来实现。以下是一个简单的例子，演示如何创建一个居中内容的节点：




import { Graph } from '@antv/x6'
 
// 自定义布局函数
function centerLayout(node) {
  const bbox = node.getBBox()
  node.translate((-bbox.width) / 2, (-bbox.height) / 2)
}
 
// 初始化图
const graph = new Graph({
  container: document.getElementById('container'),
  width: 800,
  height: 600,
  grid: true,
})
 
// 创建节点
const node = graph.addNode({
  x: 100,
  y: 80,
  width: 180,
  height: 30,
  attrs: {
    body: {
      fill: '#fff',
      stroke: '#000',
    },
    label: {
      text: '居中的内容',
      fontSize: 14,
      fill: '#333',
      pointerEvents: 'none', // 防止标签干扰节点的交互
    },
  },
  // 使用自定义布局函数
  layout: centerLayout,
})

在这个例子中，我们定义了一个centerLayout函数，它计算节点的边界框，并将节点的中心移动到原点，这样文本就能在节点中居中显示了。在创建节点时，通过layout属性将自定义的布局函数应用到节点上。这样每次节点的内容变化时，都会自动调用centerLayout函数来保证内容的居中。

- 阅读更多 -

EaselJS：HTML5的交互式2D图形引擎

System

2024-08-10

所有,html5

EaselJS是CreateJS套件中的一部分，它是一个用于HTML5 canvas元素的2D绘图引擎，可以用于创建和管理动画、用户交互和数据可视化。

以下是一个简单的EaselJS示例，它创建了一个简单的动画，通过点击来移动一个形状：




// 引入EaselJS库
import { Shape, Stage, Container } from "@createjs/easeljs";
 
// 获取canvas元素
const canvas = document.getElementById("myCanvas");
 
// 初始化舞台
const stage = new Stage(canvas);
 
// 创建一个容器
const container = new Container();
stage.addChild(container);
 
// 创建一个形状
const rect = new Shape();
rect.graphics.beginFill("Red").drawRect(0, 0, 100, 100);
 
// 设置形状的初始位置
rect.x = 50;
rect.y = 50;
 
// 将形状添加到容器
container.addChild(rect);
 
// 更新舞台
function tick(event) {
    stage.update(event);
}
 
// 监听点击事件来移动形状
function moveShape(event) {
    rect.x = event.stageX;
    rect.y = event.stageY;
}
 
// 注册事件监听
stage.addEventListener("stagemousedown", moveShape);
createjs.Ticker.on("tick", tick);

在这个例子中，我们首先引入了EaselJS的Shape、Stage和Container类。然后，我们获取了页面上的canvas元素，并初始化了一个舞台(stage)。接着，我们创建了一个容器(container)并将其添加到舞台上。我们创建了一个红色的矩形形状，并设置了其初始位置。

我们为容器注册了一个点击事件处理函数，当用户点击时，我们更新形状的位置。最后，我们设置了一个tick函数来更新舞台，并注册了createjs.Ticker的"tick"事件来周期性地调用tick函数。

这个简单的例子展示了如何使用EaselJS创建一个基本的交互式2D图形应用。

- 阅读更多 -

基于高德JSAPI的H5选址组件

System

2024-08-10

所有,html5

以下是一个基于高德JSAPI创建H5选址组件的示例代码：




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>H5选址组件示例</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德API密钥"></script>
</head>
<body>
    <div id="container" style="width:600px;height:400px;"></div>
    <script>
        // 初始化地图
        var map = new AMap.Map('container', {
            zoom: 11, // 缩放级别
            center: [116.397428, 39.90923] // 中心点坐标
        });
 
        // 创建地图选址组件
        var placeSearch = new AMap.PlaceSearch({
            map: map, // 指定搜索结果展示的地图
            panel: 'tipList' // 结果列表将展示在此容器中
        });
 
        // 搜索框的DOM元素
        var inp = document.createElement('input');
        inp.id = 'tipInput';
        inp.type = 'text';
        inp.placeholder = '请输入地点';
        map.plugins(['AMap.PlaceSearch'], function() {
            // 创建Autocomplete实例
            var autoOptions = {
                input: 'tipInput'
            };
            autocomplete = new AMap.Autocomplete(autoOptions);
 
            // 监听输入框的keydown事件
            AMap.event.addListener(autocomplete, 'select', function(e) {
                // 当选中某条记录时会触发
                placeSearch.search(e.poi.name);
            });
        });
 
        // 在地图上添加搜索输入框
        map.addControl(inp);
 
        // 为地图添加点击事件，获取点击位置的经纬度
        map.on('click', function(e) {
            var lnglat = e.lnglat;
            placeSearch.searchFromLocation(lnglat, '针对位置的搜索');
        });
    </script>
</body>
</html>

在这个示例中，我们首先引入了高德地图JSAPI，并初始化了一个地图实例。然后，我们创建了一个地图选址组件PlaceSearch，并将其绑定到地图上。我们还创建了一个搜索框，用户可以在其中输入地址来搜索，搜索结果会直接在地图上显示。最后，我们为地图添加了点击事件，当用户在地图上点击时，我们会使用点击位置的经纬度来进行搜索。

- 阅读更多 -