1. 首页
  2. 分类
  3. javascript
一篇文章讲清楚html css js三件套之html
System
2024-08-15
所有,javascript

HTML、CSS和JavaScript构成了现代网页的三大支柱，它们分别代表网页的结构、表现和行为。下面是一个简单的HTML示例，演示了如何创建一个基本的网页结构。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例网页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        header, footer {
            background-color: #eee;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <header>
        <h1>我的网站</h1>
    </header>
    <main>
        <h2>网页内容</h2>
        <p>这里是网页的主要内容。</p>
    </main>
    <footer>
        <p>版权所有 © 2023 我的网站</p>
    </footer>
</body>
</html>

这个HTML示例展示了如何创建一个包含头部(header)、主体(main)和尾部(footer)的基本网页结构。同时，我们也包含了一个简单的内部CSS样式表来为网页元素添加样式。这个示例旨在教授初学者如何开始构建自己的网页，并展示了HTML和CSS是如何协同工作的。

- 阅读更多 -
js 数据格式相互转换,ArrayBufer转字符串,字符串转ArrayBufer,ArrayBuffer转hex,hex转字符串
System
2024-08-15
所有,javascript



// ArrayBuffer转字符串
function ab2str(buf) {
  return new TextDecoder().decode(buf);
}
 
// 字符串转ArrayBuffer
function str2ab(str) {
  return new TextEncoder().encode(str);
}
 
// ArrayBuffer转十六进制字符串
function ab2hex(buf) {
  return Array.prototype.map.call(new Uint8Array(buf), x => ('00' + x.toString(16)).slice(-2)).join('');
}
 
// 十六进制字符串转ArrayBuffer
function hex2ab(hexString) {
  if (!hexString.match(/^[0-9a-fA-F]+$/)) {
    throw new Error('The input string is not a valid hex string');
  }
  var bytes = new Uint8Array(hexString.length / 2);
  for (var i = 0; i < bytes.length; i++) {
    bytes[i] = parseInt(hexString.substr(i * 2, 2), 16);
  }
  return bytes.buffer;
}
 
// 示例使用
var str = "Hello, ArrayBuffer!";
var buffer = str2ab(str);
var hexStr = ab2hex(buffer);
var bufferFromHex = hex2ab(hexStr);
var strFromBuffer = ab2str(bufferFromHex);
 
console.log(strFromBuffer === str); // true

以上代码提供了ArrayBuffer与字符串之间相互转换的函数，以及ArrayBuffer与十六进制字符串之间转换的函数。这些函数可以用于处理需要在ArrayBuffer和其他数据格式之间转换的场景。

- 阅读更多 -
js判断一个链接是图片还是视频
System
2024-08-15
所有,javascript

方法一：

可以通过链接的后缀名来判断一个链接是图片还是视频。通常情况下，图片的后缀名是如.jpg、.png、.gif等，视频的后缀名则是如.mp4、.mov、.avi等。因此，可以编写以下代码来实现判断：




function checkMediaType(url) {
  const imageExtensions = ['.jpg', '.png', '.gif']; // 图片的后缀名
  const videoExtensions = ['.mp4', '.mov', '.avi']; // 视频的后缀名
 
  const extension = url.slice(url.lastIndexOf('.')); // 截取链接中的后缀名
  if (imageExtensions.includes(extension)) {
    return '图片';
  } else if (videoExtensions.includes(extension)) {
    return '视频';
  } else {
    return '未知类型';
  }
}

方法二：

除了根据后缀名判断，还可以通过链接的路径来判断一个链接是图片还是视频。通常情况下，图片的路径中可能包含如"image"、"photo"等词汇，而视频的路径中可能包含如"video"、"movie"等词汇。可以编写以下代码来实现判断：




function checkMediaType(url) {
  const imagePathKeywords = ['image', 'photo']; // 图片的路径关键词
  const videoPathKeywords = ['video', 'movie']; // 视频的路径关键词
 
  const lowercasedUrl = url.toLowerCase(); // 将链接转换为小写以便比较
  if (imagePathKeywords.some(keyword => lowercasedUrl.includes(keyword))) {
    return '图片';
  } else if (videoPathKeywords.some(keyword => lowercasedUrl.includes(keyword))) {
    return '视频';
  } else {
    return '未知类型';
  }
}

这两种方法都可以根据链接的后缀名或路径来判断链接的类型，根据实际需求选择适合的方法即可。

- 阅读更多 -
一文搞定nuxt.js搭建到部署（ssr和静态部署）
System
2024-08-15
所有,javascript

在这个解决方案中，我们将使用Nuxt.js框架来创建一个简单的应用程序，并展示如何将其部署为SSR (Server-Side Rendering) 和 Static Site Generation (SSG)。

  1. 创建一个新的Nuxt.js项目:



npx create-nuxt-app my-nuxt-app
  1. 进入项目文件夹并运行开发服务器:



cd my-nuxt-app
npm run dev
  1. 部署为SSR:

Nuxt.js可以部署在任何Node.js环境中，比如使用PM2:




npm install pm2 -g
pm2 start npm --name "my-nuxt-app" -- run start

或者使用Docker:




FROM node:14
 
WORKDIR /app
COPY . /app
 
RUN npm install
 
EXPOSE 3000
CMD ["npm", "start"]

然后构建并运行Docker容器:




docker build -t my-nuxt-app .
docker run -p 3000:3000 my-nuxt-app
  1. 部署为SSG:

首先，确保在nuxt.config.js中将生成配置设置为static:




export default {
  target: 'static'
  // 其他配置...
}

然后构建静态文件:




npm run generate

最后，部署构建的静态文件到任何静态文件托管服务，如Netlify或Vercel:




npm install netlify-cli -g
netlify deploy

或者使用Github Actions进行自动化部署。

以上是部署Nuxt.js应用程序的基本步骤，具体部署时可能需要根据实际情况进行调整。

- 阅读更多 -
android webview与js交互(动态添加js)，最详细的解释小白也能听懂
System
2024-08-15
所有,javascript

在Android中，要实现WebView与JavaScript的交互，你可以使用WebView的addJavascriptInterface方法来添加Java对象作为JavaScript的接口，或者使用evaluateJavascript方法来执行JavaScript代码。

以下是一个简单的例子，展示如何在WebView中动态添加JavaScript代码：




// 1. 创建你的WebView
WebView webView = (WebView) findViewById(R.id.webview);
 
// 2. 启用JavaScript
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
 
// 3. 设置WebViewClient，以确保页面加载完成后执行JavaScript
webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
 
        // 4. 动态添加JavaScript代码
        String jsCode = "javascript:(function() { document.getElementById('yourElementId').innerHTML = 'Hello from JavaScript!'; })();";
        webView.evaluateJavascript(jsCode, null);
    }
});
 
// 5. 加载页面
webView.loadUrl("file:///android_asset/your_page.html");

在这个例子中，我们首先启用了WebView的JavaScript功能，然后在页面加载完成后，使用evaluateJavascript方法来执行一段修改页面元素内容的JavaScript代码。

请注意，在实际应用中，动态添加的JavaScript代码应该是经过安全性检查和合适的封装的，避免注入潜在的安全风险。

- 阅读更多 -
echarts地图自定义label属性以及引入china.js
System
2024-08-15
所有,javascript

在ECharts中自定义地图的标签（label）属性，并且引入中国地图的示例代码如下：




// 引入ECharts主模块
var echarts = require('echarts/lib/echarts');
// 引入地图
require('echarts/lib/chart/map');
 
// 引入中国地图数据
var chinaMapData = require('echarts/map/js/china');
 
// 注册中国地图
echarts.registerMap('china', chinaMapData);
 
// 初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'));
 
// 自定义标签样式
var labelOptions = {
    normal: {
        show: true,
        textStyle: {
            color: 'red',
            fontSize: 12
        }
    }
};
 
// 配置项
var option = {
    series: [
        {
            type: 'map',
            map: 'china', // 设置使用的地图
            label: labelOptions, // 应用自定义标签样式
            // 其他配置...
        }
    ]
};
 
// 设置ECharts实例的配置项
myChart.setOption(option);

确保你的项目中已经安装了echarts依赖，并且有一个HTML元素（例如一个div）的id为main来承载ECharts实例。

注意：以上代码示例是基于ECharts 4.x及以上版本的语法。如果你使用的是ECharts 5.x版本，可能需要稍微调整代码，因为ECharts 5.x在模块系统和API上有较大变化。

- 阅读更多 -
Turn.js - 一个优雅的3D翻书效果库
System
2024-08-15
所有,javascript

Turn.js 是一个用来创建类似翻书效果的 jQuery 插件，它可以让你创建类似 iBooks 或 Amazon Kindle 的翻页动画。

以下是一个使用 Turn.js 创建简单翻页效果的示例代码：

  1. 首先，确保你的页面中包含了 jQuery 和 Turn.js 的库：



<link rel="stylesheet" href="path/to/turn.css" />
<script src="path/to/jquery.min.js"></script>
<script src="path/to/turn.min.js"></script>
  1. 接下来，创建一个容器来包含你的翻页内容：



<div id="flipbook">
  <div class="turn-page">
    <div class="content">第一页内容</div>
  </div>
  <div class="turn-page">
    <div class="content">第二页内容</div>
  </div>
  <!-- 更多页面... -->
</div>
  1. 最后，使用 Turn.js 初始化翻页效果：



$('#flipbook').turn({
  width: 400,
  height: 300,
  autoCenter: true
});

这样就可以实现一个简单的翻页效果。你可以通过调整 width 和 height 的值来设置翻页的大小，autoCenter 属性则决定了翻页是否自动居中。

Turn.js 还支持更多高级功能，比如翻页动画、多页面、书签等。你可以查阅 Turn.js 的官方文档来了解更多详细的配置和使用方法。

- 阅读更多 -
【HTML CSS JS 蝴蝶飞舞特效 绝美（附完整代码）】
System
2024-08-15
所有,javascript

以下是实现蝴蝶飞舞特效的完整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>蝴蝶飞舞特效</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  #butterfly {
    position: absolute;
    width: 100px;
    height: 100px;
    background: url('butterfly.png') no-repeat;
    background-size: cover;
    opacity: 0.75;
    animation: fly 5s infinite ease-in-out;
  }
  @keyframes fly {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(100px) translateY(100px);
    }
    100% {
      transform: translateX(200px) translateY(0);
    }
  }
</style>
</head>
<body>
<div id="butterfly"></div>
<script>
// JavaScript代码可以为空，因为所有动画逻辑都在CSS中定义
</script>
</body>
</html>

在这个示例中，我们定义了一个#butterfly元素，并通过CSS的@keyframes规则创建了一个飞行动画。这个飞行路径是一个三角形，通过调整transform属性的translateX和translateY值来实现。这个示例展示了如何使用CSS动画创建简单的交互效果，而无需依赖复杂的JavaScript代码。

- 阅读更多 -
解决BUG：Transforming async generator functions to the configured target environment (“es2015“) is not
System
2024-08-15
所有,javascript

报错信息提示的是转换异步生成器函数到配置的目标环境时遇到了问题。这通常发生在使用Babel等转译工具将现代JavaScript代码转换为兼容旧版本浏览器或其他环境的代码时。

解决方法：

  1. 确认Babel配置：检查.babelrc或babel.config.js文件，确保目标环境（targets）正确无误，并且包含了对生成器函数和async/await的必要支持。
  2. 更新Babel插件：确保安装了适当的Babel插件，比如@babel/plugin-transform-runtime，以及@babel/plugin-syntax-async-generators和@babel/plugin-transform-async-to-generator。
  3. 更新Babel核心：确保你的Babel版本是最新的，或者至少是与你的项目兼容的版本。
  4. 调整代码：如果目标环境不支持生成器或async/await，你可能需要重写代码，使用回调或其他方式来替代。
  5. 使用polyfill：如果是浏览器不兼容问题，可以考虑使用core-js或babel-polyfill来提供对新JavaScript特性的兼容性。
  6. 调试和测试：在修改后，确保对代码进行充分的测试，以确保转换没有破坏现有功能。

如果报错信息提供的不够详细，可能需要查看Babel的转换日志或具体的错误信息来进一步诊断问题。

- 阅读更多 -
Vue3中的pinia使用（收藏版）
System
2024-08-15
所有,javascript



<template>
  <div>
    <p>{{ counter.value }}</p>
    <button @click="counter.increment()">+</button>
    <button @click="counter.decrement()">-</button>
  </div>
</template>
 
<script setup>
import { useCounterStore } from './stores/counterStore';
 
// 使用pinia的store
const counter = useCounterStore();
</script>

这个例子展示了如何在Vue 3应用中使用Pinia来创建和使用一个简单的计数器store。首先，在<script setup>标签中，我们导入了在counterStore.js文件中定义的useCounterStore函数。然后，我们通过调用useCounterStore来创建并获取store的实例，并将其赋值给counter变量。在模板中，我们绑定了counter.value到一个段落，并添加了两个按钮来分别调用counter.increment和counter.decrement方法来改变计数器的值。

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