分类前端技术下的文章

2024-08-23




// 定义一个简单的自定义对象构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}
 
// 向原型添加方法
Person.prototype.greeting = function() {
  return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
};
 
// 创建实例
const person1 = new Person('Alice', 30);
const person2 = new Person('Bob', 25);
 
// 使用实例方法
console.log(person1.greeting()); // 输出: Hello, my name is Alice and I am 30 years old.
console.log(person2.greeting()); // 输出: Hello, my name is Bob and I am 25 years old.

这段代码定义了一个名为Person的构造函数，它接受name和age两个参数，并且在其原型上定义了一个greeting方法。然后创建了两个实例person1和person2，并调用了它们的greeting方法。这是一个展示如何在JavaScript中创建和使用自定义对象的简单示例。

- 阅读更多 -

HTML5福利篇--使用Canvas画图

System

2024-08-23

所有,html5




<!DOCTYPE html>
<html>
<head>
    <title>Canvas 画图示例</title>
    <script>
        function draw() {
            var canvas = document.getElementById('myCanvas');
            var ctx = canvas.getContext('2d');
 
            // 绘制线条
            ctx.beginPath();
            ctx.moveTo(20, 20);
            ctx.lineTo(200, 20);
            ctx.lineWidth = 5;
            ctx.strokeStyle = 'blue';
            ctx.stroke();
 
            // 绘制矩形
            ctx.beginPath();
            ctx.rect(50, 70, 150, 100);
            ctx.fillStyle = 'green';
            ctx.fill();
            ctx.lineWidth = 3;
            ctx.strokeStyle = 'black';
            ctx.stroke();
 
            // 绘制文字
            ctx.font = '20px Arial';
            ctx.fillStyle = 'red';
            ctx.fillText('Hello, World!', 100, 150);
        }
    </script>
</head>
<body onload="draw();">
    <canvas id="myCanvas" width="400" height="300" style="border:1px solid #000000;"></canvas>
</body>
</html>

这段代码在页面加载完成时调用draw函数，该函数获取页面上的<canvas>元素，并通过getContext('2d')获取2D绘图上下文。然后，它使用beginPath、moveTo、lineTo等方法绘制线条，使用rect、fill、stroke等方法绘制矩形和填充文字。这个例子展示了如何使用Canvas API进行基本的图形绘制。

- 阅读更多 -

HTML5 自定义属性

System

2024-08-23

所有,html5

HTML5 允许你在元素上添加自定义属性。自定义属性需要以 "data-" 开头，这样浏览器能够识别它们并且在必要时保留它们。

解决方案1：




<div id="myDiv" data-my-attribute="someValue"></div>

在这个例子中，我们在div元素上添加了一个自定义属性，名为"data-my-attribute"，值为"someValue"。

解决方案2：

通过JavaScript添加和获取自定义属性：




<div id="myDiv"></div>




var div = document.getElementById('myDiv');
div.setAttribute('data-my-attribute', 'someValue'); // 设置自定义属性
var attributeValue = div.getAttribute('data-my-attribute'); // 获取自定义属性

在这个例子中，我们首先通过document.getElementById获取div元素，然后使用setAttribute方法在div元素上添加自定义属性，最后使用getAttribute方法获取自定义属性的值。

解决方案3：

通过jQuery添加和获取自定义属性：




<div id="myDiv"></div>




var $div = $('#myDiv');
$div.attr('data-my-attribute', 'someValue'); // 设置自定义属性
var attributeValue = $div.attr('data-my-attribute'); // 获取自定义属性

在这个例子中，我们首先通过jQuery选择器获取div元素，然后使用attr方法在div元素上添加自定义属性，最后再次使用attr方法获取自定义属性的值。

- 阅读更多 -

vue3 组件自己引用自己递归组件组件命名

System

2024-08-23

所有,html5

在Vue 3中，一个组件可以递归地引用自身，这通常用于表示递归数据结构，如树形菜单或组织结构图等。为了使递归组件正确工作，你需要给它一个名字，这样它才能在模板中引用自身。

下面是一个简单的递归组件示例，它使用了一个名为"TreeNode"的组件来表示树节点，并递归地引用自身来显示每个节点的子节点。




<template>
  <div>
    <p>{{ node.label }}</p>
    <TreeNode v-for="child in node.children" :node="child" :key="child.id" />
  </div>
</template>
 
<script>
export default {
  name: 'TreeNode', // 组件命名为TreeNode
  props: {
    node: Object // 接受一个名为node的prop，它是一个对象，包含节点的数据
  }
};
</script>

在这个例子中，TreeNode组件通过v-for指令递归地渲染自己，并通过node属性传递子节点数据。通过给组件一个唯一的name选项，Vue 可以追踪递归组件的多个实例。

- 阅读更多 -

HTML4+HTML5知识

System

2024-08-23

所有,html5

HTML4和HTML5的知识点有很多，但是我们可以关注一些主要的差异点。以下是一些主要的差异点：

文档类型（DOCTYPE）:
HTML4使用SGML（Standard Generalized Markup Language），HTML5不使用SGML，直接使用新的DOCTYPE声明。
语言属性：
HTML4中可以直接在<html>标签中使用lang属性来指定语言，而在HTML5中，lang属性被移到了<html>标签上。
新的元素：
HTML5引入了许多新的语义元素，如<header>, <nav>, <section>, <article>, <aside>, <footer>等。
内联SVG：
HTML5允许直接在HTML文档中使用内联SVG，而HTML4不支持。
新的表单控件：
HTML5引入了新的表单控件，如email, url, number, range, date, time, month, week, search, color等。
多媒体支持：
HTML5增强了对视频和音频的支持，通过<video>和<audio>标签来实现。
Canvas绘图：
HTML5提供了<canvas>元素来实现绘图。
删除的元素：
HTML4中的一些元素如<center>, <font>, <u>等在HTML5中已被删除。
全局属性：
HTML5引入了全局属性，如contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck等。
属性的简写：
例如，HTML5允许我们对boolean属性进行简写，如checked, selected, disabled等。

以下是一个简单的HTML5页面示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Example</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <section>
        <h2>Main Content</h2>
        <p>This is an example paragraph...</p>
    </section>
    <aside>
        <h2>Sidebar</h2>
        <p>This is a sidebar paragraph...</p>
    </aside>
    <footer>
        <p>Copyright &copy; 2023 My Website</p>
    </footer>
</body>
</html>

这个示例展示了HTML5中的一些新的语义元素，以及如何正确地使用它们来构建一个简单的网页结构。

- 阅读更多 -

解决fixed定位z-index层级无效问题

System

2024-08-23

所有,html5

z-index 属性在 CSS 中用于控制元素的堆叠顺序，当元素的 position 属性值为 fixed 时，z-index 应该能够正常工作。但是，如果遇到 z-index 在 fixed 定位的元素上无效的问题，可能是由于以下原因：

父元素的 z-index 设置得不够高或没有设置 z-index，导致子元素的 fixed 定位被父元素遮挡。
存在其他定位上下文，其中 z-index 被其他元素占据。
存在其他元素使用了相对定位或绝对定位，并且 z-index 更高，导致 fixed 定位的元素被遮挡。

解决方法：

确保父元素的 z-index 设置得足够高，或者不设置 z-index 让子元素能够在堆叠上下文中脱颖而出。
检查是否有其他定位上下文（如嵌套的 flex 容器、绝对定位的元素等），并适当调整 z-index 值。
如果有其他元素的 z-index 值更高，尝试调整这些元素的 z-index 值，确保 fixed 定位元素的 z-index 高于它们。

示例代码：




/* 确保父元素的z-index足够高 */
.parent {
  position: relative;
  z-index: 10; /* 或者更高的值 */
}
 
/* 调整其他可能干扰的元素的z-index */
.conflicting-element {
  z-index: 5; /* 应该小于fixed定位元素的z-index */
}
 
/* 设置fixed定位元素的z-index */
.fixed-element {
  position: fixed;
  z-index: 15; /* 确保这个值高于其他可能的干扰因素 */
}

确保在调整 z-index 时考虑到父子元素之间的层级关系，并适当地调整数值。

- 阅读更多 -

编程笔记 html5&css&js 089 JavaScript 事件处理

System

2024-08-23

所有,html5




// 假设我们有一个按钮元素，当被点击时，我们希望显示一个警告框
 
// 获取按钮元素
var myButton = document.getElementById('myButton');
 
// 为按钮添加点击事件处理程序
myButton.addEventListener('click', function() {
    alert('按钮被点击了！');
});

这段代码演示了如何在JavaScript中为HTML元素添加事件处理程序。当用户点击ID为myButton的按钮时，会触发一个警告框，显示“按钮被点击了！”的消息。这是一个常见的事件处理模式，对于学习JavaScript的初学者非常有帮助。

- 阅读更多 -

HTML5语义化标签 header 的详解

System

2024-08-23

所有,html5

HTML5引入了许多新的语义化标签，<header> 标签就是其中之一。<header> 标签用来表示网页或者一个区段的头部，通常包含网页的名称、logo、导航等头部信息。

下面是 <header> 标签的一个简单示例：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例网页</title>
</head>
<body>
    <header>
        <h1>示例网页</h1>
        <nav>
            <ul>
                <li><a href="/">首页</a></li>
                <li><a href="/about">关于我们</a></li>
            </ul>
        </nav>
    </header>
    <article>
        <header>
            <h2>文章标题</h2>
            <p>发布时间：<time datetime="2023-04-01">2023年4月1日</time></p>
        </header>
        <p>这里是文章的内容...</p>
    </article>
</body>
</html>

在这个例子中，第一个 <header> 标签用于定义网页头部，包括网页标题和导航链接。第二个 <header> 标签用于定义文章的头部，包括文章标题和发布时间。这样的语义化标签有助于搜索引擎理解网页内容的结构，同时也有助于增强网页的可访问性和可维护性。

- 阅读更多 -

Vue使用vue-html5-editor的富文本编辑器

System

2024-08-23

所有,html5

在Vue中使用vue-html5-editor富文本编辑器，首先需要安装该编辑器：




npm install vue-html5-editor --save

然后在Vue组件中引入并注册该编辑器：




<template>
  <div>
    <vue-html5-editor :content="editorContent" @change="updateContent"></vue-html5-editor>
  </div>
</template>
 
<script>
import VueHtml5Editor from 'vue-html5-editor';
 
export default {
  components: { VueHtml5Editor },
  data() {
    return {
      editorContent: ''
    };
  },
  methods: {
    updateContent(val) {
      this.editorContent = val;
    }
  }
};
</script>

在这个例子中，:content="editorContent" 是用来绑定编辑器的初始内容，@change="updateContent" 是用来监听编辑器内容变化的事件，并更新组件的 editorContent 数据。

请注意，vue-html5-editor 可能不是最新的编辑器，或者已经不再维护。建议在选择编辑器时考虑使用更为流行和活跃的编辑器，如 quill 或 tinymce。

- 阅读更多 -

HTML5新增表单元素和表单属性，web前端开发项目文档

System

2024-08-23

所有,html5

HTML5 引入了许多新的表单控件和属性，以下是一些常见的示例：

颜色输入（<input type="color">）：




<label for="favcolor">选择你的喜好颜色:</label>
<input type="color" id="favcolor">

日期输入（<input type="date">）：




<label for="birthday">你的生日:</label>
<input type="date" id="birthday">

时间输入（<input type="time">）：




<label for="appointment">指定时间:</label>
<input type="time" id="appointment">

月份输入（<input type="month">）：




<label for="billing-month">计费月份:</label>
<input type="month" id="billing-month">

周输入（<input type="week">）：




<label for="pick-week">选择周:</label>
<input type="week" id="pick-week">

数字输入增强（<input type="number">）：




<label for="quantity">数量:</label>
<input type="number" id="quantity" min="1" max="5" step="1">

搜索输入（<input type="search">）：




<label for="search-input">搜索:</label>
<input type="search" id="search-input">

电邮输入（<input type="email">）：




<label for="email-input">电邮:</label>
<input type="email" id="email-input">

电话输入（<input type="tel">）：




<label for="phone-input">电话号码:</label>
<input type="tel" id="phone-input">

范围输入（<input type="range">）：




<label for="volume-control">音量控制:</label>
<input type="range" id="volume-control" min="1" max="100">

文件多选（<input type="file"> 的 multiple 属性）：




<label for="file-upload">选择多个文件:</label>
<input type="file" id="file-upload" multiple>

隐藏输入（<input type="hidden">）：




<input type="hidden" id="session-id" value="12345">

必填星号标记（required 属性）：




<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>

模式验证（pattern 属性）：




<label for="credit-card">信用卡号:</label>
<input type="text" id="credit-card" name="credit-card" pattern="[0-9]{16}" title="输入16位数字">

输入提示（placeholder 属性）：




<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">

自动对焦（autofocus 属性）：




<label for="username">用户名:</label>
<input type="text" id="username" name="userna

- 阅读更多 -