标签 html5 下的文章

编程笔记 html5&css&js 083 JavaScript 函数的递归

2024-08-17




// 使用递归函数计算阶乘
function factorial(n) {
  if (n === 0 || n === 1) {
    return 1; // 0 和 1 的阶乘为 1
  }
  return n * factorial(n - 1); // 递归调用
}
 
// 计算 5 的阶乘
console.log(factorial(5)); // 输出: 120

这段代码定义了一个名为 factorial 的函数，用于计算给定数字的阶乘。函数使用了递归的方式，通过比较输入参数 n 是否为 0 或 1 来停止递归，并且在递归调用中返回 n 乘以 (n - 1) 的阶乘。最后，在控制台中打印出 5 的阶乘结果。这是一个典型的递归应用场景，对于理解和学习递归非常有帮助。

html5 canvas绘制圆形、方形矩形、线段、图片等各种图形

2024-08-17




<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
 
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
 
// 绘制圆形
ctx.beginPath();
ctx.arc(70, 40, 35, 0, 2 * Math.PI);
ctx.stroke();
 
// 绘制方形
ctx.fillStyle = "#FF0000";
ctx.fillRect(10, 10, 50, 50);
 
// 绘制线段
ctx.moveTo(100, 10);
ctx.lineTo(100, 50);
ctx.lineWidth = 3;
ctx.strokeStyle = "#0000FF";
ctx.stroke();
 
// 绘制图片
var img = new Image();
img.src = 'path_to_image.jpg'; // 替换为图片路径
img.onload = function() {
    ctx.drawImage(img, 20, 60, 80, 80);
}
</script>
 
</body>
</html>

在这个例子中，我们首先获取了页面上的<canvas>元素，并创建了一个2D绘图上下文。接着，我们使用beginPath()和arc()方法绘制了一个圆形，使用fillStyle和fillRect()方法绘制了一个填充的方形，使用moveTo()和lineTo()方法绘制了一条线段，并使用drawImage()方法加载并绘制了一张图片。这些基本的绘图方法是HTML5 Canvas API的核心组成部分。

HTML5-本地存储浅谈，HTML表单标签

2024-08-17

HTML5提供了一种机制，可以使得网页可以在用户的浏览器中本地保存数据。这就是所谓的“本地存储”。

HTML5本地存储可以分为两种类型：

localStorage - 用于长久保存整个网站的数据，保存的数据没有时间限制。
sessionStorage - 用于临时保存某个网站的数据，在浏览器关闭后会被清除。

这两种方式都可以保存字符串。如果你想保存对象，你需要将对象转换为JSON字符串。

以下是一些使用localStorage和sessionStorage的例子：

使用localStorage保存数据：




<script>
    // 保存数据
    localStorage.setItem("key", "value");
 
    // 读取数据
    var data = localStorage.getItem("key");
    console.log(data); // 输出 "value"
</script>

使用sessionStorage保存数据：




<script>
    // 保存数据
    sessionStorage.setItem("key", "value");
 
    // 读取数据
    var data = sessionStorage.getItem("key");
    console.log(data); // 输出 "value"
</script>

使用localStorage保存对象：




<script>
    // 将对象转换为JSON字符串
    var obj = {name: "John", age: 30, city: "New York"};
    var objString = JSON.stringify(obj);
 
    // 保存数据
    localStorage.setItem("user", objString);
 
    // 读取数据
    var user = JSON.parse(localStorage.getItem("user"));
    console.log(user.name); // 输出 "John"
</script>

HTML表单标签是用于收集用户输入数据的，例如：文本输入框、密码输入框、单选按钮、复选框、下拉列表等。

以下是一些HTML表单标签的例子：

文本输入框：




<form>
  First name: <input type="text" name="firstname"><br>
  Last name: <input type="text" name="lastname">
</form>

密码输入框：




<form>
  Username: <input type="text" name="username">
  Password: <input type="password" name="password">
</form>

单选按钮：




<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
</form>

复选框：




<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
</form>

下拉列表：




<form>
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
</form>

以上就是HTML5本地存储和表单标签的一些基本使用方法。

HTML5——Canvas 高级操作

2024-08-17




<!DOCTYPE html>
<html>
<head>
    <title>Canvas 高级操作</title>
    <script type="text/javascript">
        function draw() {
            var canvas = document.getElementById('simpleCanvas');
            if (!canvas.getContext) {
                return;
            }
 
            var ctx = canvas.getContext('2d');
 
            // 创建线性渐变
            var grd = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
            grd.addColorStop(0, 'black');
            grd.addColorStop(1, 'white');
 
            // 填充渐变
            ctx.fillStyle = grd;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
 
            // 绘制圆形
            ctx.beginPath();
            ctx.arc(70, 70, 50, 0, 2 * Math.PI);
            ctx.fillStyle = 'green';
            ctx.fill();
 
            // 绘制图片
            var img = new Image();
            img.src = 'image.png';
            img.onload = function() {
                ctx.drawImage(img, 10, 10, 100, 100);
            };
 
            // 绘制带样式的文本
            ctx.font = '30px Arial';
            ctx.fillStyle = 'blue';
            ctx.textAlign = 'center';
            ctx.fillText('Hello Canvas', canvas.width / 2, canvas.height / 2);
 
            // 绘制路径
            ctx.beginPath();
            ctx.moveTo(70, 140);
            ctx.bezierCurveTo(70, 100, 300, 100, 300, 140);
            ctx.strokeStyle = 'red';
            ctx.stroke();
        }
    </script>
</head>
<body onload="draw();">
    <canvas id="simpleCanvas" width="400" height="400">
        您的浏览器不支持Canvas，请更换浏览器后再试。
    </canvas>
</body>
</html>

这段代码在页面加载完成后会执行draw函数，该函数会在一个canvas元素中完成以下操作：创建线性渐变、填充渐变；绘制一个圆形；加载并绘制一张图片；绘制带样式的文本；绘制一条带有贝塞尔曲线的路径。这些操作是HTML5 Canvas API的常用高级用法，对于开发复杂的图形界面有很好的教育意义。

2024-08-17




<?php
// 假设以下函数用于检查请求参数是否存在于数据库中
function check_db_for_param($param) {
    // 伪代码，不代表真实实现
    // 应该使用参数化查询或WordPress的内置函数来避免SQL注入
    global $wpdb;
    $result = $wpdb->get_results("SELECT * FROM table_name WHERE column_name = '{$param}'");
    return $result;
}
 
// 假设以下函数用于处理视频播放请求
function handle_video_request($video_id) {
    // 伪代码，不代表真实实现
    // 应该对$video_id进行验证和清理
    $video_info = check_db_for_param($video_id);
    if ($video_info) {
        // 视频信息存在于数据库中，继续处理视频播放逻辑
    } else {
        // 视频信息不存在，可能是SQL注入攻击
        // 应该返回错误或重定向到错误页面
    }
}
 
// 假设以下函数用于处理用户请求
function process_user_request() {
    $video_id = $_GET['video_id'];
    handle_video_request($video_id);
}
 
// 调用函数处理用户请求
process_user_request();
?>

这个代码示例展示了如何通过使用参数化查询或WordPress提供的安全函数来避免SQL注入攻击。在handle_video_request函数中，它调用了check_db_for_param函数，而后者使用了不安全的直接字符串拼接。在这个示例中，我们假设$video_id是通过用户的请求获取的，并可能被用于构造SQL查询。如果用户提供了恶意输入，比如1' OR '1'='1, 那么原始代码中的查询将变成SELECT * FROM table_name WHERE column_name = '1' OR '1'='1'，这将导致SQL注入漏洞。在这个示例中，我们使用了参数化查询的方式来避免这个问题，从而避免了SQL注入攻击的风险。

Web前端105天-day64-HTML5_CORE

2024-08-17

HTML5 是 HTML 的第五次重大修改。它不仅为现代 web 开发提供了一套强大的标签，还引入了新的功能，比如 Canvas 2D 上下文、SVG、地理位置 API、多媒体标签等。

HTML5 的核心特性包括新的语义标签、Canvas 绘图、本地存储、WebSocket 通信等。

以下是一些简单的 HTML5 示例代码：

使用语义化标签：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <header>头部信息</header>
    <nav>导航链接</nav>
    <section>
        <article>
            <header>
                <h1>文章标题</h1>
            </header>
            <p>文章内容...</p>
            <footer>
                <ul>
                    <li>标签1</li>
                    <li>标签2</li>
                </ul>
            </footer>
        </article>
    </section>
    <aside>侧边信息</aside>
    <footer>底部信息</footer>
</body>
</html>

使用 Canvas 绘图：




<!DOCTYPE html>
<html>
<body>
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
        您的浏览器不支持Canvas。
    </canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = '#FF0000';
        ctx.fillRect(0, 0, 150, 75);
    </script>
</body>
</html>

使用本地存储：




<!DOCTYPE html>
<html>
<body>
    <p>点击按钮设置本地存储数据，然后点击获取按钮获取数据。</p>
    <button onclick="setLocalStorage()">设置本地存储数据</button>
    <button onclick="getLocalStorage()">获取本地存储数据</button>
    <p id="demo"></p>
    <script>
        function setLocalStorage() {
            localStorage.setItem('key', 'value');
        }
        function getLocalStorage() {
            var value = localStorage.getItem('key');
            document.getElementById('demo').innerHTML = value;
        }
    </script>
</body>
</html>

使用 WebSocket：




<!DOCTYPE html>
<html>
<body>
    <button onclick="connectWebSocket()">连接WebSocket</button>
    <button onclick="sendMessage()">发送消息</button>
    <p id="demo"></p>
    <script>
        var ws = new WebSocket('ws://localhost:8080');
        ws.onopen = function() {
            console.log('连接已打开...');
        };
        ws.onmessage = function(event) {
            console.log('收到消息: ' + event.data);
            document.getElementById('demo').innerHTML = event.data;
        };
        ws.onclose = function() {
            console.log('连接已关闭...');
        };
        function connectWebSocket() {
            // 连接到WebSocket服务器
        }
        function sendMessage() {
            // 发送消

html5 canvas实现雷达扫描动画特效

2024-08-17




<!DOCTYPE html>
<html>
<head>
    <title>雷达扫描动画</title>
    <style>
        canvas {
            background-color: #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const centerX = canvas.width / 2;
        const centerY = canvas.height / 2;
        const radius = 150;
        let angle = 0;
 
        function drawRadar() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
 
            // 绘制雷达主体
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
            ctx.strokeStyle = 'white';
            ctx.stroke();
 
            // 绘制扫描的扇形区域
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, (2 * Math.PI / 360) * angle, (2 * Math.PI / 360) * (angle + 30), false);
            ctx.lineWidth = 10;
            ctx.strokeStyle = 'white';
            ctx.stroke();
 
            // 更新扫描角度
            angle += 1;
            if (angle > 360) {
                angle = 0;
            }
        }
 
        setInterval(drawRadar, 100); // 每100毫秒调用一次drawRadar函数
    </script>
</body>
</html>

这段代码使用HTML5 <canvas>元素创建了一个简单的雷达扫描动画。drawRadar函数被定时调用，以便不断更新雷达扫描的角度，从而形成动画效果。代码中使用了setInterval函数来实现定时器，并通过清除画布(clearRect)和重绘画布(arc)来创建动画。

2024-08-17

由于Python、JavaScript和Java不是常用于创建小游戏的语言，我们选择一个更加适合创建小游戏的语言，例如Ruby或者使用一个游戏开发框架，如PyGame（Python）。

以下是使用Python和PyGame库创建简单小游戏的例子：




import pygame
import sys
 
# 初始化pygame
pygame.init()
 
# 设置窗口大小
screen = pygame.display.set_mode((640, 480))
 
# 设置窗口标题
pygame.display.set_caption('Simple Game')
 
# 加载图片
player_image = pygame.image.load('player.png')
 
# 游戏主循环
running = True
while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
 
    # 在屏幕上绘制图像
    screen.blit(player_image, (100, 100))
 
    # 更新屏幕显示
    pygame.display.flip()
 
# 结束pygame
pygame.quit()
sys.exit()

在这个例子中，我们创建了一个简单的游戏，其中包括了游戏循环和图像的加载和显示。这个例子是一个很好的起点，可以通过添加更多的功能，如游戏逻辑、碰撞检测等，来创建一个完整的小游戏。

HTML5 ＜video＞播放普通MP4究竟算不算流媒体协议实现？

2024-08-17

HTML5 <video> 元素支持直接播放本地或者网络上的MP4文件，这种情况下并不需要使用流媒体服务器或流媒体协议。所以，回答你的问题，使用HTML5 <video> 元素播放普通MP4文件不算流媒体协议的实现。

如果你想要通过HTML5 <video> 元素播放网络上的视频流，那么你需要使用支持流媒体协议的视频格式，如HLS (HTTP Live Streaming) 或 DASH (Dynamic Adaptive Streaming over HTTP)，并且通常需要一个流媒体服务器来分发这些视频流。

以下是一个简单的HTML5 <video> 元素使用例子，用于播放本地或网络上的MP4文件：




<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

在这个例子中，movie.mp4 可以是网络上的一个文件，只要你的网页有权限访问这个文件。如果是本地文件，路径应该是相对于HTML页面的路径。