1. 首页
  2. 分类
  3. 前端技术
JS判断当前日期为当月的第几周和当年的第几周，web中文开发
System
2024-08-18
所有,javascript

在JavaScript中，您可以使用Date对象的方法来判断当前日期是当月的第几周，以及当前日期是当年的第几周。以下是实现这两个功能的代码示例：




// 获取当前日期
const today = new Date();
 
// 获取当月第一天是周几
const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
const firstDayOfWeek = firstDayOfMonth.getDay() || 7; // 如果是周日，则返回7
 
// 获取当前日期是周几
const todayDayOfWeek = today.getDay() || 7; // 如果是周日，则返回7
 
// 当前日期是当月的第几周
const weekOfMonth = Math.ceil((today.getDate() - (firstDayOfWeek - 1)) / 7);
 
// 当前日期是当年的第几周
const yearStart = new Date(today.getFullYear(), 0, 1); // 当年的第一天
const firstDayOfYear = yearStart.getDay() || 7; // 当年第一天是周日则返回7
const dayOfYearStart = yearStart.getDate(); // 当年第一天是几号
const daysSinceNewYear = (today.getTime() - yearStart.getTime()) / (1000 * 60 * 60 * 24);
const weekOfYear = Math.ceil((daysSinceNewYear + firstDayOfYear - dayOfYearStart) / 7);
 
console.log(`当前日期是当月的第 ${weekOfMonth} 周`);
console.log(`当前日期是当年的第 ${weekOfYear} 周`);

这段代码首先获取当前日期，然后计算当月和当年的第一天，并确定当前日期是周几。接着，它使用这些信息来计算当前日期是当月的第几周以及当年的第几周。最后，它输出结果。

- 阅读更多 -
JavaScript 日期和时间的格式化大汇总（收集）
System
2024-08-18
所有,javascript



// 使用Intl.DateTimeFormat进行本地化格式化日期和时间
function formatDateTimeLocalized(date, options = { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' }) {
    const formatter = new Intl.DateTimeFormat('zh-CN', options); // 中文简体地区和选项
    return formatter.format(date);
}
 
// 格式化日期和时间为YYYY-MM-DD HH:mm:ss格式
function formatDateTime(date) {
    function padZero(num) {
        return num < 10 ? '0' + num : num;
    }
    return (
        date.getFullYear() + '-' +
        padZero(date.getMonth() + 1) + '-' +
        padZero(date.getDate()) + ' ' +
        padZero(date.getHours()) + ':' +
        padZero(date.getMinutes()) + ':' +
        padZero(date.getSeconds())
    );
}
 
// 使用moment.js库格式化日期和时间
function formatDateTimeMoment(date) {
    return moment(date).format('YYYY-MM-DD HH:mm:ss'); // 使用moment.js格式化
}
 
// 使用Date对象原生方法格式化日期
function formatDate(date) {
    return date.toDateString(); // 将日期转换为星期、月、日、年的简短字符串
}
 
// 使用Date对象原生方法格式化时间
function formatTime(date) {
    return date.toLocaleTimeString(); // 将时间转换为本地时间字符串
}
 
// 使用Date对象原生方法格式化时间为HH:mm:ss格式
function formatTimeShort(date) {
    return (
        padZero(date.getHours()) + ':' +
        padZero(date.getMinutes()) + ':' +
        padZero(date.getSeconds())
    );
}
 
// 示例
const now = new Date();
console.log(formatDateTime(now)); // 输出: YYYY-MM-DD HH:mm:ss
console.log(formatDateTimeLocalized(now)); // 输出: 本地化格式化的日期和时间字符串
console.log(formatDate(now)); // 输出: 星期、月、日、年的简短字符串
console.log(formatTime(now)); // 输出: 本地时间字符串
console.log(formatTimeShort(now)); // 输出: HH:mm:ss

在这个代码示例中，我们提供了几种不同的方法来格式化日期和时间。其中，formatDateTime 使用自定义函数来格式化日期为 "YYYY-MM-DD HH:mm:ss" 格式，formatDateTimeLocalized 使用 Intl.DateTimeFormat 来进行本地化格式化，formatDate 和 formatTime 分别使用 Date 对象的方法来格式化日期和时间。如果需要使用库（如moment.js），我们也提供了formatDateTimeMoment函数作为示例。

- 阅读更多 -
使用web3.js连接solidity合约
System
2024-08-18
所有,javascript

要使用web3.js连接Solidity合约，你需要知道以下信息：

  1. 合约的ABI（应用二进制接口）。
  2. 合约部署的网络URL（例如，Infura、Alchemy、Cloudflare等）。
  3. 合约部署的地址。

以下是一个简单的JavaScript示例，展示了如何使用web3.js连接到Solidity合约：




const Web3 = require('web3');
 
// 替换为你的Infura网络URL和合约地址
const INFURA_URL = 'https://mainnet.infura.io/v3/YOUR_INFURA_PROJECT_ID';
const CONTRACT_ADDRESS = '0xYourContractAddress';
 
// 替换为你的合约ABI
const ABI = [
  {
    "inputs": [],
    "name": "name",
    "outputs": [
      {
        "internalType": "string",
        "name": "",
        "type": "string"
      }
    ],
    "stateMutability": "view",
    "type": "function"
    // ... 其他函数和结构
  }
];
 
// 初始化Web3提供者
const web3 = new Web3(new Web3.providers.HttpProvider(INFURA_URL));
 
// 创建合约实例
const contract = new web3.eth.Contract(ABI, CONTRACT_ADDRESS);
 
// 调用合约的一个函数，例如 'name'
contract.methods.name().call().then(name => {
  console.log('Contract name:', name);
}).catch(error => {
  console.error('Error fetching contract data:', error);
});

确保将INFURA_URL、CONTRACT_ADDRESS和ABI数组替换为你自己的信息。这段代码将连接到指定的以太坊网络，并调用合约中的name函数。你可以根据需要调用合约中的其他函数。

- 阅读更多 -
【JS】滑动验证实现
System
2024-08-18
所有,javascript

以下是一个简单的滑动验证实现示例，使用了HTML5的<canvas>元素来绘制验证图片，并用JavaScript来处理验证逻辑。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑动验证示例</title>
<style>
    #captcha {
        width: 300px;
        height: 100px;
        border: 1px solid #ccc;
        margin: 20px 0;
        position: relative;
        cursor: pointer;
    }
    #captchaCanvas {
        position: absolute;
        top: 0;
        left: 0;
    }
    #refresh {
        position: absolute;
        top: 40px;
        right: 20px;
        cursor: pointer;
    }
</style>
</head>
<body>
<div id="captcha">
    <canvas id="captchaCanvas"></canvas>
    <span id="refresh">刷新</span>
</div>
 
<script>
    const captcha = document.getElementById('captcha');
    const canvas = document.getElementById('captchaCanvas');
    const ctx = canvas.getContext('2d');
    let offset = 0;
 
    // 生成验证码
    function generateCaptcha() {
        let code = '';
        const codeLength = 4; // 验证码长度
        const random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
        for (let i = 0; i < codeLength; i++) {
            code += random(0, 9); // 生成随机数字
        }
        return code;
    }
 
    // 绘制背景噪声线条
    function drawNoise() {
        for (let i = 0; i < 5; i++) {
            ctx.beginPath();
            ctx.moveTo(random(0, 300), random(0, 100));
            ctx.lineTo(random(0, 300), random(0, 100));
            ctx.strokeStyle = randomColor();
            ctx.stroke();
        }
    }
 
    // 生成随机颜色
    function randomColor() {
        return `rgb(${random(0, 255)},${random(0, 255)},${random(0, 255)})`;
    }
 
    // 初始化验证码
    function init() {
        const code = generateCaptcha();
        canvas.width = 300;
        canvas.height = 100;
        ctx.font = '40px Arial';
        ctx.fillStyle = randomColor();
        ctx.fillText(code, 20, 50);
        drawNoise();
        captcha.addEventListener('mousedown', (e) => {
            offset = e.clientX - captcha.offsetLeft;
            document.addEventListener('mousemove', move);
            document.addEventListener('mouseup', up);
        });
    }
 
    // 拖动时更新位置
    function move(e) {
        if (captcha.offsetLeft + captcha.offsetWidth - e.clientX <= 0) {
            captcha.style.left = e.clientX - offset + 'px';
        }
    }
 
    // 拖动结束
    function up() {
        document.removeEventListener(
- 阅读更多 -
JS树形数据常用递归方法总结
System
2024-08-18
所有,javascript



// 定义一个树形结构的函数
function Tree() {
  const nodes = new Map();
 
  // 添加节点
  this.add = function(parent, id) {
    nodes.set(id, { parent, children: new Set() });
  };
 
  // 移除节点
  this.remove = function(id) {
    nodes.delete(id);
    // 还需要从其父节点的children中移除
  };
 
  // 获取所有子孙节点
  this.getSubtree = function(id) {
    const subtree = new Set([id]);
    const dfs = (nodeId) => {
      nodes.get(nodeId).children.forEach(child => {
        subtree.add(child);
        dfs(child);
      });
    };
    nodes.get(id).children.forEach(dfs);
    return subtree;
  };
 
  // 获取所有祖先节点
  this.getAncestors = function(id) {
    const ancestors = new Set();
    let node = nodes.get(id);
    while (node.parent) {
      ancestors.add(node.parent);
      node = nodes.get(node.parent);
    }
    return ancestors;
  };
 
  // 检查是否为叶子节点
  this.isLeaf = function(id) {
    return nodes.get(id).children.size === 0;
  };
 
  // 检查是否为根节点
  this.isRoot = function(id) {
    return !nodes.get(id).parent;
  };
 
  // 获取树的深度
  this.getDepth = function() {
    let depth = 0;
    // 需要遍历所有节点并更新depth
    return depth;
  };
}
 
// 使用示例
const tree = new Tree();
tree.add(null, 'A');
tree.add('A', 'B');
tree.add('A', 'C');
tree.add('B', 'D');
tree.add('B', 'E');
tree.add('C', 'F');
 
console.log(tree.getSubtree('A')); // 输出节点A的所有子孙节点
console.log(tree.getAncestors('D')); // 输出节点D的所有祖先节点
console.log(tree.isLeaf('B')); // 输出节点B是否为叶子节点
console.log(tree.isRoot('D')); // 输出节点D是否为根节点
// 注意: 需要实现getDepth方法来获取树的深度

这个代码示例展示了如何实现一个简单的树形数据结构，并提供了几个常用的递归方法，如获取子孙节点、祖先节点，检查叶子和根节点，以及计算树的深度。需要注意的是，示例中的getDepth方法尚未实现，因为它需要遍历所有节点并更新最大深度。

- 阅读更多 -
JS常用正则校验大全
System
2024-08-18
所有,javascript



// 用于验证邮箱的正则表达式
function validateEmail(email) {
  const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
  return emailRegex.test(email);
}
 
// 用于验证URL的正则表达式
function validateURL(url) {
  const urlRegex = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
  return urlRegex.test(url);
}
 
// 用于验证电话号码（仅限数字和可选的连字符）的正则表达式
function validatePhoneNumber(phoneNumber) {
  const phoneNumberRegex = /^\d{3}-\d{3}-\d{4}$/; // 假设电话号码格式为 XXX-XXX-XXXX
  return phoneNumberRegex.test(phoneNumber);
}
 
// 用于验证社会安全号码（SSN）的正则表达式
function validateSSN(ssn) {
  const ssnRegex = /^\d{3}-\d{2}-\d{4}$/; // 假设SSN格式为 XXX-XX-XXXX
  return ssnRegex.test(ssn);
}
 
// 用于验证信用卡号码的正则表达式
function validateCreditCard(creditCard) {
  const creditCardRegex = /^\d{16}$/; // 假设信用卡号码是一个16位的数字字符串
  return creditCardRegex.test(creditCard);
}
 
// 用于验证密码强度的正则表达式
function validatePassword(password) {
  const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&]).{8,}$/; // 至少8个字符，包含大写字母，小写字母，数字，特殊字符
  return passwordRegex.test(password);
}
 
// 示例使用
console.log(validateEmail('example@test.com')); // true
console.log(validateURL('https://www.example.com')); // true
console.log(validatePhoneNumber('123-456-7890')); // true
console.log(validateSSN('123-45-6789')); // true
console.log(validateCreditCard('1234567890123456')); // true
console.log(validatePassword('Example1!')); // true

这段代码提供了验证邮箱、URL、电话号码、社会安全号码、信用卡号码和密码强度的正则表达式函数。每个函数都接收输入作为参数，并返回一个布尔值，表示输入是否符合相应的正则表达式规则。这些正则表达式提供了基本的验证功能，并假设了一些常见的格式。在实际应用中，你可能需要根据具体需求调整正则表达式。

- 阅读更多 -
uni-app: onBackPress() 监听页面返回 - 更新数据
System
2024-08-18
所有,javascript

在uni-app中，可以使用onBackPress事件来监听页面返回操作，并在返回时更新数据。以下是一个简单的示例：




export default {
  data() {
    return {
      // 假设有一个数据需要更新
      count: 0
    };
  },
  onBackPress(options) {
    if (options.from === 'navigateBack') {
      // 当前页面是通过返回按钮进入
      this.updateData(); // 调用更新数据的方法
      return true; // 返回true，不再继续执行其他返回行为
    }
    return false; // 返回false，继续执行默认的返回行为
  },
  methods: {
    updateData() {
      // 更新数据的逻辑
      this.count++;
    }
  }
};

在这个示例中，onBackPress方法会在用户点击返回按钮时触发。如果返回操作来自navigateBack（即用户点击导航栏返回按钮），则会调用updateData方法来更新数据，并返回true以阻止其他默认行为。如果不是通过返回按钮操作返回的，则返回false，以便继续正常的返回流程。

- 阅读更多 -
js查找数组中符合条件的元素
System
2024-08-18
所有,javascript

问题描述不够具体，以下给出两个常见的js查找数组中符合条件的元素的实现方法：

方法一：使用循环遍历数组，逐个判断元素是否符合条件，然后将符合条件的元素存入一个新数组中。




function filterArray(arr, condition) {
   const result = [];
   for (let i = 0; i < arr.length; i++) {
      if (condition(arr[i])) {
         result.push(arr[i]);
      }
   }
   return result;
}

使用示例：




const arr = [1, 2, 3, 4, 5];
const condition = (num) => num % 2 === 0;
console.log(filterArray(arr, condition)); // 输出：[2, 4]

方法二：使用Array的filter方法，该方法接收一个函数作为参数，在函数内判断元素是否符合条件，返回一个新数组，其中包含符合条件的元素。




function filterArray(arr, condition) {
   return arr.filter(condition);
}

使用示例：




const arr = [1, 2, 3, 4, 5];
const condition = (num) => num % 2 === 0;
console.log(filterArray(arr, condition)); // 输出：[2, 4]

以上两种方法都可以用来查找数组中符合条件的元素，方法一使用了循环遍历和手动判断的方式，方法二使用了Array的filter方法来实现。具体使用哪种方法取决于具体的需求和代码风格。

- 阅读更多 -
js实现鼠标拖拽多选功能
System
2024-08-18
所有,javascript

在JavaScript中实现一个基本的鼠标拖拽多选功能，可以通过监听鼠标事件来完成。以下是一个简单的实现示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag Select</title>
<style>
  .select-area {
    width: 400px;
    height: 200px;
    position: relative;
    border: 1px solid #000;
  }
  .select-box {
    background: rgba(0, 0, 255, 0.3);
    position: absolute;
    border: 1px dashed #000;
    pointer-events: none;
  }
  .item {
    width: 100px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #000;
    margin: 10px;
  }
</style>
</head>
<body>
 
<div class="select-area">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <!-- More items here -->
</div>
 
<script>
  const selectArea = document.querySelector('.select-area');
  let startX, startY, isDragging = false;
 
  selectArea.addEventListener('mousedown', function(e) {
    startX = e.pageX - this.offsetLeft;
    startY = e.pageY - this.offsetTop;
    isDragging = true;
    const selectBox = document.createElement('div');
    selectBox.classList.add('select-box');
    selectArea.appendChild(selectBox);
  });
 
  selectArea.addEventListener('mousemove', function(e) {
    if (isDragging) {
      const selectBox = this.querySelector('.select-box');
      const x = Math.min(e.pageX - this.offsetLeft, startX);
      const y = Math.min(e.pageY - this.offsetTop, startY);
      const width = Math.abs(e.pageX - this.offsetLeft - startX);
      const height = Math.abs(e.pageY - this.offsetTop - startY);
      selectBox.style.left = `${x}px`;
      selectBox.style.top = `${y}px`;
      selectBox.style.width = `${width}px`;
      selectBox.style.height = `${height}px`;
 
      // 选中交集中的所有项
      const items = this.querySelectorAll('.item');
      items.forEach(item => {
        const itemRect = item.getBoundingClientRect();
        if (x < itemRect.left && itemRect.left < x + width
          && y < itemRect.top && itemRect.top < y + height) {
          item.classList.add('selected'); // 添加自定义的selected类来标记选中
        } else {
          item.classList.remove('selected');
        }
      });
    }
  });
 
  selectArea.addEventListener('mouseup', function() {
    isDragging = false;
    const selectBox = this.querySelector('.select-box');
    if (selectBox) {
      selectArea.removeChild(selectBox);
    }
  });
</script>
 
</body>
</html>

在这个例子中，当

- 阅读更多 -
js中获取元素的方法（document和getElementById）
System
2024-08-18
所有,javascript

在JavaScript中，要获取HTML元素，通常使用document.getElementById方法，它可以通过元素的ID获取特定的元素。

示例代码：




// 假设有一个HTML元素如下：
// <div id="myElement">这是一个元素</div>
 
// 使用JavaScript获取这个元素
var element = document.getElementById('myElement');
 
// 现在你可以对这个元素进行操作，比如改变它的内容
if (element) {
    element.textContent = '元素已被获取并修改';
}

在这个例子中，document.getElementById('myElement')会返回一个对应ID为myElement的DOM元素的引用，然后你可以对这个元素进行操作。如果元素不存在，则返回null。

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