html
html
自定义属性 data-*
html标签自定义属性 data-* 可以用来保存 一些与不同DOM元素相关联的信息 。 自定义属性可以设置多个
如下:
<li id="id" data-num="1" data-names="zhangsan" data-age="999">
Hello world
</li>
使用 js 获取自定义属性
1 使用 getAttribute 和 setAttribute
var restaurant = document.getElementById("id");
var strings = restaurant.getAttribute("data-num");
var restaurant = document.getElementById("id");
restaurant.setAttribute("data-num", "dataNum");
2 使用dataset属性
var restaurant = document.getElementById("id");
var stringss = restaurant.dataset.num; // 通过dataset获取自定义属性
restaurant.dataset.num = newNum; // 设置自定义属性的值
table表格设置边线为单边线
css border-collapse属性
border-collapse:属性,为表格设置合并边框模型。 其属性值如下: separate:默认值。边框会被分开。 collapse:将边框会合并为一个单线的边框 inherit:继承父元素的 border-collapse 属性的值,早期IE浏览器不支持此值。 实现 table 的单线边框的办法 为 table 表格的样式,为入 border-collapse 属性即可
<table>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>
<style>
table,table tr td {
border:1px solid #ccc;
border-collapse:collapse
}
table tr td{
padding: 5px 10px;
}
</style>
input 上传文件
<input type="file" onchange="uploadFile" />
const uploadFile = (e) => {
let reader = new FileReader();
reader.readAsDataURL(e.target.files[0]); // 传递参数 e.target.files[0] ,后台用MultipartFile接收实现上传文件
// reader.readAsText(e.target.files[0]) //读取text文件内容
reader.onload = (e) => {
console.log(e.target.result); //读取内容
};
};
FileReader
对象是 Web API 的一部分,它提供了几种方法来读取文件,并将文件内容转换为 JavaScript 可以使用的格式。以下是 FileReader
的主要方法:
- readAsArrayBuffer(file):
- 读取文件的内容,并将其作为 ArrayBuffer 对象返回。这对于处理二进制文件(如图像或音频文件)非常有用。
- readAsBinaryString(file):
- 读取文件的内容,并将其作为二进制字符串返回。这个方法在现代浏览器中已经不推荐使用,因为它的性能较差。
- readAsDataURL(file):
- 读取文件的内容,并将其作为 data URL 返回。这对于在网页上直接显示图像或视频等媒体内容非常有用。
- readAsText(file, [encoding]):
- 读取文件的内容,并将其作为文本字符串返回。可以指定一个可选的编码参数,通常用于非 UTF-8 编码的文本文件。如果不指定编码,默认使用 UTF-8 编码。
每个方法都会触发 FileReader
的 onload
事件,当文件读取完成后,可以通过 e.target.result
访问读取的内容。如果读取过程中发生错误,会触发 onerror
事件。如果用户在读取完成前取消了文件读取,会触发 onabort
事件。
ul li 去除前面的黑点
ul {
list-style-type: none;
}
list-style-type: "123"; ""里面的内容展示在 li 标签前面
// list-style-type 常用属性值有以下几个
1 none不使用项目符号
2 disc实心圆,默认值
3 circle空心圆
4 square实心方块
5 decimal阿拉伯数字
6 lower-roman小写罗马数字
7 upper-roman大写罗马数字
8 lower-alpha小写英文字母
9 upper-alpha大写英文字母
audio video
audio
用于在文档中表示用品内容,比如音乐。``可以包含多个音频资源,使用src
或者source
属性进行描述,浏览器会选择最合适的来用。当前它只支持三种音频格式:MP3, WAV, and OGG。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio
<audio controls>
<!-- Won't play because the mp3 doesn't exist -->
<source src="cat.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
对于不考虑兼容问题时,可以直接将src设置在 audio 标签里
<audio controls src="horse.mp3">
Video
用来处理电影或者视频流。这个可能是大家最熟悉的标签之一了。它现在支持的视频格式包括: MP4, WebM, and Ogg 。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
对于不考虑兼容问题时,可以直接将src设置在video标签里
<video width="320" height="240" controls src="movie.mp4"></video>
progress 进度条
<progress id="file" max="100" value="70"> 70% </progress>
details 标签 挂件(实现下拉展示)
details
可以创建一个挂件,默认处于关闭状态,仅在被切换成展开状态时才会显示隐藏的内容信息。可以在其中嵌入summary
标签,为该部件提供概要。
<details>
<summary>总结</summary>
<!-- 非必填,默认显示“详细信息” -->
我是内容,我是内容。我是内容,我是内容。我是内容,我是内容。
</details>
Template
Template
用来包含一些在页面加载时不会呈现的内容,但随后可以在运行时使用javascript进行实例化。
可以用来存储一段后续要用到的内容片段,减少了在JavaScript实例化节点时创建模版内容的过程。
<template>
<h2>前端记事本</h2>
<p>前端记事本前端记事本</p>
</template>
在javascript中可以使用这部分模版来实例化节点
function createNewNode() {
const node = document.querySelector('template');
const template = node.content.cloneNode(true);
document.body.appendChild(template);
}
img
造数据时,将本地图片转 url
img: new URL("@/assets/images/index/zph1.png", import.meta.url),
相关技术文章
分享24个强大的HTML属性,建议每位前端工程师都应该掌握! (qq.com)
canvas
Canvas API - Web API | MDN (mozilla.org)
基础绘制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="text/javascript">
function draw() {
let canvas = document.getElementById("tutorial"); // 获取 canvas 元素
if (canvas.getContext) {
var ctx = canvas.getContext("2d"); // getContext() 方法来访问绘画上下文
ctx.fillStyle = "rgb(200,0,0)"; // 绘制图形
ctx.fillRect(10, 10, 55, 50);
ctx.font = "20px serif"; // 设置字体样式
ctx.fillText("Hello world", 10, 80); // 绘制文字填充(显示fillStyle的样式)
ctx.strokeText("Hello world", 10, 100); // 绘制文字边框
draw2();
}
}
<!-- 运动元素 -->
function draw2() {
let canvas = document.getElementById("tutorial"); // 获取 canvas 元素
if (canvas.getContext) {
var ctx = canvas.getContext("2d"); // getContext() 方法来访问绘画上下文
ctx.strokeText("Hello", 10, 120); // 绘制文字边框
ctx.translate(5, 0); // 位移
window.requestAnimationFrame(draw2); // 递归调用,循环渲染
}
}
</script>
<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="600" height="400">
标签里面的内容会在浏览器不支持 canvas 标签时显示。
</canvas>
</body>
</html>
简易烟花绽放效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>全屏持续烟花效果</title>
<style>
/* 设置页面和画布样式 */
body, html {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
background-color: black; /* 背景颜色为黑色,模拟夜空 */
}
canvas {
display: block; /* 确保canvas元素独占一行 */
}
</style>
</head>
<body>
<canvas id="fireworksCanvas"></canvas>
<script>
// 获取canvas元素和上下文
const canvas = document.getElementById('fireworksCanvas');
const ctx = canvas.getContext('2d');
// 设置画布尺寸为全屏,并在窗口大小改变时重新调整
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.onresize = resizeCanvas;
resizeCanvas(); // 初始化设置
// 定义粒子类,用于表示烟花爆炸后产生的小点
class Particle {
constructor(x, y, vx, vy) {
this.x = x; // 粒子的x坐标
this.y = y; // 粒子的y坐标
this.vx = vx; // 水平速度
this.vy = vy; // 垂直速度
this.alpha = 1; // 不透明度,用于控制粒子逐渐消失的效果
}
// 更新粒子的位置和属性
update() {
this.x += this.vx;
this.y += this.vy;
this.vy += 0.1; // 加重力,使粒子加速下落
this.alpha -= 0.03; // 减少不透明度,模拟粒子渐渐消失
}
// 绘制粒子
draw() {
ctx.globalAlpha = this.alpha; // 设置全局透明度
ctx.fillStyle = 'hsla(' + (this.x % 360) + ', 100%, 50%, ' + this.alpha + ')'; // 使用HSLA颜色模式,增加视觉多样性
ctx.beginPath();
ctx.arc(this.x, this.y, 2, 0, Math.PI * 2); // 绘制圆形粒子
ctx.fill(); // 填充绘制的路径
}
}
// 定义烟花类,用于表示一个完整的烟花,包括上升和爆炸过程
class Firework {
constructor() {
this.x = Math.random() * canvas.width; // 随机水平位置
this.y = canvas.height; // 烟花从底部出发
this.targetY = Math.random() * (canvas.height * 0.4) + canvas.height * 0.1; // 随机目标高度,范围在屏幕高度的10%到50%
this.vy = -Math.sqrt(2 * 9.8 * (canvas.height - this.targetY)) / 10; // 根据物理公式计算初始速度,适当调整系数以适应新的高度
this.particles = []; // 存储爆炸后的粒子
this.exploded = false; // 标记烟花是否已经爆炸
}
// 更新烟花的状态(上升或爆炸)
update() {
if (!this.exploded) {
this.y += this.vy;
this.vy += 0.1; // 模拟上升过程中的减速(重力加速度)
if (this.y <= this.targetY || this.vy >= 0) { // 达到目标高度或速度变为非负数时爆炸
this.explode();
}
} else {
for (let i = this.particles.length - 1; i >= 0; i--) {
this.particles[i].update();
if (this.particles[i].alpha <= 0) this.particles.splice(i, 1); // 移除透明度为零的粒子
}
}
}
// 烟花爆炸,生成多个粒子
explode() {
this.exploded = true;
for (let i = 0; i < 100; i++) {
let angle = Math.random() * Math.PI * 2; // 随机角度
let speed = Math.random() * 5 + 2; // 随机速度
this.particles.push(new Particle(this.x, this.y, Math.cos(angle) * speed, Math.sin(angle) * speed));
}
}
// 绘制烟花或其产生的粒子
draw() {
if (!this.exploded) {
ctx.fillStyle = 'white';
ctx.fillRect(this.x - 2, this.y - 2, 4, 4); // 绘制上升的火花
} else {
for (let particle of this.particles) {
particle.draw();
}
}
}
}
let fireworks = []; // 存储所有正在动画的烟花
let lastLaunchTime = 0; // 记录上次发射烟花的时间戳
const launchInterval = 500; // 控制烟花发射的时间间隔,单位为毫秒
// 动画循环函数,负责更新和绘制所有烟花
function animate(timestamp) {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除上一帧的内容
// 以固定的时间间隔发射烟花
if (timestamp - lastLaunchTime > launchInterval) {
lastLaunchTime = timestamp;
launchFirework(); // 发射一个新的烟花
}
for (let i = fireworks.length - 1; i >= 0; i--) {
fireworks[i].update(); // 更新每个烟花的状态
fireworks[i].draw(); // 绘制每个烟花或其产生的粒子
if (fireworks[i].particles.length === 0 && fireworks[i].exploded) {
fireworks.splice(i, 1); // 移除已完成动画的烟花
}
}
requestAnimationFrame(animate); // 请求下一帧动画
}
// 发射烟花,创建一个新的烟花并添加到列表中
function launchFirework() {
fireworks.push(new Firework());
}
// 开始动画循环
requestAnimationFrame(animate);
</script>
</body>
</html>
小球运动mdn示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>全屏持续烟花效果</title>
<style>
/* 设置页面和画布样式 */
body, html {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
}
#fireworksCanvas{
border: 1px solid black;
}
canvas {
display: block; /* 确保canvas元素独占一行 */
}
</style>
</head>
<body>
<canvas id="fireworksCanvas" width="500" height="500"></canvas>
<script>
// 获取canvas元素和上下文
const canvas = document.getElementById('fireworksCanvas');
const ctx = canvas.getContext('2d');
const ball = {
x: 100,
y: 100,
vx: 5,
vy: 2,
radius: 20,
color: "blue",
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = this.color;
ctx.fill();
},
changeColor(){
if(this.color === "red"){
this.color = "blue";
}else{
this.color = "red";
}
}
};
const draw=()=> {
//ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
// 现在,使用的是 clearRect 函数帮我们清除前一帧动画。若用一个半透明的 fillRect 函数取代之,就可轻松制作长尾效果。
ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ball.changeColor()
ball.draw();
ball.x += ball.vx;
ball.y += ball.vy;
// 模拟重力效果
ball.vy *= 0.99;
ball.vy += 0.25;
// 防止小球超出边界
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
ball.vy = -ball.vy;
}
if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
ball.vx = -ball.vx;
}
raf = window.requestAnimationFrame(draw);
}
canvas.addEventListener("mouseover", (e) => {
raf = window.requestAnimationFrame(draw);
});
canvas.addEventListener("mouseout", (e) => {
// 停止运动
window.cancelAnimationFrame(raf);
});
ball.draw()
</script>
</body>
</html>
requestAnimationFrame的用法、优势和应用场景
作为一个前端你连requestAnimationFrame的用法、优势和应用场景都搞不清楚? (qq.com)
使用实例
<template>
<div>
<button @click="stop">停止</button>
</div>
</template>
<script lang="ts" setup>
let myReq;
function init(val) {
console.log('您好,requestAnimationFrame回调:', val);
myReq = requestAnimationFrame(init);
}
requestAnimationFrame(init);
function stop() {
cancelAnimationFrame(myReq);
}
</script>