System 发布的文章

2024-08-12

在CSS中，"高度塌陷"（Collapsing Margins）是指当两个垂直相邻的块级元素的margin相遇时，它们之间的margin不是相加而是取两者之中的较大值。这种现象常常会导致布局问题。以下是解决这一问题的三种方法：

使用内边距（padding）代替外边距（margin）。
使用边框（border）。
使用CSS的overflow属性设置为auto或hidden。

示例代码：




/* 方法1：使用内边距代替外边距 */
.element1 {
  padding: 10px;
}
 
/* 方法2：为元素添加边框 */
.element2 {
  border-top: 1px solid transparent; /* 可以使用任何透明的边框颜色 */
}
 
/* 方法3：使用overflow属性 */
.element3 {
  overflow: auto; /* 或者使用 'hidden' */
}

在实际应用中，选择哪种方法取决于具体需求和设计。通常情况下，内边距和边框的方法更常用，因为它们不会改变元素的实际大小，只是看起来有所区分。而overflow属性则可能会影响元素的可见性，特别是当auto触发滚动条时。

- 阅读更多 -

html-网站菜单-点击菜单展开相应的导航栏，加减号可切换

System

2024-08-12

所有,html

您可以使用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>Menu Example</title>
<style>
  ul.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  ul.menu li {
    position: relative;
    padding-left: 20px;
    cursor: pointer;
  }
  ul.menu li:before {
    content: '+';
    position: absolute;
    left: 0;
    color: white;
  }
  ul.menu li.active:before {
    content: '-';
  }
  ul.menu li div {
    display: none;
    padding-left: 20px;
  }
</style>
</head>
<body>
 
<ul class="menu">
  <li>
    Menu Item 1
    <div>
      Submenu Item 1-1<br>
      Submenu Item 1-2<br>
      Submenu Item 1-3<br>
    </div>
  </li>
  <li>
    Menu Item 2
    <div>
      Submenu Item 2-1<br>
      Submenu Item 2-2<br>
      Submenu Item 2-3<br>
    </div>
  </li>
  <!-- More list items as needed -->
</ul>
 
<script>
  // Add event listener to all list items
  document.querySelectorAll('.menu li').forEach(function(item) {
    item.addEventListener('click', function() {
      // Toggle active class on the list item
      this.classList.toggle('active');
      // Toggle display of the submenu
      var submenu = this.querySelector('div');
      if (submenu) {
        submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
      }
    });
  });
</script>
 
</body>
</html>

在这个示例中，我们定义了一个带有menu类的无序列表，每个列表项都有一个前缀加号，代表可点击。当点击列表项时，通过切换active类来改变加号为减号，同时通过JavaScript动态切换对应子菜单的显示状态。

- 阅读更多 -

JSON和AJAX知识点整理

System

2024-08-12

所有,ajax




// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'example.json', true);
 
// 为 onreadystatechange 事件设置一个回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态为 200 
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 获取服务器响应的数据
      var json = JSON.parse(xhr.responseText);
      console.log(json);
    } else {
      // 处理错误
      console.error('Error: ' + xhr.status);
    }
  }
};
 
// 发送请求
xhr.send();

这段代码演示了如何使用原生的XMLHttpRequest对象发起一个GET请求，获取服务器上的JSON数据，并在获取到数据后使用JSON.parse()将字符串解析成JavaScript对象。在回调函数中，它检查了readyState和HTTP状态码，确保只有在请求成功完成时才解析响应数据。

- 阅读更多 -

css实现悬浮时图标抖动效果

System

2024-08-12

所有,css3

要在CSS中实现悬浮时图标抖动效果，可以使用animation属性和keyframes规则来创建抖动动画。以下是一个简单的例子，其中使用了旋转和缩放的组合效果来实现图标的抖动：




/* 图标抖动动画 */
@keyframes iconShake {
    0% { transform: translateX(-5px) rotate(0deg); }
    25% { transform: translateX(5px) rotate(10deg); }
    50% { transform: translateX(-5px) rotate(-10deg); }
    75% { transform: translateX(5px) rotate(10deg); }
    100% { transform: translateX(-5px) rotate(0deg); }
}
 
/* 悬浮在图标上方时触发抖动 */
.icon:hover {
    animation: iconShake 0.5s; /* 抖动持续时间和动画名称 */
    animation-iteration-count: infinite; /* 抖动重复次数 */
}

在HTML中，你可以这样使用：




<div class="icon">
    <!-- 这里放置你的图标，可以是图像或字体图标等 -->
</div>

将上述CSS添加到你的样式表中，并将.icon类添加到你想要实现抖动效果的图标元素上。当鼠标悬浮在该元素上时，它将开始抖动。

- 阅读更多 -

CSS中设置透明度的2个属性：opacity，RGBA以及它们的区别

System

2024-08-12

所有,css

在CSS中，设置元素的透明度可以使用两种方法：

使用opacity属性

opacity属性是一个简单的方法，可以设置元素（包括元素的内容）的透明度。opacity的值从0到1，其中0表示完全透明，1表示完全不透明。

例如：




.transparent-box {
  opacity: 0.5;
}

使用RGBA颜色

除了设置元素的透明度外，我们还可以使用RGBA颜色来设置元素的背景透明度。RGBA颜色是一个包含红色、绿色、蓝色和alpha通道（透明度）的颜色值。alpha通道的值从0到1，其中0表示完全透明，1表示完全不透明。

例如：




.transparent-box {
  background-color: rgba(255, 0, 0, 0.5);
}

opacity和RGBA的主要区别在于作用范围：opacity作用于元素和元素内的所有内容，而RGBA只作用于颜色的设置，不影响元素内的其他内容。

总结：

opacity设置元素的透明度，包括元素的内容和背景。
RGBA设置元素的背景颜色的透明度，不影响元素内的其他内容。

- 阅读更多 -

HTML中的常见标签

System

2024-08-12

所有,html

HTML中常见的标签包括：

<!DOCTYPE html>：声明文档类型。
<html>：整个网页的根元素。
<head>：包含了元数据，如<title>、<meta>、<style>、<script>等。
<title>：定义网页的标题，显示在浏览器的标题栏。
<body>：包含了网页的主要内容。
<h1>至<h6>：定义标题，<h1>最重要，<h6>最不重要。
<p>：定义段落。
<a>：定义超链接。
<img>：插入图片。
<div>：定义文档章节。
<span>：用于文本的行内元素容器。
<ul>：无序列表。
<ol>：有序列表。
<li>：列表项。
<table>：定义表格。
<tr>：定义表格的行。
<td>：定义表格的单元。
<form>：定义表单。
<input>：定义输入框。
<button>：定义按钮。

示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">点击访问我的主页</a>
    <img src="image.jpg" alt="示例图片">
    <div>
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
        </ul>
    </div>
    <table>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
    </table>
    <form action="/submit">
        <input type="text" name="username">
        <button type="submit">提交</button>
    </form>
</body>
</html>

- 阅读更多 -

若依vue中关于字典的使用

System

2024-08-12

所有,vue.js

在Vue中，可以使用数组或对象来表示字典（键值对）。数组不适合作为字典使用，因为它是有序的集合，而字典通常要求按键来快速访问值。对象是Vue中表示字典的常见方式。

以下是一个简单的例子，展示了如何在Vue中使用对象来表示和操作字典：




<template>
  <div>
    <div v-for="(value, key) in dictionary" :key="key">
      {{ key }}: {{ value }}
    </div>
    <button @click="addItem">Add Item</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      dictionary: {
        key1: 'value1',
        key2: 'value2'
      }
    };
  },
  methods: {
    addItem() {
      const newKey = `key${Object.keys(this.dictionary).length + 1}`;
      this.dictionary[newKey] = 'newValue';
    }
  }
};
</script>

在这个例子中，dictionary 是一个包含键值对的对象。我们使用 v-for 指令来遍历字典，并显示每个键值对。addItem 方法用来添加新的键值对到字典中。

- 阅读更多 -

ESlint配置eslintrc.js文件

System

2024-08-12

所有,javascript

在项目根目录下创建一个.eslintrc.js配置文件，并配置ESLint规则。以下是一个基本的配置示例：




module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
    // 在这里添加或覆盖规则
    'react/jsx-filename-extension': [1, { 'extensions': ['.js', '.jsx'] }],
    'import/no-unresolved': [2, { commonjs: true, amd: true }],
    'import/no-extraneous-dependencies': [2, { devDependencies: true }],
  },
};

这个配置文件启用了React环境，使用了plugin:react/recommended插件，同时继承了airbnb的编码规范。你可以根据项目需求添加或修改规则。

- 阅读更多 -

Flutter 核心原理与混合开发模式，张口就来

System

2024-08-12

所有,flutter

Flutter是一个开源的UI工具包，它可以用来快速在iOS和Android上构建高质量的原生用户界面。Flutter的核心是Dart语言，它提供了一种新的方式来构建UI，并且还包含了一些工具和服务，比如状态管理、动画等。

Flutter的核心原理主要包括以下几点：

使用Dart作为编程语言，并通过Skia图形库来渲染UI，Skia是Chrome和其他许多应用程序使用的图形引擎。
使用Dart的异步（microtask）和事件循环来处理用户界面的更新。
提供了一个widget系统，用于构建UI，并且可以通过widget tree来实现状态管理和动画。
使用GPU进行渲染，以提供高帧率的动画和流畅的用户体验。

混合开发指的是在一个应用程序中结合多种开发技术或平台。Flutter支持混合开发，可以和现有的代码库进行集成，例如，可以在Flutter界面中使用webView，或者使用原生代码。

以下是一个简单的Flutter应用程序的代码示例，它创建了一个包含文本和按钮的简单界面：




import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

在这个例子中，我们创建了一个名为MyApp的StatelessWidget，它是Flutter应用程序的入口点。我们使用MaterialApp作为根部件，并在其中设置了一个Scaffold，这是一个提供有用Material Design布局结构的部件，其中包含一个AppBar、一个body部分，以及一个居中的Text部件。这个应用程序运行在一个完整的Flutter环境中，并且可以在iOS和Android设备上编译和运行。

- 阅读更多 -

Flutter开发之——IOS通信EventChannel，全网首发

System

2024-08-12

所有,flutter

在Flutter中，使用EventChannel可以实现iOS与Flutter之间的事件通信。以下是一个简单的示例，展示了如何在iOS端发送事件，并在Flutter端接收这些事件。

首先，在iOS项目中定义一个事件通道的名称：




// iOSEventChannelPlugin.m
 
#import "iOSEventChannelPlugin.h"
 
@implementation iOSEventChannelPlugin
 
+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar> *)registrar {
    FlutterMethodChannel* channel = [FlutterMethodChannel
                                     methodChannelWithName:@"samples.flutter.dev/eventChannel"
                                     binaryMessenger:[registrar messenger]];
    [registrar addMethodCallDelegate:[iOSEventChannelPlugin new] channel:channel];
 
    FlutterEventChannel* eventChannel = [FlutterEventChannel eventChannelWithName:@"samples.flutter.dev/eventChannel"
                                                              binaryMessenger:[registrar messenger]];
    [eventChannel setStreamHandler:[iOSEventChannelPlugin new]];
}
 
- (void)onListenWithArguments:(id)arguments eventSink:(FlutterEventSink)eventSink {
    self.eventSink = eventSink;
}
 
- (void)onCancelWithArguments:(id)arguments {
    self.eventSink = nil;
}
 
- (void)sendEvent:(NSString *)event {
    if (self.eventSink) {
        self.eventSink(event);
    }
}
 
@end

然后，在Flutter端订阅这个事件通道：




import 'package:flutter/services.dart';
 
class EventChannelDemo with ChangeNotifier {
  Stream<dynamic>? _eventStream;
 
  void initEventChannel() {
    const eventChannelName = 'samples.flutter.dev/eventChannel';
    _eventStream = EventChannel(eventChannelName).receiveBroadcastStream();
    if (_eventStream != null) {
      _eventStream!.listen(_eventListener, onError: _errorListener);
    }
  }
 
  void _eventListener(dynamic event) {
    print('Event received: $event');
  }
 
  void _errorListener(dynamic error) {
    print('Error listening to event channel: $error');
  }
}

在iOS端，你需要创建一个名为iOSEventChannelPlugin的类，并实现FlutterStreamHandler接口。在Flutter端，你需要创建一个EventChannel实例，并订阅来自iOS的事件。

这样，当iOS端通过sendEvent方法发送事件时，Flutter端就能通过_eventListener方法接收到事件，并在控制台打印出来。这个例子展示了如何在iOS和Flutter之间建立一个简单的事件通信通道。

- 阅读更多 -