标签 html5 下的文章

2024-08-16




<!DOCTYPE html>
<html>
<head>
    <title>HTML5 视频播放器示例</title>
</head>
<body>
    <video id="myVideo" width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        您的浏览器不支持 HTML5 视频。
    </video>
    <script>
        var myVideo = document.getElementById("myVideo");
 
        // 视频切换函数
        function switchVideo(videoUrl) {
            myVideo.src = videoUrl;
            myVideo.load();
        }
 
        // 倍速播放控制
        function playOrPause() {
            if (myVideo.paused) {
                myVideo.play();
            } else {
                myVideo.pause();
            }
        }
 
        // 倍速播放函数
        function setPlaybackRate(rate) {
            myVideo.playbackRate = rate;
        }
    </script>
 
    <!-- 视频切换按钮 -->
    <button onclick="switchVideo('video2.mp4')">切换视频</button>
 
    <!-- 播放/暂停按钮 -->
    <button onclick="playOrPause()">
        {{ '播放' if myVideo.paused else '暂停' }}
    </button>
 
    <!-- 倍速播放按钮 -->
    <button onclick="setPlaybackRate(0.5)">半速</button>
    <button onclick="setPlaybackRate(1)">正常速度</button>
    <button onclick="setPlaybackRate(2)">双倍速度</button>
</body>
</html>

这个代码实例提供了一个简单的HTML5视频播放器，并包括了视频切换、播放和暂停控制以及倍速播放的功能。它使用JavaScript来控制视频元素的属性，并通过HTML按钮触发这些功能。这个示例可以作为开发者学习和实践HTML5视频播放以及JavaScript控制的起点。

- 阅读更多 -

【HTML5】 canvas 绘制图形

System

2024-08-16

所有,html5

在HTML5中，使用<canvas>元素可以绘制图形。以下是一个简单的例子，展示了如何使用JavaScript在<canvas>元素中绘制一个红色的矩形：

HTML部分：




<!DOCTYPE html>
<html>
<body>
 
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
您的浏览器不支持Canvas。
</canvas>
 
<script>
// 在这里放置JavaScript代码
</script>
 
</body>
</html>

JavaScript部分：




// 获取canvas元素
var canvas = document.getElementById('myCanvas');
// 创建context对象
var ctx = canvas.getContext('2d');
// 设置填充颜色为红色
ctx.fillStyle = '#FF0000';
// 绘制矩形
ctx.fillRect(0, 0, 200, 100);

在这个例子中，我们首先通过document.getElementById获取了canvas元素。然后，我们通过调用getContext('2d')方法创建了一个2D绘图上下文。接着，我们设置了填充颜色为红色（使用十六进制颜色代码），并使用fillRect方法绘制了一个从坐标(0, 0)开始，宽度为200像素，高度为100像素的矩形。这将在canvas中创建一个红色的矩形。

System

2024-08-16

所有,html5




// 定义一个绘图类
class Graphics {
    constructor(canvas) {
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d');
    }
 
    // 绘制圆形
    drawCircle(x, y, radius, fillColor) {
        this.ctx.beginPath();
        this.ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
        this.ctx.fillStyle = fillColor;
        this.ctx.fill();
    }
 
    // 绘制矩形
    drawRect(x, y, width, height, fillColor) {
        this.ctx.fillStyle = fillColor;
        this.ctx.fillRect(x, y, width, height);
    }
 
    // 绘制线段
    drawLine(startX, startY, endX, endY, lineColor, lineWidth) {
        this.ctx.beginPath();
        this.ctx.moveTo(startX, startY);
        this.ctx.lineTo(endX, endY);
        this.ctx.strokeStyle = lineColor;
        this.ctx.lineWidth = lineWidth;
        this.ctx.stroke();
    }
 
    // 绘制图片
    drawImage(image, x, y, width, height) {
        this.ctx.drawImage(image, x, y, width, height);
    }
}
 
// 使用示例
const canvas = document.getElementById('myCanvas');
const graphics = new Graphics(canvas);
 
graphics.drawCircle(75, 75, 50, 'green');
graphics.drawRect(12, 12, 100, 200, 'blue');
graphics.drawLine(0, 0, 200, 100, 'red', 5);
 
const image = new Image();
image.src = 'path_to_image.jpg';
image.onload = () => {
    graphics.drawImage(image, 50, 50, 100, 100);
};

这段代码定义了一个名为Graphics的类，它封装了绘制图形的各种方法。通过实例化Graphics类，并调用其方法，可以在指定的canvas上绘制不同的图形。这种面向对象的方式使得代码结构清晰，易于管理和扩展。

- 阅读更多 -

利用HTML5中Canvas处理并存储图片

System

2024-08-16

所有,html5




<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="288" height="210" style="border:1px solid #000000;"></canvas>
 
<script>
// 假设我们有一个图片数组，每个图片都是一个base64编码的字符串
var imagesData = [
    'data:image/png;base64,...',
    'data:image/png;base64,...',
    // ... 更多图片
];
 
// 获取Canvas的2D上下文
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
 
// 保存Canvas状态
ctx.save();
 
// 绘制图片到Canvas
var x = 0;
imagesData.forEach(function(imageData) {
    var img = new Image();
    img.onload = function() {
        ctx.drawImage(img, x, 0);
        x += img.width;
    };
    img.src = imageData;
});
 
// 绘制完成后恢复Canvas状态
ctx.restore();
 
// 现在Canvas中包含了所有图片，可以将其转换为图片格式进行保存或者输出
var img = canvas.toDataURL("image/png");
// 输出或保存img的内容
console.log(img);
</script>
 
</body>
</html>

这个例子中，我们首先定义了一个包含base64编码图片的数组。然后，我们获取Canvas元素并绘制每个图片。最后，我们使用toDataURL方法将Canvas的内容转换为一个新的base64编码的图片，这个新的图片可以用于保存或者其他用途。

- 阅读更多 -

HTML5漫画风格个人介绍源码

System

2024-08-16

所有,html5




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>漫画风格个人介绍</title>
    <style>
        body {
            background: #eee;
            color: #333;
            font-family: 'Comic Sans MS', 'Comic Sans', 'cursive';
            padding: 20px;
        }
        img {
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
            margin: 10px 0;
            width: 300px;
        }
        h1 {
            font-size: 36px;
            text-align: center;
        }
        p {
            line-height: 1.6;
            text-align: justify;
        }
    </style>
</head>
<body>
    <h1>个人介绍</h1>
    <img src="https://example.com/path/to/profile-picture.jpg" alt="个人照片">
    <p>
        这里是个人介绍文字，将以漫画风格展现给读者。在这里可以详细描述你的经历、梦想、价值观及对世界的理解。
    </p>
    <!-- 其他内容 -->
</body>
</html>

这个示例展示了如何使用HTML和CSS来创建一个以漫画风格呈现的个人介绍页面。通过设置font-family为Comic Sans MS，我们模仿了漫画风格，同时使用box-shadow和border-radius增加图片的视觉效果。通过调整line-height和text-align属性，我们使得段落文本以漫画风格展示。这个示例简单直观地展示了如何将HTML和CSS结合起来创建有趣的网页设计。

- 阅读更多 -

html5静态网页制作代码

System

2024-08-16

所有,html5

HTML5静态网页制作通常指的是创建一个不需要后端数据库或动态脚本支持的网页。以下是一个简单的HTML5静态网页示例代码：




<!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, nav, section, footer {
            margin: 10px 0;
            padding: 15px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <header>
        <h1>欢迎来到我的网页</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>
    <section>
        <h2>最新文章</h2>
        <p>这是一个静态网页，所以不包含最新文章。</p>
    </section>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
</body>
</html>

这个示例包含了HTML5的文档类型声明，使用<header>, <nav>, <section>, <footer>等HTML5语义元素来构建网页结构，并通过内部样式表(style标签)添加了简单的CSS样式。这个网页没有后端逻辑，不会与数据库交互，是纯静态内容的展示。

- 阅读更多 -

【html5+css】css引入方式选择器以及他们的优先级

System

2024-08-16

所有,html5

CSS的引入方式主要有以下几种：

内联样式：直接在HTML标签中使用style属性来设置样式。




<p style="color: red;">这是红色文字</p>

内部样式表：在HTML文档的<head>部分，使用<style>标签来包含CSS代码。




<head>
  <style>
    p { color: blue; }
  </style>
</head>

外部样式表：创建一个CSS文件（比如styles.css），然后在HTML文档的<head>部分，使用<link>标签来引入这个CSS文件。




<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

在CSS中，选择器用于选择需要应用样式的元素。主要的选择器类型包括：

元素选择器：直接使用HTML标签作为选择器。




p { color: green; }

类选择器：通过.前缀定义，可以被多个元素引用。




.highlight { background-color: yellow; }

ID选择器：通过#前缀定义，在文档中应该是唯一的。




#first-paragraph { font-size: 20px; }

属性选择器：可以根据元素的属性或属性值来选择元素。




input[type="text"] { background-color: lightblue; }

伪类选择器：用于定位元素的不同状态，比如:hover, :active等。




a:hover { text-decoration: underline; }

伪元素选择器：用于向元素的某些部分添加样式，比如::before和::after。




p::before { content: "前缀"; }

在CSS中，样式的优先级遵循以下规则：

内联样式（在HTML标签中使用style属性）> 内部样式表和外部样式表。
ID选择器 > 类选择器 > 元素选择器。
行内样式（内联样式）> 内部样式表 > 外部样式表。
继承的样式优先级较低。
同一选择器中，标有!important的规则优先级最高。
如果选择器相同，那么最后声明的样式会被应用。

注意：!important应该谨慎使用，因为它可能会破坏CSS的可维护性。

- 阅读更多 -

HTML5+CSS3小实例：文本背景扫光效果

System

2024-08-16

所有,css3




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Scrolling Glow Effect</title>
<style>
  @keyframes glow {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 300px 0;
    }
  }
  .glow-text {
    font-size: 6em;
    color: #fff;
    background: linear-gradient(to right, #ff8a00, #e52e71);
    background-size: 300px 300px;
    background-repeat: no-repeat;
    text-align: center;
    animation: glow 5s ease-in-out infinite;
  }
</style>
</head>
<body>
  <div class="glow-text">
    扫光效果的文本
  </div>
</body>
</html>

这段代码创建了一个带有扫光效果的文本，其中.glow-text类定义了文本的样式，包括字体大小、颜色（白色 #fff）、背景渐变以及动画效果。@keyframes glow定义了背景图像如何移动产生动画效果。这个示例展示了如何结合CSS3的渐变和动画功能来创造特殊的视觉效果。

System

2024-08-15

所有,css3

以下是一个简单的示例，展示了如何使用JavaScript和CSS创建一个简单的喵喵画网页版本。




<!DOCTYPE html>
<html>
<head>
    <title>喵喵画网</title>
    <style>
        body {
            background-color: #f7f7f7;
            font-family: Arial, sans-serif;
        }
        #paint-area {
            width: 600px;
            height: 400px;
            border: 1px solid #000;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div id="paint-area"></div>
    <script>
        // 获取画布区域
        var paintArea = document.getElementById('paint-area');
        // 监听鼠标事件
        paintArea.addEventListener('mousedown', function(event) {
            var ctx = event.target.getContext('2d');
            ctx.beginPath();
            ctx.moveTo(event.offsetX, event.offsetY);
            event.target.addEventListener('mousemove', function(event) {
                ctx.lineTo(event.offsetX, event.offsetY);
                ctx.stroke();
            }, { once: true });
        });
    </script>
</body>
</html>

这段代码创建了一个简单的鼠标绘画区域，当用户在#paint-area上按下鼠标时，开始绘制。鼠标移动时，绘制线条跟随鼠标。当用户释放鼠标按钮时，停止绘制。这个示例演示了如何使用JavaScript监听鼠标事件，并在画布上绘图。

System

2024-08-15

所有,html5

Vue-router 利用 HTML5 History API 中的 pushState 和 replaceState 方法来实现无需重新加载页面的页面跳转。

具体来说，当你使用 Vue-router 的时候，它会根据你的路由配置生成对应的路径。如果你设置了 mode: 'history'，Vue-router 会使用 history.pushState 和 history.replaceState 方法来管理路由，这样就可以实现路由的变化而不刷新页面。

以下是一个简单的例子：




import Vue from 'vue';
import VueRouter from 'vue-router';
 
Vue.use(VueRouter);
 
const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
];
 
const router = new VueRouter({
  mode: 'history', // 使用 HTML5 History API
  routes
});
 
new Vue({
  router,
  template: '<div><router-link to="/home">Home</router-link><router-link to="/about">About</router-link><router-view></router-view></div>'
}).$mount('#app');

在这个例子中，当你点击 Home 或 About 链接时，Vue-router 会使用 history.pushState 来更新浏览器的地址栏而不刷新页面。

如果你想要在 Vue-router 中使用 replaceState，你可以在路由跳转时使用 router.replace() 方法。例如：




// 当你想要替换当前的历史记录而不是添加新的记录时
this.$router.replace({ path: '/new-path' });

这样，Vue-router 就会使用 history.replaceState 来更改当前的历史记录条目，而不会在历史记录中创建一个新的条目。

- 阅读更多 -