分类前端技术下的文章

2024-08-23

在JavaScript中，我们可以使用Image对象的naturalWidth和naturalHeight属性来获取图片的原始宽度和高度。下面是两种不同的实现方法：

方法一：




var image = new Image();
image.src = 'image.jpg';
image.onload = function() {
  var width = this.naturalWidth;
  var height = this.naturalHeight;
  console.log('图片的原始宽度：', width);
  console.log('图片的原始高度：', height);
};

方法二：




var image = document.createElement('img');
image.src = 'image.jpg';
image.addEventListener('load', function() {
  var width = this.naturalWidth;
  var height = this.naturalHeight;
  console.log('图片的原始宽度：', width);
  console.log('图片的原始高度：', height);
});

这两种方法都首先创建一个Image对象或img元素，并设置其src属性为要加载的图片的URL。然后，我们使用onload事件或addEventListener方法来监听图片加载完成的事件。在事件处理程序中，我们可以使用this.naturalWidth和this.naturalHeight来获取图片的原始宽度和高度。

- 阅读更多 -

编程笔记 html5&css&js 012 HTML分块

System

2024-08-23

所有,html5

在HTML中，分块通常意味着将页面内容划分为不同的部分，每个部分可以通过HTML元素进行标记。以下是一个简单的HTML分块示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分块示例</title>
    <style>
        .section {
            padding: 20px;
            margin: 10px 0;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div class="section">
        <h2>第一部分标题</h2>
        <p>第一部分的内容...</p>
    </div>
    <div class="section">
        <h2>第二部分标题</h2>
        <p>第二部分的内容...</p>
    </div>
    <div class="section">
        <h2>第三部分标题</h2>
        <p>第三部分的内容...</p>
    </div>
</body>
</html>

在这个例子中，我们使用了<div>元素来创建分块布局，并通过CSS为.section类添加了边框和内边距。每个<div class="section">都是页面上的一个独立区块。这种方法可以用于构建更复杂的页面结构。

- 阅读更多 -

使用 Next SEO 在 Next.js 中管理 SEO

System

2024-08-23

所有,html5




import Head from 'next/head';
import { NextSeo } from 'next-seo';
 
export default function HomePage() {
  const title = '首页';
  const description = '这是首页的描述。';
 
  return (
    <>
      <NextSeo
        title={title}
        description={description}
        openGraph={{
          title: title,
          description: description,
          url: 'https://yourdomain.com',
          images: [
            {
              url: 'https://yourdomain.com/static/home-image.jpg',
              width: 800,
              height: 420,
              alt: '主页图片',
            },
          ],
        }}
        twitter={{
          handle: '@your_twitter',
          site: '@your_twitter',
          cardType: 'summary_large_image',
        }}
      />
      <Head>
        <meta name="msapplication-TileColor" content="#da532c" />
        <meta name="theme-color" content="#ffffff" />
      </Head>
      {/* 页面其余内容 */}
    </>
  );
}

这个代码实例展示了如何在一个Next.js应用中使用Next SEO来管理页面的SEO信息。我们定义了一个标题和描述，并且配置了Open Graph和Twitter卡片信息。同时，我们添加了两个meta标签来定制Windows平台的标签和设置应用的主题颜色。

- 阅读更多 -

用css搭建一个h5聊天界面

System

2024-08-23

所有,html5

下面是一个简单的H5聊天界面样式示例，使用了基本的CSS来构建界面。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H5聊天界面</title>
<style>
  body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: Arial, sans-serif;
  }
  .chat-container {
    width: 100%;
    max-width: 500px;
    background-color: #e6e6e6;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
  .chat-header {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
  }
  .message-input {
    width: 100%;
    padding: 10px;
    margin-top: 20px;
  }
  .message-input textarea {
    width: 100%;
    height: 100px;
    resize: none;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
  }
  .message-input button {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border: none;
    background-color: #555;
    color: white;
    cursor: pointer;
    border-radius: 5px;
  }
  .message-container {
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
  }
  .message {
    margin-bottom: 20px;
  }
  .message p {
    margin: 0;
    word-wrap: break-word;
  }
  .message-user {
    text-align: right;
  }
  .message-user p {
    background-color: #555;
    color: white;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 0;
  }
  .message-bot {
    text-align: left;
  }
  .message-bot p {
    background-color: #ddd;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 0;
  }
</style>
</head>
<body>
<div class="chat-container">
  <div class="chat-header">
    <h2>聊天室</h2>
  </div>
  <div class="message-container">
    <!-- 消息列表 -->
  </div>
  <div class="message-input">
    <textarea placeholder="输入消息..."></textarea>
    <button>发送</button>
  </div>
</div>
</body>
</html>

这个例子提供了一个简单的聊天界面框架，你可以根据需要添加JavaScript以实现发送消息、接收消息等功能。

- 阅读更多 -

头条案例（基于vue2）

System

2024-08-23

所有,html5

黑马头条案例是一个典型的新闻类应用，使用Vue.js框架实现。以下是一个简化版的黑马头条案例的代码实现：




<!DOCTYPE html>
<html>
<head>
    <title>Black马头条</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.5/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>Black马头条</h1>
        <div v-for="article in articles" :key="article.id">
            <h2>{{ article.title }}</h2>
            <p>{{ article.summary }}</p>
        </div>
    </div>
 
    <script>
        new Vue({
            el: '#app',
            data: {
                articles: [
                    { id: 1, title: 'Vue.js 2.7发布', summary: 'Vue.js 2.7版本现已发布，它带来了许多性能改进和新功能。' },
                    { id: 2, title: 'Node.js 14.0发布', summary: 'Node.js 14.0正式版已发布，带来了许多新特性和性能改进。' },
                    // ...更多新闻数据
                ]
            }
        });
    </script>
</body>
</html>

这个简单的例子展示了如何使用Vue.js创建一个基本的新闻列表。v-for指令用于循环渲染articles数组中的每篇文章，并通过:key绑定为每篇文章提供一个唯一的key，以助于Vue的渲染系统优化性能。

- 阅读更多 -

HTML5 ＜img＞标签

System

2024-08-23

所有,html5

HTML5 <img> 标签用于在网页中插入图像。

基本语法：




<img src="image_URL" alt="image_description" title="image_title" width="pixels" height="pixels">

参数说明：

src：必需。指定图像的路径。
alt：替代文本，图像不能显示时显示的文本。
title：鼠标悬停时显示的文本。
width和height：图像的宽度和高度，可以只设置其中之一，另一个会按比例缩放。

示例代码：




<img src="image.jpg" alt="Description of the image" title="Image Title" width="500" height="300">

这段代码将在网页上显示一个宽度为500像素，高度为300像素的图像，图像的路径是image.jpg。如果图像无法显示，将显示"Description of the image"文本，鼠标悬停时将显示"Image Title"。

- 阅读更多 -

HTML5庆祝生日蛋糕烟花特效

System

2024-08-23

所有,html5

以下是一个简化的版本，仅包含核心代码，用于创建一个蛋糕并使其旋转：




<!DOCTYPE html>
<html>
<head>
    <title>Cake Rotation</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        .cake {
            position: absolute;
            width: 100px;
            height: 150px;
            background: #eec437;
            border-radius: 100px 100px 0 0;
            box-shadow: 0 0 20px #eec437;
            transform-origin: 50% -100px;
            animation: rotate 5s linear infinite;
        }
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="cake"></div>
</body>
</html>

这段代码使用了CSS3的@keyframes规则来创建无限循环的旋转动画。.cake类定义了一个蛋糕的基本样式，并将其旋转原点设在其左下角。animation属性设置了动画名称、持续时间、动画时间函数以及动画的无限循环。

- 阅读更多 -

Layui表格数据重载，不请求url

System

2024-08-23

所有,html5

在使用 layui 的表格（Table）组件时，如果你想要重新加载当前表格的数据但不发送新的请求到服务器，你可以调用表格的 reload 方法。这个方法允许你指定一个新的数据集来重新渲染表格，而不是请求服务器上的数据。

以下是一个简单的例子，展示了如何使用本地数据来重载表格：




// 假设你已经初始化了表格，并且保存了表格的实例
var tableIns = table.render({
    elem: '#your-table-id'
    ,cols: [[ /* 你的列定义 */ ]]
    ,data: [] // 初始数据，可以是空数组
    // 其他配置项...
});
 
// 当需要重载表格数据时，你可以使用以下代码
// 假设你有一个新的数据数组 newData
var newData = [ /* 新的数据数组 */ ];
 
// 使用 table.reload 方法来重载数据
table.reload('your-table-id', {
    data: newData // 使用新的数据集
});

在这个例子中，newData 是一个新的数据数组，你可以根据需要将其替换为任何你想要加载到表格中的数据。使用 table.reload 方法时，你需要传递表格的 ID（即 elem 选项中定义的值），并且提供一个包含 data 属性的配置对象，该属性包含了新的数据集。

请注意，如果你的表格配置了 url 选项，并且你想要在不请求服务器的情况下使用新数据，你需要确保在调用 table.reload 时提供 data 属性。如果你不想提供 data 属性，你应该在调用 table.render 时将 url 选项设置为 null 或者移除 url 选项，这样表格就不会自动请求服务器了。

- 阅读更多 -

hexo个人博客搭建＋butterfly主题配置（雏形版本）

System

2024-08-23

所有,html5

以下是搭建Hexo博客和配置Butterfly主题的代码示例，注意，这仅是一个概念性的示例，实际使用时需要根据自己的需求进行相应的配置调整。




# 安装Hexo
npm install -g hexo-cli
hexo init blog
cd blog
npm install
 
# 安装Butterfly主题
git clone https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
 
# 修改Hexo配置文件_config.yml
# 将theme字段改为butterfly
theme: butterfly
 
# 修改Butterfly主题配置文件_config.butterfly.yml
# 根据需要配置主题选项，例如菜单、侧边栏、布局等
 
# 启动Hexo服务器进行预览
hexo s

这段代码演示了如何安装Hexo和Butterfly主题，并进行基本的配置。在实际使用时，你需要根据自己的需求来修改_config.yml和_config.butterfly.yml文件中的配置。

- 阅读更多 -

vue-html5-editor富文本编辑器抓取网络图片本地化

System

2024-08-23

所有,html5

要实现Vue中使用vue-html5-editor富文本编辑器抓取网络图片本地化，你需要监听编辑器中的图片插入事件，并将网络图片转换为本地Base64或上传到服务器。以下是一个简化的示例：

安装vue-html5-editor：




npm install vue-html5-editor --save

在Vue组件中使用vue-html5-editor并监听图片插入事件：




<template>
  <div>
    <vue-html5-editor ref="editor" @imgAdd="$handleImgAdd"></vue-html5-editor>
  </div>
</template>
 
<script>
import VueHtml5Editor from 'vue-html5-editor';
 
export default {
  components: { VueHtml5Editor },
  methods: {
    $handleImgAdd(imgFiles) {
      // 这里可以选择转换为Base64或上传到服务器
      // 示例：转换为Base64
      this.convertToBase64(imgFiles[0]).then(base64 => {
        // 插入Base64图片
        this.$refs.editor.quill.insertEmbed(this.$refs.editor.quill.getSelection().index, 'image', base64);
      });
    },
    convertToBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = e => resolve(e.target.result);
        reader.onerror = error => reject(error);
        reader.readAsDataURL(file);
      });
    }
  }
};
</script>

在上述代码中，我们监听了imgAdd事件，当用户添加图片时，会触发$handleImgAdd方法。我们可以选择将图片转换为Base64，然后使用Quill的API将其插入到编辑器中。如果选择上传到服务器，则需要将图片上传到服务器，然后插入上传后的图片URL。

- 阅读更多 -