标签 Javascript 下的文章

2024-08-15

要实现一个textarea的自适应高度，可以通过CSS控制，也可以通过JavaScript来动态调整。以下是使用CSS实现的方法：




textarea {
  overflow: auto;
  resize: none;
  min-height: 20px; /* 设置最小高度 */
  max-height: 500px; /* 设置最大高度 */
}
 
textarea::-webkit-scrollbar {
  width: 12px;
}
 
textarea::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
 
textarea::-webkit-scrollbar-thumb {
  background-color: #888;
}
 
textarea::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

这段CSS代码为textarea添加了自动滚动条样式，并通过min-height和max-height限定了textarea的高度范围。

如果你需要使用JavaScript来实现自适应高度，可以使用Vue的指令来实现：




Vue.directive('auto-grow', {
  bind(el) {
    el.addEventListener('input', () => {
      let linesCount = (el.value.match(/\n/g) || '').length + 1;
      el.setAttribute('rows', linesCount);
      el.style.height = 'auto';
      let scrollHeight = el.scrollHeight;
      el.style.height = `${scrollHeight}px`;
    });
  }
});

在Vue模板中使用这个指令：




<textarea v-auto-grow></textarea>

这段JavaScript代码定义了一个Vue指令v-auto-grow，它会在textarea的值发生变化时，自动计算行数并设置textarea的高度。

- 阅读更多 -

js计算时间为刚刚、几分钟前、几小时前、几天前··_js计算几天前

System

2024-08-15

所有,javascript

要计算时间距离，可以创建一个函数，该函数接收一个日期，并返回一个描述该日期距离当前时间的字符串。以下是一个简单的JavaScript函数示例，用于计算并描述日期与当前时间的时间差：




function timeAgo(date) {
  const seconds = Math.max(0, Math.floor((new Date() - date) / 1000));
  if (seconds < 60) {
    return '刚刚';
  }
  const minutes = Math.floor(seconds / 60);
  if (minutes < 60) {
    return `${minutes} 分钟前`;
  }
  const hours = Math.floor(minutes / 60);
  if (hours < 24) {
    return `${hours} 小时前`;
  }
  const days = Math.floor(hours / 24);
  if (days < 30) {
    return `${days} 天前`;
  }
  const months = Math.floor(days / 30);
  if (months < 12) {
    return `${months} 月前`;
  }
  const years = Math.floor(months / 12);
  return `${years} 年前`;
}
 
// 使用示例
const date = new Date('2023-04-01T12:00:00Z'); // 示例日期
console.log(timeAgo(date)); // 输出时间距离字符串

这个函数首先计算从给定日期到当前时间的秒数，然后根据这个时间间隔来确定应该返回的字符串。如果时间间隔在一分钟内，则返回“刚刚”；如果在一小时内，则返回多少分钟前；如果在一天内，则返回多少小时前；超过一天，则返回多少天前，依此类推。这个函数可以根据需要扩展，以包括更多的时间单位（月、年等）。

- 阅读更多 -

OrgChart.js: 构建动态组织结构图的利器

System

2024-08-15

所有,javascript

OrgChart.js 是一个用于构建动态组织结构图的JavaScript库。以下是一个使用OrgChart.js创建简单组织结构图的示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>OrgChart.js 示例</title>
    <script src="https://cdn.orgchart.com/orgchart.latest.min.js"></script>
    <style>
        .orgchart {
            border: none;
        }
    </style>
</head>
<body>
    <div id="chart-container"></div>
    <script>
        // 定义组织结构数据
        var datasource = {
            'name': 'CEO',
            'title': '首席执行官',
            'children': [
                { 'name': 'CTO', 'title': '首席技术官', 'className': 'male' },
                { 'name': 'CFO', 'title': '首席财务官', 'className': 'female' },
                {
                    'name': 'CMO',
                    'title': '首席营销官',
                    'className': 'male',
                    'children': [
                        { 'name': 'Marketing', 'title': '市场部' },
                        { 'name': 'Advertising', 'title': '广告部' }
                    ]
                }
            ]
        };
 
        // 创建组织结构图
        var chart = new OrgChart(document.getElementById('chart-container'), {
            theme: 'modern',
            layout: 'tree',
            nodeBinding: {
                field_0: 'name',
                field_1: 'title',
                img_0: 'https://www.orgchart.com/images/female.png',
                img_1: 'https://www.orgchart.com/images/male.png'
            },
            nodeContent: '{{title}}',
            edges: {
                type: 'curve'
            },
            toolbar: {
                zoom: true,
                fit: true
            },
            template: 'rect',
            orientation: 'top',
            visibleLevel: 2
        });
 
        // 加载数据
        chart.load(datasource);
    </script>
</body>
</html>

这段代码定义了一个简单的组织结构，并使用OrgChart.js创建了一个图表，展示了CEO、CTO、CFO和CMO及其下属的结构。你可以根据需要调整 datasource 中的数据结构来创建更复杂的组织图。

System

2024-08-15

所有,javascript




# 导入webdriver
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
 
# 打开浏览器
driver = webdriver.Chrome()
 
# 打开网页
driver.get("http://www.example.com")
 
# 执行JavaScript脚本，滚动至页面底部
driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
 
# 或者，如果页面内容动态加载，可能需要等待元素可见再滚动
element = WebDriverWait(driver, 10).until(
    EC.visibility_of_element_located((By.ID, "footer"))
)
driver.execute_script("arguments[0].scrollIntoView(true);", element)
 
# 关闭浏览器
driver.quit()

这段代码展示了如何使用Selenium WebDriver在打开的网页中执行JavaScript代码来滚动至页面的特定元素或底部。其中execute_script方法用于直接在当前网页的浏览器环境中执行JavaScript代码。WebDriverWait与visibility_of_element_located结合用于等待元素加载完成再执行滚动操作。

System

2024-08-15

所有,javascript

报错解释：

这个错误表明在解析JSON字符串时，在第1个位置上预期应该有属性名称或者一个闭合的大括号 } ，但实际上并没有找到预期的字符。JSON格式错误，导致解析失败。

可能原因：

JSON字符串语法错误，缺少引号、逗号、冒号等。
JSON字符串不完整，缺少一个或多个大括号 }。
JSON字符串中有注释或其他非JSON字符。

解决方法：

检查JSON字符串的语法，确保所有的字符串都用双引号 " 包围，对象的属性名称也需要用引号包围，数组和对象的结尾都有一个大括号 }。
确保所有的逗号都正确使用，逗号前是属性值，逗号后是下一个属性名。
确保JSON字符串是完整的，开头和结尾都有一个大括号 { 和 }。
如果JSON字符串中包含注释或其他非JSON字符，需要将其移除。

示例：

错误的JSON字符串可能看起来像这样：




{"name":"John", "age":30 "city":"New York"}

正确的JSON字符串应该是：




{"name":"John", "age":30, "city":"New York"}

注意：在正确的JSON字符串中，属性名称和字符串值都用双引号 " 包围，并且最后一个属性后面不能有逗号。

System

2024-08-15

所有,javascript

申请高德地图Key的步骤：

访问高德开放平台官网（https://lbs.amap.com/）。
注册并登录账号。
进入控制台，选择“应用管理”。
创建新应用，获取所需的Web服务API、Web端、iOS端、Android端的Key。

封装map.js：




// 封装高德地图API调用
const amapKey = '你的高德地图key'; // 替换为你的高德地图Key
 
// 获取位置信息
function getLocation() {
  return new Promise((resolve, reject) => {
    uni.getLocation({
      type: 'wgs84',
      success: (res) => {
        resolve(res);
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
}
 
// 使用高德地图API进行逆向解析地址
function getAddress(latitude, longitude) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: `https://restapi.amap.com/v3/geocode/regeo?key=${amapKey}&location=${longitude},${latitude}`,
      success: (res) => {
        if (res.data && res.data.regeocode) {
          resolve(res.data.regeocode.formatted_address);
        } else {
          reject(new Error('无法获取地址信息'));
        }
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
}
 
export default {
  getLocation,
  getAddress
};

使用封装的map.js：




import map from './map.js';
 
async function getUserLocation() {
  try {
    const location = await map.getLocation();
    const address = await map.getAddress(location.latitude, location.longitude);
    console.log('用户位置：', address);
  } catch (error) {
    console.error('获取位置失败：', error.message);
  }
}
 
getUserLocation();

请确保在使用这些代码之前，你已经正确地将高德地图Key替换到amapKey变量中，并且已经处理好相关的权限问题，例如在Android和iOS平台上获取位置信息的权限。

- 阅读更多 -

Vue3和Plotly.js绘制交互式3D热力图

System

2024-08-15

所有,javascript




<template>
  <div ref="plotlyChart" style="height: 400px;"></div>
</template>
 
<script>
import { onMounted, ref } from 'vue';
import Plotly from '@/assets/js/plotly.min.js'; // 引入Plotly.js
 
export default {
  setup() {
    const plotlyChart = ref(null);
 
    onMounted(() => {
      const data = [
        {
          type: 'heatmap',
          x: ['A', 'B', 'C', 'D'],
          y: ['1', '2', '3', '4'],
          z: [[1, 20, 30, 50], [20, 1, 60, 80], [30, 60, 1, -10], [50, 80, -10, 1]],
          colorscale: [[0, 'rgb(223, 223, 223)'], [1, 'rgb(45, 45, 72)']],
          colorbar: {title: 'Intensity'},
        }
      ];
      const layout = {
        width: 400,
        height: 400,
        xaxis: {
          ticks: '',
          side: 'top'
        },
        yaxis: {
          ticks: '',
          ticksuffix: ' ',
          showticklabels: false
        },
        autosize: false
      };
 
      Plotly.newPlot(plotlyChart.value, data, layout, {displayModeBar: false});
    });
 
    return { plotlyChart };
  }
};
</script>

这段代码使用Vue3的Composition API和Plotly.js创建了一个简单的3D热力图。它首先引入了Plotly.js库，然后在setup函数中使用onMounted生命周期钩子来初始化Plotly图表。plotlyChart是一个响应式引用，指向用于渲染图表的DOM元素，在元素准备好后，会使用Plotly.js的newPlot函数来创建热力图。这个例子展示了如何在Vue3项目中集成Plotly.js进行数据可视化。

System

2024-08-15

所有,javascript

为了使用craco来配置React应用的路径别名（@ 路径），你需要按照以下步骤操作：

安装craco：




npm install @craco/craco

修改 package.json 中的 scripts，使用craco启动和构建命令：




"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  // ...其他脚本
}

在项目根目录下创建一个 craco.config.js 文件，并配置路径别名：




const path = require('path');
 
module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 假设你想要设置 'src' 目录的别名为 '@'
    },
  },
};

（可选）如果你想要配置 jsconfig.json 或 tsconfig.json 来提高编辑器中的智能感知性能，可以添加以下配置：

jsconfig.json 或 tsconfig.json（取决于你使用的是JavaScript还是TypeScript）:




{
  "compilerOptions": {
    "baseUrl": ".", // 设置基础目录为项目根目录
    "paths": {
      "@/*": ["src/*"] // 映射 'src' 目录下的任何文件可以通过 '@/*' 访问
    }
  }
}

请注意，如果你使用TypeScript，则可能需要额外的步骤来确保类型检查通过，因为TypeScript默认不识别craco和paths配置。这可能需要额外的类型定义文件或者其他TypeScript特定的配置。

- 阅读更多 -

JS实现深拷贝的4种方法

System

2024-08-15

所有,javascript

在JavaScript中，实现深度复制有多种方法。以下是四种常见的方法：

使用JSON.parse和JSON.stringify：




function deepClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}

递归复制：




function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }
 
    if (obj instanceof Date) {
        return new Date(obj.getTime());
    }
 
    if (obj instanceof Array) {
        return obj.reduce((arr, item, i) => {
            arr[i] = deepClone(item);
            return arr;
        }, []);
    }
 
    if (obj instanceof Object) {
        return Object.keys(obj).reduce((newObj, key) => {
            newObj[key] = deepClone(obj[key]);
            return newObj;
        }, {});
    }
}

使用lodash的cloneDeep方法：




const _ = require('lodash');
const clonedObj = _.cloneDeep(obj);

使用MessageChannel（适合大型数据结构）：




function deepClone(obj) {
    const { port1, port2 } = new MessageChannel();
    port2.onmessage = (e) => {
        port1.postMessage(e.data);
    };
    port1.postMessage(obj);
    return port2.getMessage();
}

这四种方法各有优缺点，选择哪种方法取决于具体场景和需求。

System

2024-08-15

所有,javascript

以下是一个简化的示例，展示了如何在Vue 3和Node.js中使用WebSocket和flv.js来实现监控RTSP流的功能。

前端 (Vue 3)

安装flv.js:




npm install flv.js

在Vue组件中使用flv.js播放FLV格式的视频流:




<template>
  <div>
    <video ref="videoElement" controls autoplay></video>
  </div>
</template>
 
<script>
import flvjs from 'flv.js';
 
export default {
  name: 'VideoPlayer',
  mounted() {
    if (flvjs.isSupported()) {
      const videoElement = this.$refs.videoElement;
      const flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: 'ws://your-node-server/ws/stream' // Node.js服务器WebSocket地址
      });
      flvPlayer.attachMediaElement(videoElement);
      flvPlayer.load();
      flvPlayer.play();
    }
  },
  beforeUnmount() {
    if (flvjs.isSupported()) {
      flvPlayer.pause();
      flvPlayer.unload();
      flvPlayer.detachMediaElement();
      flvPlayer.destroy();
    }
  }
};
</script>

后端 (Node.js with WebSocket)

安装必要的库:




npm install ws ffmpeg

使用WebSocket和ffmpeg处理RTSP流:




const WebSocket = require('ws');
const { spawn } = require('child_process');
 
const wsServer = new WebSocket.Server({ port: 8080 });
 
wsServer.on('connection', (ws) => {
  const ffmpeg = spawn('ffmpeg', [
    '-i', 'rtsp://your-rtsp-stream', // 替换为你的RTSP流地址
    '-c:v', 'copy',
    '-an',
    '-f', 'flv',
    'pipe:1'
  ]);
 
  ffmpeg.stdout.on('data', (data) => {
    ws.send(data);
  });
 
  ffmpeg.on('error', (error) => {
    console.error(error);
  });
 
  ws.on('close', () => {
    ffmpeg.kill('SIGKILL');
  });
});

确保替换rtsp://your-rtsp-stream为实际的RTSP流地址，并且在Node.js服务器端口8080上运行WebSocket服务。

以上代码实现了一个简单的示例，展示了如何使用flv.js在前端播放来自Node.js后端通过WebSocket和ffmpeg转换的RTSP流视频。这个示例假设你已经有了一个运行中的RTSP流，并且需要将其转换为FLV格式以便于Web浏览器的播放。

- 阅读更多 -