Tech Blog

HTML星空特效

2024-08-13

HTML 星空特效可以通过CSS和JavaScript实现。以下是一个简单的HTML页面示例，展示了如何创建星空背景：




<!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 {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .stars {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .star {
    position: absolute;
    top: 0;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 
      #fff 0 0 1px,
      #fff 0 0 2px,
      #fff 0 0 3px,
      #fff 0 0 4px,
      #fff 0 0 5px,
      #fff 0 0 6px,
      #fff 0 0 7px,
      #fff 0 0 8px,
      #fff 0 0 9px,
      #fff 0 0 10px;
    animation: twinkle 1s infinite alternate ease-in-out;
  }
  @keyframes twinkle {
    0% { opacity: .5; }
    100% { opacity: 1; }
  }
</style>
</head>
<body>
<div class="stars">
  <div class="star"></div>
  <!-- 可以添加多个.star来增加星星数量 -->
</div>
 
<script>
  const stars = document.querySelectorAll('.star');
  const numStars = stars.length;
 
  function init() {
    c.height = window.innerHeight;
    c.width = window.innerWidth;
    for (let i = 0; i < numStars; i++) {
      stars[i].style.left = Math.random() * window.innerWidth + 'px';
      stars[i].style.top = Math.random() * window.innerHeight + 'px';
    }
  }
 
  window.onresize = init;
 
  init();
</script>
</body>
</html>

这段代码通过CSS创建了一个星光的样式，并通过JavaScript随机分配给每个星星。窗口大小改变时，星星位置也会重新计算并调整。这是一个简单的示例，你可以根据需要增加更多的复杂性，比如添加不同大小和颜色的星星，或者使用WebGL来创建更真实的星空效果。

- 阅读更多 -

【HTML】html纯常用代码

System

2024-08-13

所有,html

HTML 是用于创建网页的标准标记语言。以下是一些常用的 HTML 标签的示例代码：

基本页面结构：




<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <a href="http://www.example.com">这是一个链接</a>
</body>
</html>

图像插入：




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

创建列表：

无序列表：




<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>

有序列表：




<ol>
    <li>列表项1</li>
    <li>列表项2</li>
</ol>

表格：




<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

表单和输入控件：




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

视频嵌入：




<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持视频标签。
</video>

这些代码示例涵盖了 HTML 的基本元素，可以根据需要进行扩展和修改。

System

2024-08-13

所有,html

dangerouslyInsertHtml 方法是 WangEditor 富文本编辑器中用于插入任意 HTML 的方法。该方法在 5.0 版本中仍然存在，但是由于插入任意 HTML 可能会带来安全风险，因此方法名称中包含 "dangerously" 这一警告性词汇。在使用时，应确保所插入的 HTML 内容是安全的，以避免 XSS 攻击等安全问题。

以下是一个使用 dangerouslyInsertHtml 方法的示例代码：




// 首先，获取编辑器实例
const editor = new wangEditor('editor-container');
editor.create();
 
// 然后，使用 dangerouslyInsertHtml 方法插入 HTML
// 假设你已经有了安全可信的 HTML 内容
const safeHtmlContent = '<div>安全的 HTML 内容</div>';
editor.dangerouslyInsertHtml(safeHtmlContent);

在实际应用中，你应该确保 safeHtmlContent 是经过严格的过滤和清洗，以确保它不含有可能会执行恶意脚本的标签或属性。如果你插入的 HTML 是用户提供的内容，那么你需要在插入之前对内容进行严格的过滤和清洗，以防止 XSS 攻击。

- 阅读更多 -

Html+QtWeb服务器开发

System

2024-08-13

所有,html

在Qt中使用Html+QtWeb服务器开发，你可以使用Qt的网络模块来创建一个HTTP服务器，并使用Qt的WebEngine模块来提供能够运行HTML和JavaScript的浏览器引擎。以下是一个简单的示例，展示如何设置一个基本的HTTP服务器，并在服务器上提供一个HTML文件：




#include <QCoreApplication>
#include <QTcpServer>
#include <QTcpSocket>
#include <QFile>
#include <QTextStream>
#include <QDebug>
 
class HttpServer : public QTcpServer
{
    Q_OBJECT
public:
    HttpServer(QObject *parent = nullptr) : QTcpServer(parent) {}
 
protected:
    void incomingConnection(qintptr socketDescriptor) override {
        QTcpSocket *socket = new QTcpSocket(this);
        if (!socket->setSocketDescriptor(socketDescriptor)) {
            socket->deleteLater();
            return;
        }
 
        connect(socket, &QTcpSocket::disconnected, socket, &QObject::deleteLater);
        QFile file("index.html");
        if (!file.open(QIODevice::ReadOnly)) {
            qDebug() << "Cannot open file for reading";
            return;
        }
 
        QTextStream out(socket);
        out << "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n";
        out << file.readAll();
        file.close();
        socket->flush();
        socket->close();
    }
};
 
int main(int argc, char *argv[])
{
    QCoreApplication a(argc, argv);
 
    HttpServer server;
    if (!server.listen(QHostAddress::Any, 8080)) {
        qDebug() << "Server could not start";
        return -1;
    }
 
    qDebug() << "Server running on port 8080...";
    return a.exec();
}

在这个例子中，我们创建了一个HttpServer类，它继承自QTcpServer。当有新的连接进入时，它将尝试打开一个名为index.html的文件，并将其内容通过HTTP响应发送回客户端。这个简单的HTTP服务器可以作为开始学习Qt网络编程和Web开发的起点。

请注意，这个代码示例没有处理并发连接、错误处理或HTTP请求解析。在实际应用中，你需要添加这些功能来创建一个健壮的HTTP服务器。

System

2024-08-13

所有,html

HTML中的<table>标签用于创建表格。表格通常由行（<tr>）组成，每行包含单元格（<td>）或表头单元格（<th>）。

表格属性

border：定义表格边框的宽度。
cellpadding：定义单元格内容与单元格边界的距离。
cellspacing：定义单元格之间的距离。
width 和 height：定义表格的宽度和高度。

语义化表格

HTML5推荐使用<thead>、<tbody>、<tfoot>分别代表表格的头部、主体和脚部。

简易表格




<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

合并单元格

使用rowspan合并同一行的单元格，使用colspan合并同一列的单元格。

合并单元格示例




<table border="1">
  <tr>
    <td>1</td>
    <td rowspan="2">2-3</td>
    <td colspan="2">4-5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
  </tr>
</table>

在这个例子中，第一行的第二个单元格跨越2行，第二行的第二个单元格跨越2列。

- 阅读更多 -

【简单html静态网页代码】用HTML+CSS制作一个简单的学校网页(9页)

System

2024-08-13

所有,html

由于原始代码中存在的问题是代码过于冗长和冗余，我们可以使用更简洁的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 {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  header, footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
  }
  nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  nav ul li {
    display: inline;
    margin-right: 10px;
  }
  a {
    color: white;
    text-decoration: none;
  }
  section {
    margin: 10px;
    padding: 20px;
    background-color: #EEE;
  }
  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }
  aside {
    float: right;
    width: 200px;
    background-color: #EEE;
    padding: 10px;
  }
</style>
</head>
<body>
<header>
  <h1>欢迎来到XX学校</h1>
</header>
<nav>
  <ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="about.html">关于我们</a></li>
    <!-- 其他链接 -->
  </ul>
</nav>
<section class="clearfix">
  <article>
    <h2>学校新闻</h2>
    <p>这里是新闻内容...</p>
  </article>
  <aside>
    <h3>活动信息</h3>
    <ul>
      <li>活动1</li>
      <li>活动2</li>
      <!-- 其他活动 -->
    </ul>
  </aside>
</section>
<!-- 其他section内容 -->
<footer>
  <p>版权所有 © XX学校</p>
</footer>
</body>
</html>

这个简化版的代码使用了更现代的CSS语法，并且去除了冗余的结构和样式代码。它使用了<header>, <nav>, <section>, <article>和<aside>等语义化标签来提高代码的可读性和可维护性。同时，它使用了<style>标签内嵌CSS代码，这样可以避免外部CSS文件的引用，使得整个页面可以在一个HTML文件中自给自足。

- 阅读更多 -

js 实现拖拽效果

System

2024-08-13

所有,css3

在JavaScript中实现拖拽效果通常涉及监听鼠标事件并更新元素的位置。以下是一个简单的实现示例：

HTML:




<div id="draggable" style="width: 100px; height: 100px; background: red; position: absolute; cursor: pointer;"></div>

JavaScript:




var dragItem = document.getElementById('draggable');
var active = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
 
dragItem.addEventListener('mousedown', function(event) {
    initialX = event.clientX - xOffset;
    initialY = event.clientY - yOffset;
 
    if (event.target === dragItem) {
        active = true;
    }
});
 
document.addEventListener('mouseup', function() {
    active = false;
});
 
document.addEventListener('mousemove', function(event) {
    if (active) {
        currentX = event.clientX - initialX;
        currentY = event.clientY - initialY;
        
        xOffset = currentX;
        yOffset = currentY;
 
        setTranslate(currentX, currentY, dragItem);
    }
});
 
function setTranslate(xPos, yPos, el) {
    el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}

这段代码实现了一个可拖拽的红色方块。当用户点击方块时，mousedown 事件被触发，并记录下鼠标相对元素位置的偏移量。随后在 mousemove 事件中更新元素的位置。当用户释放鼠标按钮时，mouseup 事件被触发，停止拖拽操作。

- 阅读更多 -

CSS动画实现音频播放时柱状波动效果

System

2024-08-13

所有,css3




/* 定义音频播放时的柱状波动效果样式 */
.audio-wave-effect {
    position: relative;
    height: 100px; /* 波形的高度 */
    background: linear-gradient(to right, #5788fe, #b24592); /* 渐变背景色 */
    overflow: hidden; /* 超出容器部分隐藏 */
}
 
.audio-wave-effect::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 20px; /* 波形的高度 */
    background: linear-gradient(to right, #5788fe, #b24592); /* 渐变背景色 */
    animation: wave-animation 1s infinite; /* 应用波动动画 */
}
 
@keyframes wave-animation {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%); /* 波动范围 */
    }
}

这段代码定义了一个.audio-wave-effect类，它可以被用来创建一个音频播放时的柱状波动效果。::after伪元素用来生成波动的视觉效果，通过@keyframes定义了一个水平方向的波动动画。这个效果可以被应用在音频播放器的视觉表现上，以提升用户体验。

- 阅读更多 -

CSS实现横向滚动-x轴滚动

System

2024-08-13

所有,css3

要在CSS中实现横向滚动，可以使用overflow-x: auto;或overflow-x: scroll;属性，并为需要滚动的内部容器设置一个宽度大于容器本身宽度的宽度。

以下是一个简单的例子：

HTML:




<div class="scroll-container">
  <div class="content">
    <!-- 内容宽度大于.scroll-container的宽度 -->
  </div>
</div>

CSS:




.scroll-container {
  width: 100%; /* 容器宽度 */
  overflow-x: auto; /* 横向滚动条 */
}
 
.content {
  width: 2000px; /* 假设内容宽度很大 */
}

在这个例子中，.scroll-container是需要横向滚动的容器，.content是其中包含内容的子元素。通过设置.content的宽度大于.scroll-container的宽度，当内容宽度超出.scroll-container时，横向滚动条就会出现，允许用户滚动查看全部内容。

- 阅读更多 -

UniApp仿支付宝账单筛选

System

2024-08-13

所有,css3

在UniApp中，假设您需要实现类似支付宝账单筛选的功能，可以通过下面的示例代码来实现：




<template>
  <view class="container">
    <view class="filter-bar">
      <view class="filter" v-for="(item, index) in filters" :key="index">
        <text>{{ item.name }}</text>
        <view class="filter-options">
          <view
            class="option"
            v-for="(option, idx) in item.options"
            :key="idx"
            @click="selectOption(item.name, option)"
          >
            {{ option }}
          </view>
        </view>
      </view>
    </view>
    <!-- 筛选结果展示 -->
    <view class="result">
      <text>筛选结果：</text>
      <text v-for="(value, key) in selected" :key="key">{{ key }}: {{ value }} </text>
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      filters: [
        {
          name: '类型',
          options: ['支出', '收入']
        },
        {
          name: '来源',
          options: ['转账', '转账', '支付']
        },
        // 可以根据需要添加更多筛选项
      ],
      selected: {}
    };
  },
  methods: {
    selectOption(filterName, option) {
      this.selected[filterName] = option;
    }
  }
};
</script>
 
<style>
.container {
  padding: 20px;
}
.filter-bar {
  margin-bottom: 10px;
}
.filter {
  margin-bottom: 10px;
}
.filter-options {
  display: flex;
  flex-wrap: wrap;
}
.option {
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 5px 10px;
  background-color: #f0f0f0;
  border-radius: 5px;
  cursor: pointer;
}
.result {
  margin-top: 10px;
}
</style>

这段代码提供了一个简单的账单筛选示例，包括两个筛选项：“类型”和“来源”。用户可以从每个筛选项的选项列表中选择一个选项，选择后会更新筛选结果。这个示例可以根据需要扩展，添加更多的筛选项和选项。

- 阅读更多 -