分类前端技术下的文章

2024-08-15

在CSS中，选择器是一种模式，用于选择需要应用样式规则的元素。下面是一些常用的CSS选择器：

类选择器（Class Selector）：用于选择具有指定class的元素。




.my-class {
  color: red;
}

ID选择器（ID Selector）：用于选择具有指定ID的单个元素。




#my-id {
  color: blue;
}

元素选择器（Element Selector）：用于选择指定类型的元素。




p {
  font-size: 16px;
}

属性选择器（Attribute Selector）：用于选择包含特定属性的元素，或者特定属性值的元素。




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

伪类选择器（Pseudo-class Selector）：用于选择处于特定状态的元素。




a:hover {
  text-decoration: underline;
}

伪元素选择器（Pseudo-element Selector）：用于选择元素的特定部分。




p::first-letter {
  font-size: 200%;
}

子代选择器（Child Selector）：用于选择指定父元素的直接子元素。




div > p {
  color: green;
}

相邻选择器（Adjacent Sibling Selector）：用于选择紧跟在另一个元素后的元素，且两者有相同父元素。




h1 + p {
  margin-top: 0;
}

后代选择器（Descendant Selector）：用于选择指定父元素的后代（不仅限于直接子元素）。




div p {
  color: purple;
}

通配选择器（Universal Selector）：选择页面上的所有元素。




* {
  margin: 0;
  padding: 0;
}

选择器可以结合使用，以提供更具体的选择规则。例如，结合类选择器和属性选择器：




input.user-input[type="text"] {
  background-color: orange;
}

以上代码选择所有具有user-input类并且type属性为text的input元素，并应用背景颜色为橙色的样式。

- 阅读更多 -

利用canvas给图片添加水印

System

2024-08-15

所有,html5

要在图片上添加水印，可以使用HTML5的canvas元素。以下是一个简单的示例，演示如何在图片上添加文字水印：




<!DOCTYPE html>
<html>
<body>
 
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element.
</canvas>
 
<script>
// 获取canvas元素
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
 
// 加载图片
var img = new Image();
img.onload = function() {
    // 在图片加载完毕后，绘制图片
    ctx.drawImage(img, 0, 0);
    
    // 添加水印文字
    ctx.font = '20px Arial';
    ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 半透明红色文字
    ctx.fillText('Watermark', 50, 100); // 在图片上的坐标(50,100)处添加水印文字
};
img.src = 'path_to_your_image.jpg'; // 替换为你的图片路径
</script>
 
</body>
</html>

在这个例子中，我们首先创建了一个canvas元素，然后使用JavaScript加载一个图片。图片加载完成后，我们在canvas上绘制这个图片，然后使用fillText方法添加水印文字。可以通过调整fillStyle属性来改变水印的颜色和透明度，以及通过font属性来调整文字的大小和字体。

- 阅读更多 -

js-判断输入值是不是数字、字符串

System

2024-08-15

所有,html5

在JavaScript中，可以使用typeof运算符来判断输入值是否为数字或字符串。




function isNumber(value) {
    return typeof value === 'number' && !isNaN(value);
}
 
function isString(value) {
    return typeof value === 'string';
}
 
// 示例
console.log(isNumber(123)); // true
console.log(isNumber('123')); // false
console.log(isString('hello')); // true
console.log(isString(123)); // false

请注意，typeof 对于 NaN、数组、null 等特殊值会有不同的结果，如果需要更精确的判断，可能需要额外的逻辑。

- 阅读更多 -

解决layui表格中单元格显示内容过长，鼠标移到上方显示全部内容

System

2024-08-15

所有,html5

在Layui的表格（table）组件中，如果单元格内容过长，可以通过设置CSS样式来实现鼠标悬停时显示完整内容。

以下是实现这一功能的CSS样式和Layui表格的初始化代码示例：

CSS样式：




/* 设置单元格内容超过一定长度时显示省略号 */
.layui-table-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
 
/* 鼠标悬停时显示完整内容 */
.layui-table-cell:hover {
    overflow: visible;
    white-space: normal;
    text-overflow: inherit;
}

Layui表格初始化代码：




layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#your-table-id' // 指定表格元素选择器
    ,cols: [[ // 列设置
      // ... 其他列设置
      {field:'your-field-name', title: '单元格名称', width: 200} // 单元格对应的字段名和标题
    ]]
    // ... 其他设置
  });
});

在这个例子中，.layui-table-cell 是表格单元格的默认类名，可以根据实际情况进行调整。通过设置 overflow: hidden 和 text-overflow: ellipsis，可以在单元格内容过长时显示省略号。当鼠标悬停在单元格上时，通过设置 overflow: visible，white-space: normal 和 text-overflow: inherit，可以显示完整内容。

- 阅读更多 -

H5 画布（canvas）的使用、元素的拖拽

System

2024-08-15

所有,html5




<!DOCTYPE html>
<html>
<head>
    <title>Canvas 拖拽元素示例</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        var dragging = false;
        var rect = {
            x: 100,
            y: 100,
            width: 100,
            height: 100
        };
 
        function drawRect() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();
            ctx.rect(rect.x, rect.y, rect.width, rect.height);
            ctx.fillStyle = 'blue';
            ctx.fill();
            ctx.stroke();
        }
 
        canvas.addEventListener('mousedown', function(e) {
            var x = e.offsetX;
            var y = e.offsetY;
            if (x > rect.x && y > rect.y &&
                x < rect.x + rect.width && y < rect.y + rect.height) {
                dragging = true;
            }
        });
 
        canvas.addEventListener('mouseup', function() {
            dragging = false;
        });
 
        canvas.addEventListener('mousemove', function(e) {
            if (dragging) {
                rect.x = e.offsetX - rect.width / 2;
                rect.y = e.offsetY - rect.height / 2;
                drawRect();
            }
        });
 
        drawRect();
    </script>
</body>
</html>

这段代码创建了一个简单的画布，并在其中绘制了一个蓝色的矩形。通过鼠标拖拽矩形的任意位置，可以移动这个矩形。代码中使用了addEventListener来监听鼠标事件，并在相应的事件处理函数中更新矩形位置和重绘画布。这是一个基本的拖拽示例，但不包括边界检查或更复杂的交互逻辑。

- 阅读更多 -

input框左边有固定小图标的写法

System

2024-08-15

所有,html5

要在input框的左边添加一个固定的小图标，可以使用CSS的background属性或者使用一个相邻的<span>元素来实现。以下是两种方法的示例代码：

方法1：使用背景图像

HTML:




<div class="input-container">
  <input type="text" class="input-with-icon" placeholder="Search...">
</div>

CSS:




.input-container {
  position: relative;
}
 
.input-with-icon {
  padding-left: 30px; /* 使input内容与图标有间隔 */
  background: url('path-to-your-icon.png') no-repeat;
  background-size: 20px; /* 根据图标大小调整 */
  background-position: left center; /* 定位图标 */
  background-repeat: no-repeat;
}

方法2：使用相邻的<span>元素

HTML:




<div class="input-container">
  <span class="icon"></span>
  <input type="text" class="input-with-icon" placeholder="Search...">
</div>

CSS:




.input-container {
  position: relative;
}
 
.icon {
  position: absolute;
  left: 5px; /* 或者你需要的间距 */
  top: 50%;
  transform: translateY(-50%);
  background: url('path-to-your-icon.png') no-repeat;
  background-size: 20px; /* 根据图标大小调整 */
  height: 20px; /* 根据图标大小调整 */
  width: 20px; /* 根据图标大小调整 */
}
 
.input-with-icon {
  padding-left: 30px; /* 使input内容与图标有间隔，这个值应该等于或大于图标宽度 */
}

这两种方法都可以实现在input框的左侧添加一个固定小图标的效果。选择哪种方法取决于你的具体需求和个人喜好。

- 阅读更多 -

如何去除input标签的默认样式

System

2024-08-15

所有,html5

要去除input标签的默认样式，可以通过CSS对其进行重置。以下是一些常用的CSS属性，可以用来去除或覆盖默认的input样式：




input {
    background: none;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    font-size: 16px; /* 根据需要设置字体大小 */
    color: currentColor; /* 根据需要设置字体颜色 */
}
 
/* 针对WebKit内核浏览器的伪元素去除默认的外边距和样式 */
input::-webkit-input-placeholder {
    color: transparent;
}
 
input:-moz-placeholder { /* Firefox 18- */
    color: transparent;
}
 
input::-moz-placeholder { /* Firefox 19+ */
    color: transparent;
}
 
input:-ms-input-placeholder {
    color: transparent;
}

以上CSS代码将input的背景、边框、外边距、内填充、字体颜色以及占位符文本颜色设置为透明或者自定义的颜色和大小。这样就可以去除或修改大多数浏览器默认的input样式。如果需要对其他浏览器特有的伪元素进行样式重置，也可以在相应的伪元素中添加相应的CSS规则。

- 阅读更多 -

HTML/HTML5常用标签大全

System

2024-08-15

所有,html5

HTML/HTML5常用标签大全：

<!DOCTYPE html>：定义文档类型为HTML5。
<html>：HTML文档的根元素。
<head>：包含了文档的元数据，如<title>、<meta>、<link>等。
<title>：定义了文档的标题，显示在浏览器的标题栏或者页面的选项卡上。
<body>：包含了页面的主要内容，如文本、图像、视频等。
<h1>至<h6>：定义了标题的级别，<h1>最重要，<h6>最不重要。
<p>：定义了一个段落。
<div>：定义了一个块级元素，用于组合其他HTML元素的容器。
<span>：定义了一个行内元素，用于组合文档中的小块内容。
<img>：定义了一个图像，src属性指定图像的路径，alt属性提供了图像的文本替代。
<a>：定义了一个超链接，href属性指定链接的目标地址。
<ul>：定义了无序列表，每个列表项以<li>开始。
<ol>：定义了有序列表，每个列表项以<li>开始。
<li>：定义了列表中的一个项目。
<table>：定义了一个表格。
<tr>：定义了表格中的一行。
<td>：定义了表格中的一个单元格。
<form>：定义了一个表单，用于用户输入。
<input>：定义了用户输入的字段，type属性定义了输入类型（如text、radio、submit等）。
<textarea>：定义了多行文本输入控件。
<select>：定义了下拉选择菜单，使用<option>定义选项。
<button>：定义了一个按钮。
<iframe>：定义了一个内联框架，用于嵌入另一个HTML页面。

示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
</head>
<body>
    <h1>欢迎来到我的主页</h1>
    <p>这是一个段落。</p>
    <img src="image.jpg" alt="示例图片">
    <a href="https://www.example.com">点击访问我的网站</a>
    <ul>
        <li>列表项一</li>
        <li>列表项二</li>
    </ul>
    <table>
        <tr>
            <td>单元格一</td>
            <td>单元格二</td>
        </tr>
    </table>
    <form action="/submit">
        <input type="text" placeholder="输入名字">
        <input type="submit" value="提交">
    </form>
    <iframe src="otherpage.html" width="600" height="400"></iframe>
</body>
</html>

以上代码提供了HTML的基本结构和一些常用标签的使用示例。

- 阅读更多 -

Html5实用个人博客留言板模板源码

System

2024-08-15

所有,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; }
        form { width: 500px; margin: 20px auto; }
        form h2 { text-align: center; }
        form input[type="text"], form textarea { width: 100%; padding: 8px; margin: 8px 0; border: 1px solid #ccc; }
        form button { width: 100%; padding: 10px; margin-top: 10px; background-color: #5cb85c; border: none; color: white; }
    </style>
</head>
<body>
    <form action="submit_message.php" method="post">
        <h2>留言板</h2>
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" required><br>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" required><br>
        <label for="message">留言:</label>
        <textarea id="message" name="message" required></textarea><br>
        <button type="submit">提交</button>
    </form>
</body>
</html>

这个模板包含了一个简单的Html5文档，使用了CSS来进行样式设置。留言板包括姓名、邮箱和留言文本框，以及一个提交按钮。请注意，留言数据应该通过PHP脚本或其他服务器端语言进行处理，这里的action="submit_message.php"表明了提交动作应该发送到一个名为submit_message.php的服务器端脚本。

- 阅读更多 -

基于websocket+Redis的实时聊天系统

System

2024-08-15

所有,html5

以下是一个简单的基于websocket和Redis的实时聊天系统的Python示例代码。

首先，安装必要的库：




pip install channels==3.0.4 django==3.1.5 redis==3.5.3

在你的Django项目的settings.py中添加以下配置：




# settings.py
 
INSTALLED_APPS = [
    # ...
    'channels',
    'chat',  # 假设你的应用名为chat
]
 
# Channel layer settings
CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels_redis.core.RedisChannelLayer',
        'CONFIG': {
            "hosts": [('127.0.0.1', 6379)],
        },
    },
}

在你的应用目录中创建routing.py文件，并添加以下内容：




# chat/routing.py
 
from channels.routing import ProtocolTypeRouter, URLRouter
from django.urls import path
from .consumers import chat_consumer
 
websocket_urlpatterns = [
    path('ws/chat/', chat_consumer),
]
 
channel_routing = ProtocolTypeRouter({
    "websocket": URLRouter(websocket_urlpatterns),
})

在你的应用目录中创建consumers.py文件，并添加以下内容：




# chat/consumers.py
 
import json
from channels.generic.websocket import AsyncWebsocketConsumer
from asgiref.sync import async_to_sync
 
class ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        await self.channel_layer.group_add('chat', self.channel_name)
        await self.accept()
 
    async def disconnect(self, close_code):
        await self.channel_layer.group_discard('chat', self.channel_name)
 
    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']
 
        await self.channel_layer.group_send(
            'chat',
            {
                'type': 'chat_message',
                'message': message,
            }
        )
 
    async def chat_message(self, event):
        message = event['message']
        await self.send(text_data=json.dumps({
            'message': message
        }))

在你的主urls.py文件中导入和添加websocket路由：




# your_project/urls.py
 
from django.urls import path, include
 
urlpatterns = [
    # ...
    path('ws/', include('chat.routing')),
]

这个简单的聊天系统使用了Django Channels库，通过websocket和Redis来实现实时通信。当WebSocket连接建立时，客户端被加入到名为'chat'的群组中。发送的消息被群组中的所有客户端接收。

- 阅读更多 -