分类前端技术下的文章

2024-08-13

在JavaScript中，您可以使用Date对象来获取不同的日期。以下是获取昨天、今天和明天日期的方法：




// 获取昨天的日期
function getYesterday() {
    let today = new Date();
    let yesterday = new Date(today);
    yesterday.setDate(yesterday.getDate() - 1);
    return yesterday;
}
 
// 获取今天的日期
function getToday() {
    let today = new Date();
    return today;
}
 
// 获取明天的日期
function getTomorrow() {
    let today = new Date();
    let tomorrow = new Date(today);
    tomorrow.setDate(tomorrow.getDate() + 1);
    return tomorrow;
}
 
// 示例
console.log(getYesterday()); // 昨天的日期
console.log(getToday());     // 今天的日期
console.log(getTomorrow());  // 明天的日期

这些函数创建了一个新的Date对象表示当前日期，然后使用setDate()方法来修改日期值，以获取相应的日期。-1和+1分别用于获取昨天和明天的日期。

- 阅读更多 -

前端搭建砸地鼠游戏

System

2024-08-13

所有,javascript

创建一个简单的废地鼠游戏涉及以下步骤：

准备HTML和CSS文件。
使用JavaScript创建游戏逻辑。

以下是一个简单的废地鼠游戏的示例代码：

HTML (index.html):




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>废地鼠游戏</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="game">
    <div id="score">分数: <span>0</span></div>
    <canvas id="canvas" width="400" height="400"></canvas>
</div>
<script src="script.js"></script>
</body>
</html>

CSS (style.css):




#game {
    position: relative;
    width: 400px;
    height: 400px;
    background: #e0e0e0;
}
 
#score {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
}
 
#canvas {
    cursor: pointer;
}

JavaScript (script.js):




const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const scoreElement = document.querySelector('#score span');
 
let mouse = {x: 0, y: 0};
let mousedown = false;
let score = 0;
 
function updateMousePos(e) {
    mouse.x = e.offsetX;
    mouse.y = e.offsetY;
}
 
function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.beginPath();
    context.arc(mouse.x, mouse.y, 10, 0, Math.PI * 2);
    context.fillStyle = mousedown ? 'red' : 'green';
    context.fill();
}
 
function updateScore() {
    scoreElement.textContent = score;
}
 
canvas.addEventListener('mousedown', (e) => {
    mousedown = true;
    updateMousePos(e);
});
 
canvas.addEventListener('mousemove', (e) => {
    updateMousePos(e);
    draw();
});
 
canvas.addEventListener('mouseup', (e) => {
    mousedown = false;
    updateMousePos(e);
    score++;
    updateScore();
});
 
// 初始化画布大小
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
 
// 绘制鼠标指针
draw();

这个游戏的规则是简单的：用户通过点击并拖动鼠标来绘制一个小圆。当用户释放鼠标按钮时，分数会增加。游戏中没有物理体，只是一个用于教学的简单示例。在实际的废地鼠游戏中，会有鼠标追逐、撞击和逃逸等

- 阅读更多 -

【JS】js生成6位数的随机数

System

2024-08-13

所有,javascript

在JavaScript中，你可以使用Math.random()方法结合toString()和slice()方法来生成一个6位数的随机数。以下是一个生成6位数随机数的函数示例：




function generateRandomNumber(length) {
    // 生成一个指定长度的随机数
    const min = Math.pow(10, length - 1);
    const max = Math.pow(10, length) - 1;
    const randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
    return randomNum.toString().slice(0, length);
}
 
// 生成一个6位数的随机数
const randomNumber = generateRandomNumber(6);
console.log(randomNumber);

这个函数generateRandomNumber接受一个参数length，表示需要生成的随机数的长度。函数内部计算了随机数的最小值和最大值，然后生成一个介于两者之间的随机整数，并将其转换为字符串，最后通过slice()方法取字符串的前length位。

- 阅读更多 -

postman之接口参数签名（js接口HMAC-SHA256签名）

System

2024-08-13

所有,javascript




// 假设有一个函数用于生成时间戳
function getTimestamp() {
    return Math.floor(Date.now() / 1000).toString();
}
 
// 假设有一个函数用于生成随机数
function getNonce() {
    return Math.random().toString(36).substring(2, 15);
}
 
// 签名函数
function signRequest(params, secretKey) {
    // 参数按key正序排序
    const sortedParams = Object.keys(params).sort().reduce((obj, key) => {
        obj[key] = params[key];
        return obj;
    }, {});
 
    // 拼接请求字符串
    const stringToSign = sortedParams.access_key + sortedParams.nonce + sortedParams.timestamp + sortedParams.body;
 
    // 使用HMAC-SHA256进行签名
    const hmac = crypto.createHmac('sha256', secretKey);
    hmac.update(stringToSign);
    const signature = hmac.digest('hex');
 
    // 将签名添加到请求参数中
    sortedParams.sign = signature;
 
    return sortedParams;
}
 
// 使用示例
const secretKey = 'your_secret_key';
const accessKey = 'your_access_key';
const body = '{"key1":"value1","key2":"value2"}'; // 请求body的json字符串
 
const params = {
    'access_key': accessKey,
    'timestamp': getTimestamp(),
    'nonce': getNonce(),
    'body': body
};
 
const signedParams = signRequest(params, secretKey);
 
// 输出签名后的参数
console.log(signedParams);

这段代码展示了如何在Node.js环境中使用crypto模块来生成时间戳和随机数，并且如何对请求参数进行HMAC-SHA256签名。这是一个简化的例子，实际应用中可能需要更多的参数和复杂性。

- 阅读更多 -

js 获取时间戳的几种常用方法

System

2024-08-13

所有,javascript

在JavaScript中，获取当前时间戳的常用方法有以下几种：

使用 Date.now():




let timestamp = Date.now();

使用 new Date() 配合 getTime():




let date = new Date();
let timestamp = date.getTime();

使用 new Date() 配合 valueOf():




let date = new Date();
let timestamp = date.valueOf();

使用 Date.parse() 方法，但它返回的是毫秒级别的时间戳，需要除以1000来转换成秒级:




let timestamp = Date.parse(new Date()) / 1000;

使用 Date.UTC() 方法，它创建的是世界时间，通常用于获取标准时间戳:




let timestamp = Date.UTC(2023, 2, 15, 8, 30, 45); // 2023年3月15日 8时30分45秒

以上方法中，Date.now() 是最常用的方法，因为它简洁且直接返回了自1970年1月1日00:00:00 UTC以来经过的毫秒数。

- 阅读更多 -

Vue与Konva.js结合实现空间结构管理与标注图片数据多边形区域功能

System

2024-08-13

所有,javascript




<template>
  <v-stage ref="stage" :config="stageSize" @mousedown="handleMouseDown">
    <v-layer>
      <v-image :config="backgroundImageConfig"></v-image>
      <!-- 多边形图形 -->
      <v-group :config="groupConfig">
        <v-regular-polygon v-for="polygon in polygons" :key="polygon.id" :config="polygon.config">
        </v-regular-polygon>
      </v-group>
    </v-layer>
  </v-stage>
</template>
 
<script>
import { mapState } from 'vuex';
import { polygonsToConfig } from '@/utils/konvaUtils';
 
export default {
  data() {
    return {
      // 初始化舞台大小
      stageSize: {
        width: window.innerWidth,
        height: window.innerHeight
      },
      // 背景图片配置
      backgroundImageConfig: {
        image: this.image,
        width: this.image.width,
        height: this.image.height,
        draggable: false
      },
      // 多边形组配置
      groupConfig: {
        visible: true
      }
    };
  },
  computed: {
    ...mapState({
      polygons: state => state.polygons
    }),
    // 多边形配置数组
    polygonsConfig() {
      return polygonsToConfig(this.polygons);
    }
  },
  watch: {
    // 监听多边形数据变化，更新Konva.js层的多边形
    polygonsConfig: {
      handler(newConfig) {
        this.updatePolygons(newConfig);
      },
      deep: true
    }
  },
  methods: {
    // 更新多边形的配置
    updatePolygons(configs) {
      const layer = this.$refs.stage.getStage().findOne('Layer');
      configs.forEach(config => {
        const shape = layer.findOne('#' + config.id);
        shape.setAttrs(config);
      });
      layer.batchDraw();
    },
    handleMouseDown(e) {
      // 鼠标按下事件处理逻辑
    }
  }
};
</script>

在这个代码实例中，我们使用Vue和Konva.js创建了一个可以管理和标注图片上多边形区域的应用。我们定义了舞台（v-stage）和层（v-layer），在层中放置了背景图片（v-image）和多边形组（v-group）。多边形数据通过计算属性与Konva.js的图形进行绑定，并且使用watch来监听多边形数据的变化，从而动态更新Konva.js的多边形配置。这个例子展示了如何在Vue应用中结合使用Konva.js来实现复杂的交互式图形界面。

- 阅读更多 -

JS判断对象的类型的几种方法

System

2024-08-13

所有,javascript

在JavaScript中，判断一个对象的类型有几种常用方法：

typeof 操作符：适用于基本数据类型（例如：string, number, boolean）的判断。




let str = "Hello";
console.log(typeof str); // 输出: string

instanceof 操作符：用于判断引用类型（例如：对象、数组、函数等）的实例。




let arr = [];
console.log(arr instanceof Array); // 输出: true

constructor 属性：可以获取对象的构造函数，适用于判断未使用 instanceof 的引用类型。




let num = new Number(123);
console.log(num.constructor === Number); // 输出: true

Object.prototype.toString 方法：可以获取对象的精确类型。




let und;
console.log(Object.prototype.toString.call(und)); // 输出: [object Undefined]

typeof 与 instanceof 结合使用：针对可能是 null 的引用类型判断。




let nll = null;
console.log(nll instanceof Object); // 输出: false
console.log(typeof nll); // 输出: object

以上方法可以根据实际需求选择使用。通常，对于不确定变量类型的情况下，推荐使用 Object.prototype.toString 方法，因为它提供了详细的类型信息。

- 阅读更多 -

js 添加、删除DOM元素

System

2024-08-13

所有,javascript

在JavaScript中，您可以使用document对象的方法来添加或删除DOM元素。以下是添加和删除元素的基本示例：

添加元素：




// 创建新元素
var newElement = document.createElement('div');
newElement.innerHTML = '这是新添加的元素。';
 
// 找到要添加新元素的父元素
var parentElement = document.getElementById('parent');
 
// 将新元素添加到父元素中
parentElement.appendChild(newElement);

删除元素：




// 找到要删除的元素
var elementToRemove = document.getElementById('elementToRemove');
 
// 找到其父元素
var parent = elementToRemove.parentNode;
 
// 从DOM中移除该元素
parent.removeChild(elementToRemove);

请根据实际情况选择合适的方法添加或删除元素。

- 阅读更多 -

JS中页面跳转的几种方法

System

2024-08-13

所有,javascript

在JavaScript中，页面跳转主要有以下几种方法：

使用window.location.href：




window.location.href = 'https://www.example.com';

使用window.location.assign：




window.location.assign('https://www.example.com');

使用window.location.replace（此方法不会在历史记录中生成新记录）：




window.location.replace('https://www.example.com');

使用window.location.reload（重新加载当前页面）：




window.location.reload();

使用window.open（在新窗口/标签页中打开链接）：




window.open('https://www.example.com');

使用window.location.assign与setTimeout（在跳转前执行某些操作，如数据清理）：




setTimeout(function() {
  window.location.assign('https://www.example.com');
}, 1000); // 延迟1秒跳转

以上每种方法都有其适用的场景，例如，当你需要用户在当前页面停留一段时间后跳转，或者需要在新窗口打开链接等。

System

2024-08-13

所有,javascript

在JavaScript中，可以使用以下几种方法来跳出循环：

return：在函数中使用return可以提前退出函数，但如果在循环体内部使用，则可以跳出循环。




function loopWithReturn() {
  for (let i = 0; i < 10; i++) {
    if (i === 5) {
      return; // 当i等于5时，提前退出函数（循环）
    }
    console.log(i);
  }
}

break：在循环体内部使用break可以直接跳出当前循环。




for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // 当i等于5时，跳出循环
  }
  console.log(i);
}

continue：在循环体内部使用continue可以跳过当前循环的剩余部分，并继续下一次循环。




for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) {
    continue; // 当i为偶数时，跳过当前循环的剩余部分
  }
  console.log(i); // 只会在i为奇数时执行
}

throw：虽然throw通常用于抛出异常，但它也可以用来终止循环。




try {
  for (let i = 0; i < 10; i++) {
    if (i === 5) {
      throw 'Loop terminated'; // 当i等于5时，抛出异常，并跳出循环
    }
    console.log(i);
  }
} catch (error) {
  console.error(error); // 打印：'Loop terminated'
}

以上方法可以在for、while和do...while循环中使用，并且它们都可以用来立即退出循环。选择哪种方法取决于具体情况，但通常break是最直接的选择，除非你需要在函数中提前返回或者需要异常处理的情况下跳出循环。

- 阅读更多 -