System 发布的文章

情人节程序员用HTML网页表白【七夕烟花】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

2024-08-08

以下是一个简单的HTML和CSS代码示例，用于创建一个表白页面，模仿烟花绽放的视觉效果：




<!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, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
  }
 
  .fireworks {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100px;
    height: 100px;
    background: #f00;
    border-radius: 50%;
    opacity: 0;
    animation: fireworks-animation 2s infinite;
  }
 
  @keyframes fireworks-animation {
    0% {
      opacity: 0;
      transform: translateX(-50%) translateY(-50%) scale(0.5);
    }
    100% {
      opacity: 1;
      transform: translateX(-50%) translateY(-50%) scale(1);
    }
  }
</style>
</head>
<body>
<div class="fireworks"></div>
<script>
  function createFirework() {
    const firework = document.createElement('div');
    firework.classList.add('fireworks');
    document.body.appendChild(firework);
    setTimeout(() => {
      firework.remove();
    }, 2000);
  }
 
  setInterval(createFirework, 1000);
</script>
</body>
</html>

这段代码通过CSS创建了一个简单的火焰图案，通过JavaScript定时创建火焰图案的效果，模拟烟花在空中飘落的视觉效果。这个示例可以作为表白页面的一个简单的视觉娱乐，但是要注意，应该尊重对方的感受，不要给不喜欢这种表白方式的人带来不愉快。

- 阅读更多 -

Markdown中的表格如何合并单元格以及如何换行

System

2024-08-08

所有,html5

在Markdown中，要合并单元格，可以使用|来分隔单元格内容，并在要合并的单元格前加上:来指示合并的方向。例如，要合并两行中的两个单元格，可以使用||。

合并两个水平相邻的单元格（横向合并）：




| 单元格1 | 单元格2 | 单元格3 || :------ | ------: | ------: |
| 单元格4 | 单元格5 | 单元格6 |

合并两个垂直相邻的单元格（纵向合并）：




| 单元格1 | 单元格2 | 单元格3 |
| :------ | :------: | ------: |
| 单元格4 | 单元格5 | 单元格6 |

要在Markdown中换行，可以使用<br>标签。但是在表格中直接使用<br>不会生成预期的效果，因为Markdown解析器会将其视为普通文本。为了在表格中换行，可以通过在单元格内部使用多个空行来实现。

例如：




| 单元格1 | 单元格2 |
| ------- | ------- |
| 文本内容可以通过在其之间插入多个空行实现换行。 |

在单元格内部要换行，只需要在文本内容中添加多个空行即可。请注意，Markdown处理多个连续空行的方式可能因解析器而异，但通常第一个空行将触发换行效果。

- 阅读更多 -

HTML5引入element

System

2024-08-08

所有,html5

HTML5 引入了新的元素，这些元素不仅提供了更好的语义，还有助于改善搜索引擎优化（SEO）和屏幕阅读器的访问。

以下是一些常见的HTML5新元素：

<header> - 表示页面或页面中一个区块的头部区域。
<nav> - 表示页面中导航链接的部分。
<section> - 表示文档中的一个区块，比如章节、头部或内容。
<article> - 表示文档中独立的、完整的内容。
<aside> - 表示与页面主内容少关的内容。
<footer> - 表示页面或页面中一个区块的底部区域。

使用这些元素的例子：




<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
</head>
<body>
    <header>
        <h1>我的网站</h1>
        <nav>
            <ul>
                <li><a href="/home">主页</a></li>
                <li><a href="/about">关于</a></li>
                <li><a href="/contact">联系</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <article>
            <header>
                <h2>文章标题</h2>
            </header>
            <p>这里是文章的内容...</p>
            <footer>
                <p>这里是文章的脚注...</p>
            </footer>
        </article>
    </section>
    <aside>
        <p>这里是侧边栏内容...</p>
    </aside>
    <footer>
        <p>版权所有 © 2023 我的网站</p>
    </footer>
</body>
</html>

这段代码展示了如何在HTML5中使用这些新的语义元素来构建一个典型页面的结构。这有助于改善页面的可访问性和可读性，同时也有助于搜索引擎更好地理解页面内容。

- 阅读更多 -

HTML5新手入门指南，源码解读-别再说你不知道HashMap原理

System

2024-08-08

所有,html5




<!DOCTYPE html>
<html>
<head>
    <title>HashMap 示例</title>
    <script>
        // 定义 HashMap 类
        class HashMap {
            constructor() {
                this.storage = {};
                this.count = 0;
            }
 
            // 添加键值对
            set(key, value) {
                if (!this.storage.hasOwnProperty(key)) {
                    this.count++;
                }
                this.storage[key] = value;
            }
 
            // 获取指定键的值
            get(key) {
                return this.storage.hasOwnProperty(key) ? this.storage[key] : undefined;
            }
 
            // 移除指定键
            remove(key) {
                if (this.storage.hasOwnProperty(key)) {
                    delete this.storage[key];
                    this.count--;
                }
            }
 
            // 获取 HashMap 的大小
            get size() {
                return this.count;
            }
 
            // 清空 HashMap
            clear() {
                this.storage = {};
                this.count = 0;
            }
        }
 
        // 使用 HashMap
        const map = new HashMap();
        map.set('name', 'Alice');
        map.set('age', 25);
        console.log(map.get('name')); // 输出: Alice
        console.log(map.size); // 输出: 2
        map.remove('name');
        console.log(map.get('name')); // 输出: undefined
        console.log(map.size); // 输出: 1
    </script>
</head>
<body>
    <h1>HashMap 示例</h1>
</body>
</html>

这段代码定义了一个简单的 HashMap 类，并展示了如何使用它来添加、获取、移除键值对，以及获取 HashMap 的大小。这个实现没有提供哈希碰撞解决或加载因子的处理，但足以作为一个基本示例来教学。

- 阅读更多 -

threejs基础案例之十：模拟点击事件

System

2024-08-08

所有,html5




// 假设我们已经有了threejs的基础场景和一个名为`mesh`的网格对象
 
// 创建鼠标位置对象，用于存储鼠标位置信息
var mouse = new THREE.Vector2();
 
// 监听鼠标点击事件
function onMouseClick(event) {
    // 将浏览器的2D坐标转换为three.js的标准设备坐标(-1到+1)
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 
    // 更新鼠标位置对象
    raycaster.setFromCamera(mouse, camera);
 
    // 计算鼠标当前位置的所有物体
    var intersects = raycaster.intersectObjects(scene.children);
 
    // 如果存在交点
    if (intersects.length > 0) {
        // 取得最近的交点
        var intersect = intersects[0];
 
        // 如果交点的对象是我们之前定义的mesh
        if (intersect.object == mesh) {
            // 执行模型的某些动作，比如旋转等
            // 例如，旋转模型
            mesh.rotation.x += 0.1;
            mesh.rotation.y += 0.1;
        }
    }
}
 
// 为window添加点击事件监听
window.addEventListener('click', onMouseClick, false);
 
// 注意：以上代码仅作为示例，实际使用时需要结合实际的Three.js场景和对象。

这段代码首先定义了一个鼠标位置对象mouse，用于存储鼠标在屏幕上的位置。然后定义了一个onMouseClick函数，该函数将在用户点击窗口时被调用。在这个函数中，我们更新鼠标位置对象，并使用raycaster来检测鼠标点击位置上是否有物体，如果有，则执行相应的动作，比如旋转模型。最后，我们为window添加了点击事件的监听。

- 阅读更多 -

html5：webSocket 基础使用

System

2024-08-08

所有,html5




<!DOCTYPE html>
<html>
<head>
    <title>WebSocket 基础使用</title>
    <script type="text/javascript">
    function init() {
        output = document.getElementById('output');
        output.innerHTML = '连接中...';
        
        // 创建WebSocket实例，指定服务器地址和端口
        ws = new WebSocket('ws://localhost:8181');
        
        // 监听WebSocket的打开事件
        ws.onopen = function(evt) { 
            output.innerHTML = '已连接'; 
        };
        
        // 监听WebSocket的消息事件
        ws.onmessage = function(evt) {
            output.innerHTML += '<br>收到消息: ' + evt.data;
        };
        
        // 监听WebSocket的错误事件
        ws.onerror = function(evt) {
            output.innerHTML += '<br>发生错误'; 
        };
        
        // 监听WebSocket的关闭事件
        ws.onclose = function(evt) {
            output.innerHTML += '<br>连接已关闭'; 
        };
    }
    
    // 发送消息的函数
    function sendMessage() {
        var message = document.getElementById('message').value;
        ws.send(message);
    }
    </script>
</head>
<body onload="init();">
    <h1>WebSocket 实例</h1>
    <div id="output"></div>
    <input type="text" id="message" value="Hello, WebSocket!">
    <button onclick="sendMessage()">发送消息</button>
</body>
</html>

这段代码展示了如何在一个HTML页面中使用JavaScript来初始化一个WebSocket连接，并且提供了简单的接口来发送和接收消息。代码中包含了对WebSocket生命周期中常见事件的监听和处理：打开、接收消息、错误以及关闭连接。

- 阅读更多 -

HTML5基本语法大全

System

2024-08-08

所有,html5

HTML5是HTML的最新标准，它的基础语法主要包括以下几个部分：

文档类型声明：




<!DOCTYPE html>

页面的开始和结束标签：




<html>
    <head>
        <!-- 页面的元数据和标题 -->
        <title>页面标题</title>
    </head>
    <body>
        <!-- 页面内容 -->
        <h1>这是一个标题</h1>
        <p>这是一个段落。</p>
    </body>
</html>

元素的属性：




<!-- 例如，为图片添加alt属性 -->
<img src="image.jpg" alt="描述文字">

注释：




<!-- 这是一个注释 -->

标题：




<h1>最重要的标题</h1>
<h2>次重要的标题</h2>
<!-- 以此类推，h3, h4, h5, h6 -->

段落和换行：




<p>这是一个段落。</p>
<br> <!-- 换行 -->

文本格式化标签：




<strong>粗体文本</strong>
<em>斜体文本</em>
<del>被删除的文本</del>
<ins>被插入的文本</ins>

链接：




<a href="https://www.example.com">链接到example.com</a>

图片：




<img src="image.jpg" alt="描述文字">

列表：




<!-- 有序列表 -->
<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>
 
<!-- 无序列表 -->
<ul>
    <li>第一项</li>
    <li>第二项</li>
</ul>
 
<!-- 定义列表 -->
<dl>
    <dt>项目 1</dt>
    <dd>描述 1</dd>
    <dt>项目 2</dt>
    <dd>描述 2</dd>
</dl>

表格：




<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
    </tr>
</table>

表单和输入：




<form action="/submit" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="username">
    <input type="submit" value="提交">
</form>

帧（iframe）：




<iframe src="page.html" name="iframe_name"></iframe>

视频和音频：




<!-- 视频 -->
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持视频标签。
</video>
 
<!-- 音频 -->
<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  您的浏览器不支持音频元素。
</audio>

Canvas绘图：




<canvas id="myCanvas" width="200" height="100">
  您的浏览器不支持Canvas。

System

2024-08-08

所有,html5

HTML5引入了一些新的input类型，使得表单的创建更加方便和有效。这些新的input类型包括：

number - 允许用户输入数字。
range - 允许用户从指定范围内选择一个值。
email - 强制输入格式为电子邮件的文本。
color - 允许用户选择颜色。
date - 允许用户选择日期。

以下是这些新input类型的基本用法示例：




<form>
  <!-- 数字输入 -->
  <input type="number" name="quantity" min="1" max="5" step="1" value="1">
 
  <!-- 滑块输入 -->
  <input type="range" name="points" min="0" max="10" step="1" value="5">
 
  <!-- 电子邮件输入 -->
  <input type="email" name="email" required>
 
  <!-- 颜色选择器 -->
  <input type="color" name="color">
 
  <!-- 日期选择器 -->
  <input type="date" name="birthday">
 
  <input type="submit">
</form>

这些新的input类型提供了原生的输入验证和格式化，使得表单的处理更加直观和方便。

- 阅读更多 -

html5实现端午节网站

System

2024-08-08

所有,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;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .container {
            text-align: center;
            padding: 20px;
        }
        h1 {
            color: #58bc58;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎来到端午节网站</h1>
        <p>这里有关于端午节的信息和传统活动。</p>
        <!-- 添加图片、视频或其他内容 -->
    </div>
</body>
</html>

这个模板使用了简单的HTML结构和内联CSS样式来创建一个简洁的端午节主题网页。你可以根据需要添加图片、视频、文字内容等来丰富这个网站。

- 阅读更多 -

【CSS3】平面转换空间转换动画

System

2024-08-08

所有,html5

在CSS3中，平面转换主要是通过transform属性中的translate, rotate, scale和skew函数来实现的。而空间转换则是通过perspective属性来实现。动画则可以通过@keyframes规则和animation属性来实现。

以下是一个简单的示例，展示了如何使用这些技术：




/* 定义动画 */
@keyframes spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}
 
/* 应用动画到元素 */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 50px;
  perspective: 1000px; /* 设置3D空间转换的视角 */
  animation: spin 2s linear infinite; /* 使用动画 */
}
 
/* 在鼠标悬停时，停止旋转 */
.box:hover {
  animation-play-state: paused;
}




<div class="box"></div>

在这个例子中，.box元素在3D空间中旋转，动画通过perspective创建一个3D效果，并且通过animation应用无限循环的旋转动画。当鼠标悬停在元素上时，动画会停止。

- 阅读更多 -