第十二篇【传奇开心果系列】Ant Design Mobile of React开发移动应用：内置组件实现酷炫CSS 动画

news/2024/7/20 22:12:55 标签: react.js, 前端框架, android, ios, node.js

Ant Design Mobile of React 开发移动应用示例博文系列

第一篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:从helloworld开始
第二篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:天气应用
第三篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:健身追踪
第四篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用：数据存储的七种类型讲解和示例
第五篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用：基础页面制作介绍和示例代码
第六篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用：UI框架39个组件集中讲解和示例代码
第七篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用：安装配置node和npm避坑攻略
第八篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用：打包上架部署云服务托管等后期工作
第九篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用：使用内置组件实现响应式设计
第十篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用：涉相关基础知识介绍和示例
第十一篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:移动商城应用
第十二篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:内置组件实现酷炫CSS 动画

传奇开心果博文系列

    • Ant Design Mobile of React 开发移动应用示例博文系列
  • 博文目录
    • 一、前言
    • 二、CSS动画介绍
    • 三、淡入淡出动画开发中应用示例代码
    • 四、滑动动画开发中应用示例代码
    • 五、缩放动画开发中应用示例代码
    • 六、渐变色动画开发中应用示例代码
    • 七、旋转动画开发中应用示例代码
    • 八、弹跳动画开发中应用示例代码
    • 九、归纳总结知识点

博文目录

一、前言

CSS 动画：Ant Design Mobile of React 提供了一些内置组件实现的酷炫的CSS动画效果，如淡入淡出、滑动等。了解 CSS 动画的基本原理和使用方式可以帮助开发者在开发中添加自定义的动画效果，提升用户体验。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、CSS动画介绍

Ant Design Mobile of React 提供了一些内置组件实现的酷炫的CSS动画效果，可以用于创建各种动态和交互式的用户界面。

1.淡入淡出（Fade）动画

可以通过设置组件的 transitionName 属性来实现。例如，你可以将一个组件的 transitionName 设置为 'fade'，然后在 CSS 样式中定义 fade-enter、fade-enter-active、fade-exit 和 fade-exit-active 类名，分别表示进入和离开动画的不同状态。

2.滑动（Slide）动画

可以通过设置组件的 transitionName 属性来实现。你可以将一个组件的 transitionName 设置为 'slide'，然后在 CSS 样式中定义 slide-enter、slide-enter-active、slide-exit 和 slide-exit-active 类名，分别表示进入和离开动画的不同状态。

3.缩放（Scale）动画

可以通过设置组件的 transitionName 属性来实现缩放效果。你可以将一个组件的 transitionName 设置为 'scale'，然后在 CSS 样式中定义 scale-enter、scale-enter-active、scale-exit 和 scale-exit-active 类名，分别表示进入和离开动画的不同状态。

4.渐变色（Gradient）动画

可以通过设置组件的 transitionName 属性来实现渐变色效果。你可以将一个组件的 transitionName 设置为 'gradient'，然后在 CSS 样式中定义 gradient-enter、gradient-enter-active、gradient-exit 和 gradient-exit-active 类名，分别表示进入和离开动画的不同状态。

5.旋转（Rotate）动画

可以通过设置组件的 transitionName 属性来实现旋转效果。你可以将一个组件的 transitionName 设置为 'rotate'，然后在 CSS 样式中定义 rotate-enter、rotate-enter-active、rotate-exit 和 rotate-exit-active 类名，分别表示进入和离开动画的不同状态。

6.弹跳（Bounce）动画

可以通过设置组件的 transitionName 属性来实现弹跳效果。你可以将一个组件的 transitionName 设置为 'bounce'，然后在 CSS 样式中定义 bounce-enter、bounce-enter-active、bounce-exit 和 bounce-exit-active 类名，分别表示进入和离开动画的不同状态。
这些动画效果可以根据你的需求进行定制和扩展。你可以在 Ant Design Mobile of React 的官方文档中找到更多关于这些动画效果的详细信息和示例代码。

三、淡入淡出动画开发中应用示例代码

在这里插入图片描述当使用 Ant Design Mobile of React 开发移动应用时，你需要先引入相应的 CSS 样式文件或库，以确保动画效果能够正常工作。通常情况下，你可以在项目的入口文件（如 index.js）中引入这些样式。
以下是一个使用淡入淡出效果的示例代码：
首先，你需要安装 @am-design/css 库，它包含了 Ant Design Mobile 的 CSS 样式文件。你可以使用 npm 或 yarn 进行安装：

npm install @am-design/css

或

yarn add @am-design/css

然后，在你的入口文件中，引入 Ant Design Mobile 的 CSS 样式文件：

import '@am-design/css/dist/am-design.css';

接下来，你可以在你的组件中使用淡入淡出效果。例如，你可以创建一个名为 FadeExample 的组件：

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';

const FadeExample = () => {
  const [show, setShow] = useState(false);

  const handleToggle = () => {
    setShow(!show);
  };

  return (
    <div>
      <button onClick={handleToggle}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div className="fade-content">Content</div>
      </CSSTransition>
    </div>
  );
};

export default FadeExample;

在上面的代码中，我们使用了 react-transition-group 库中的 CSSTransition 组件来实现淡入淡出效果。通过设置 in 属性来控制组件的显示和隐藏，timeout 属性定义了动画的持续时间，classNames 属性指定了动画效果的类名前缀。
接着，在 CSS 样式文件中定义淡入淡出效果的类名：

.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

以上代码中，fade-enter 和 fade-exit 类名定义了进入和离开动画的初始状态，而 fade-enter-active 和 fade-exit-active 类名定义了进入和离开动画的活动状态。
最后，你可以在你的应用中使用 FadeExample 组件来展示淡入淡出效果：

import React from 'react';
import FadeExample from './FadeExample';

const App = () => {
  return (
    <div>
      <h1>Ant Design Mobile of React</h1>
      <FadeExample />
    </div>
  );
};

export default App;

通过以上代码，你就可以在你的移动应用中使用淡入淡出效果了。当点击 “Toggle” 按钮时，FadeExample 组件的内容将以淡入淡出的方式显示或隐藏。

四、滑动动画开发中应用示例代码

在这里插入图片描述当使用 Ant Design Mobile of React 开发移动应用时，你可以使用滑动（Slide）动画效果。以下是一个使用滑动动画的示例代码：

首先，你需要安装 @am-design/css 库，它包含了 Ant Design Mobile 的 CSS 样式文件。你可以使用 npm 或 yarn 进行安装。

然后，在你的入口文件中，引入 Ant Design Mobile 的 CSS 样式文件：

import '@am-design/css/dist/am-design.css';

接下来，你可以在你的组件中使用滑动动画。例如，你可以创建一个名为 SlideExample 的组件：

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';

const SlideExample = () => {
  const [show, setShow] = useState(false);

  const handleToggle = () => {
    setShow(!show);
  };

  return (
    <div>
      <button onClick={handleToggle}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="slide"
        unmountOnExit
      >
        <div className="slide-content">Content</div>
      </CSSTransition>
    </div>
  );
};

export default SlideExample;

在上面的代码中，我们使用了 react-transition-group 库中的 CSSTransition 组件来实现滑动动画。通过设置 in 属性来控制组件的显示和隐藏，timeout 属性定义了动画的持续时间，classNames 属性指定了动画效果的类名前缀。

接着，在 CSS 样式文件中定义滑动动画的类名：

.slide-enter {
  transform: translateX(-100%);
}

.slide-enter-active {
  transform: translateX(0);
  transition: transform 300ms;
}

.slide-exit {
  transform: translateX(0);
}

.slide-exit-active {
  transform: translateX(100%);
  transition: transform 300ms;
}

以上代码中，slide-enter 和 slide-exit 类名定义了进入和离开动画的初始状态，而 slide-enter-active 和 slide-exit-active 类名定义了进入和离开动画的活动状态。

最后，你可以在你的应用中使用 SlideExample 组件来展示滑动动画：

import React from 'react';
import SlideExample from './SlideExample';

const App = () => {
  return (
    <div>
      <h1>Ant Design Mobile of React</h1>
      <SlideExample />
    </div>
  );
};

export default App;

通过以上代码，你就可以在你的移动应用中使用滑动动画了。当点击 “Toggle” 按钮时，SlideExample 组件的内容将以滑动的方式显示或隐藏。

五、缩放动画开发中应用示例代码

在这里插入图片描述当使用 Ant Design Mobile of React 开发移动应用时，你可以使用滑动缩放动画效果。以下是一个使用滑动缩放动画的示例代码：

首先，你需要安装 @am-design/css 库，它包含了 Ant Design Mobile 的 CSS 样式文件。你可以使用 npm 或 yarn 进行安装。

然后，在你的入口文件中，引入 Ant Design Mobile 的 CSS 样式文件：

import '@am-design/css/dist/am-design.css';

接下来，你可以在你的组件中使用滑动缩放动画。例如，你可以创建一个名为 ZoomSlideExample 的组件：

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';

const ZoomSlideExample = () => {
  const [show, setShow] = useState(false);

  const handleToggle = () => {
    setShow(!show);
  };

  return (
    <div>
      <button onClick={handleToggle}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="zoom-slide"
        unmountOnExit
      >
        <div className="zoom-slide-content">Content</div>
      </CSSTransition>
    </div>
  );
};

export default ZoomSlideExample;

在上面的代码中，我们使用了 react-transition-group 库中的 CSSTransition 组件来实现滑动缩放动画。通过设置 in 属性来控制组件的显示和隐藏，timeout 属性定义了动画的持续时间，classNames 属性指定了动画效果的类名前缀。

接着，在 CSS 样式文件中定义滑动缩放动画的类名：

.zoom-slide-enter {
  opacity: 0;
  transform: translateY(-100%) scale(0.5);
}

.zoom-slide-enter-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 300ms, transform 300ms;
}

.zoom-slide-exit {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.zoom-slide-exit-active {
  opacity: 0;
  transform: translateY(100%) scale(0.5);
  transition: opacity 300ms, transform 300ms;
}

以上代码中，zoom-slide-enter 和 zoom-slide-exit 类名定义了进入和离开动画的初始状态，而 zoom-slide-enter-active 和 zoom-slide-exit-active 类名定义了进入和离开动画的活动状态。

最后，你可以在你的应用中使用 ZoomSlideExample 组件来展示滑动缩放动画：

import React from 'react';
import ZoomSlideExample from './ZoomSlideExample';

const App = () => {
  return (
    <div>
      <h1>Ant Design Mobile of React</h1>
      <ZoomSlideExample />
    </div>
  );
};

export default App;

通过以上代码，你就可以在你的移动应用中使用滑动缩放动画了。当点击 “Toggle” 按钮时，ZoomSlideExample 组件的内容将以滑动缩放的方式显示或隐藏。

六、渐变色动画开发中应用示例代码

在这里插入图片描述当使用 Ant Design Mobile of React 开发移动应用时，你可以使用渐变色动画效果。以下是一个使用渐变色动画的示例代码：

首先，你需要安装 @am-design/css 库，它包含了 Ant Design Mobile 的 CSS 样式文件。你可以使用 npm 或 yarn 进行安装：

npm install @am-design/css

或

yarn add @am-design/css

然后，在你的入口文件中，引入 Ant Design Mobile 的 CSS 样式文件：

import '@am-design/css/dist/am-design.css';

接下来，你可以在你的组件中使用渐变色动画。例如，你可以创建一个名为 GradientAnimationExample 的组件：

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';

const GradientAnimationExample = () => {
  const [show, setShow] = useState(false);

  const handleToggle = () => {
    setShow(!show);
  };

  return (
    <div>
      <button onClick={handleToggle}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="gradient-animation"
        unmountOnExit
      >
        <div className="gradient-animation-content">Content</div>
      </CSSTransition>
    </div>
  );
};

export default GradientAnimationExample;

在上面的代码中，我们使用了 react-transition-group 库中的 CSSTransition 组件来实现渐变色动画。通过设置 in 属性来控制组件的显示和隐藏，timeout 属性定义了动画的持续时间，classNames 属性指定了动画效果的类名前缀。

接着，在 CSS 样式文件中定义渐变色动画的类名：

.gradient-animation-enter {
  opacity: 0;
}

.gradient-animation-enter-active {
  opacity: 1;
  transition: opacity 300ms;
  animation: gradient-animation 3s infinite;
}

.gradient-animation-exit {
  opacity: 1;
}

.gradient-animation-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

@keyframes gradient-animation {
  0% {
    background: linear-gradient(to right, #ff0000, #00ff00);
  }
  50% {
    background: linear-gradient(to right, #00ff00, #0000ff);
  }
  100% {
    background: linear-gradient(to right, #0000ff, #ff0000);
  }
}

以上代码中，gradient-animation-enter 和 gradient-animation-exit 类名定义了进入和离开动画的初始状态，而 gradient-animation-enter-active 和 gradient-animation-exit-active 类名定义了进入和离开动画的活动状态。

@keyframes 定义了渐变色动画的关键帧，从左到右依次变化颜色。

最后，你可以在你的应用中使用 GradientAnimationExample 组件来展示渐变色动画：

import React from 'react';
import GradientAnimationExample from './GradientAnimationExample';

const App = () => {
  return (
    <div>
      <h1>Ant Design Mobile of React</h1>
      <GradientAnimationExample />
    </div>
  );
};

export default App;

通过以上代码，你就可以在你的移动应用中使用渐变色动画了。当点击 “Toggle” 按钮时，GradientAnimationExample 组件的内容将以渐变色的方式显示或隐藏，并且背景颜色会按照定义的动画效果进行变化。

七、旋转动画开发中应用示例代码

在这里插入图片描述当使用 Ant Design Mobile of React 开发移动应用时，你可以使用旋转动画效果。以下是一个使用旋转动画的示例代码：

首先，你需要安装 @am-design/css 库，它包含了 Ant Design Mobile 的 CSS 样式文件。你可以使用 npm 或 yarn 进行安装：

npm install @am-design/css

或

yarn add @am-design/css

然后，在你的入口文件中，引入 Ant Design Mobile 的 CSS 样式文件：

import '@am-design/css/dist/am-design.css';

接下来，你可以在你的组件中使用旋转动画。例如，你可以创建一个名为 RotateAnimationExample 的组件：

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';

const RotateAnimationExample = () => {
  const [show, setShow] = useState(false);

  const handleToggle = () => {
    setShow(!show);
  };

  return (
    <div>
      <button onClick={handleToggle}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="rotate-animation"
        unmountOnExit
      >
        <div className="rotate-animation-content">Content</div>
      </CSSTransition>
    </div>
  );
};

export default RotateAnimationExample;

在上面的代码中，我们使用了 react-transition-group 库中的 CSSTransition 组件来实现旋转动画。通过设置 in 属性来控制组件的显示和隐藏，timeout 属性定义了动画的持续时间，classNames 属性指定了动画效果的类名前缀。

接着，在 CSS 样式文件中定义旋转动画的类名：

.rotate-animation-enter {
  opacity: 0;
  transform: rotate(0);
}

.rotate-animation-enter-active {
  opacity: 1;
  transform: rotate(360deg);
  transition: opacity 300ms, transform 300ms;
}

.rotate-animation-exit {
  opacity: 1;
  transform: rotate(360deg);
}

.rotate-animation-exit-active {
  opacity: 0;
  transform: rotate(0);
  transition: opacity 300ms, transform 300ms;
}

以上代码中，rotate-animation-enter 和 rotate-animation-exit 类名定义了进入和离开动画的初始状态，而 rotate-animation-enter-active 和 rotate-animation-exit-active 类名定义了进入和离开动画的活动状态。

最后，你可以在你的应用中使用 RotateAnimationExample 组件来展示旋转动画：

import React from 'react';
import RotateAnimationExample from './RotateAnimationExample';

const App = () => {
  return (
    <div>
      <h1>Ant Design Mobile of React</h1>
      <RotateAnimationExample />
    </div>
  );
};

export default App;

通过以上代码，你就可以在你的移动应用中使用旋转动画了。当点击 “Toggle” 按钮时，RotateAnimationExample 组件的内容将以旋转的方式显示或隐藏。

八、弹跳动画开发中应用示例代码

在这里插入图片描述当使用 Ant Design Mobile of React 开发移动应用时，你可以使用弹跳动画效果。以下是一个使用弹跳动画的示例代码：

首先，你需要安装 @am-design/css 库，它包含了 Ant Design Mobile 的 CSS 样式文件。你可以使用 npm 或 yarn 进行安装：

npm install @am-design/css

或

yarn add @am-design/css

然后，在你的入口文件中，引入 Ant Design Mobile 的 CSS 样式文件：

import '@am-design/css/dist/am-design.css';

接下来，你可以在你的组件中使用弹跳动画。例如，你可以创建一个名为 BounceAnimationExample 的组件：

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';

const BounceAnimationExample = () => {
  const [show, setShow] = useState(false);

  const handleToggle = () => {
    setShow(!show);
  };

  return (
    <div>
      <button onClick={handleToggle}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="bounce-animation"
        unmountOnExit
      >
        <div className="bounce-animation-content">Content</div>
      </CSSTransition>
    </div>
  );
};

export default BounceAnimationExample;

在上面的代码中，我们使用了 react-transition-group 库中的 CSSTransition 组件来实现弹跳动画。通过设置 in 属性来控制组件的显示和隐藏，timeout 属性定义了动画的持续时间，classNames 属性指定了动画效果的类名前缀。

接着，在 CSS 样式文件中定义弹跳动画的类名：

.bounce-animation-enter {
  opacity: 0;
  transform: translateY(-100%);
}

.bounce-animation-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms, transform 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.bounce-animation-exit {
  opacity: 1;
  transform: translateY(0);
}

.bounce-animation-exit-active {
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 300ms, transform 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

以上代码中，bounce-animation-enter 和 bounce-animation-exit 类名定义了进入和离开动画的初始状态，而 bounce-animation-enter-active 和 bounce-animation-exit-active 类名定义了进入和离开动画的活动状态。

最后，你可以在你的应用中使用 BounceAnimationExample 组件来展示弹跳动画：

import React from 'react';
import BounceAnimationExample from './BounceAnimationExample';

const App = () => {
  return (
    <div>
      <h1>Ant Design Mobile of React</h1>
      <BounceAnimationExample />
    </div>
  );
};

export default App;

通过以上代码，你就可以在你的移动应用中使用弹跳动画了。当点击 “Toggle” 按钮时，BounceAnimationExample 组件的内容将以弹跳的方式显示或隐藏。

希望这些示例能够帮助你理解如何在 Ant Design Mobile of React 中使用内置动画。如果你有任何进一步的问题，请随时提问。

九、归纳总结知识点

使用 Ant Design Mobile of React 的 CSS 内置动画的知识点总结如下：

  1. Ant Design Mobile（AM）提供了一些内置的 CSS 动画效果，可以直接在组件中使用。

  2. 在使用内置动画之前，需要确保已正确引入 Ant Design Mobile 的 CSS 样式文件。

  3. 内置动画类名的命名规则为 am-animation-<animation-name>，其中 <animation-name> 是具体的动画名称。

  4. 可以通过在组件的 className 属性中添加内置动画类名来应用相应的动画效果。

  5. 内置动画可以应用于组件的进入、离开和活动状态，具体的类名为：

    • 进入动画：am-animation-enter 和 am-animation-enter-active
    • 离开动画：am-animation-exit 和 am-animation-exit-active
    • 活动动画：am-animation-active

  6. 内置动画可以使用在 CSSTransition 组件中，通过设置相应的类名和持续时间来控制动画效果。

  7. 内置动画可以与其他 CSS 类名和样式一起使用，以实现更复杂的动画效果。

  8. 可以使用 @keyframes 规则自定义和扩展内置动画，以满足特定的需求。

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述总结以上知识点，你可以在 Ant Design Mobile of React 中利用内置动画类名和 CSSTransition 组件来实现各种动画效果。通过合理应用这些知识点，可以为你的移动应用增添一些生动和吸引人的交互效果。


http://www.niftyadmin.cn/n/5336030.html

相关文章

MFC 序列化机制

MFC 序列化机制

目录 文件操作相关类 序列化机制相关类 序列化机制使用 序列化机制执行过程 序列化类对象 文件操作相关类 CFile&#xff1a;文件操作类&#xff0c;封装了关于文件读写等操作&#xff0c;常见的方法&#xff1a; CFile::Open&#xff1a;打开或者创建文件CFile::Write/…
阅读更多...
Yolov7, Yolov8使用

Yolov7, Yolov8使用

YOLOV7 1. 安装和测试&#xff1a; 【小白教学】如何用YOLOv7训练自己的数据集 - 知乎 YOLOv7——训练自己的数据集 - 代码网 conda create --nameyolov7 python3.8 #the version of your python3 *** 这里需要注意如果 torch 和torchvion版本太高&#xff0c;会导致GPU不可…
阅读更多...
php array_diff 比较两个数组bug避坑 深入了解

php array_diff 比较两个数组bug避坑 深入了解

今天实用array_diff出现的异常问题&#xff0c;预想的结果应该是返回 "integral_initiate">"0"&#xff0c;实际没有 先看测试代码&#xff1a; $a ["user_name">"测","see_num">0,"integral_initiate&quo…
阅读更多...
flutter获取地理定位：geolocator依赖详细用法

flutter获取地理定位：geolocator依赖详细用法

本文使用geolocator插件实现app物理定位功能。 该插件的主要功能有&#xff1a; 获取最后已知位置&#xff1b;获取设备当前位置&#xff1b;获取连续的位置更新&#xff1b;检查设备是否启用了定位服务&#xff1b;计算两个地理坐标之间的距离&#xff08;米&#xff09;&am…
阅读更多...
ChatGPT正确打开方式与GPT-4.5的key最新获取方式

ChatGPT正确打开方式与GPT-4.5的key最新获取方式

前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff1a;https://www.captainbed.cn/z ChatGPT体验地址 文章目录 前言4.5key价格泄漏ChatGPT4.0使用地址ChatGPT正确打开方式最新功能语音助手存档…
阅读更多...
MySQL中SELECT字句的顺序以及具体使用

MySQL中SELECT字句的顺序以及具体使用

目录 1.SELECT字句及其顺序 2.使用方法举例 3.HAVING和WHERE 1.SELECT字句及其顺序 *下表来自于图灵程序设计丛书&#xff0c;数据库系列——《SQL必知必会》 2.使用方法举例 *题目来源于牛客网 题目描述 现在运营想要查看不同大学的用户平均发帖情况&#xff0c;并期望结…
阅读更多...
插入排序（一）——直接插入排序与希尔排序

插入排序（一）——直接插入排序与希尔排序

目录 一.前言 二.排序的概念及其运用 1.1排序的概念 1.2 常用排序算法 三.常用排序算法的实现 3.1 插入排序 3.1.1 基本思想 3.1.2 直接插入排序 3.1.3 希尔排序&#xff08;缩小增量排序&#xff09; 四.全部代码 sort.c sort.h test.c 五.结语 一.前言 本文我们…
阅读更多...
var 和 let 的优缺点

var 和 let 的优缺点

目录 var 和 let 的优缺点 1、变量提升&#xff1a; 2、作用域&#xff1a; 3、全局声明&#xff1a; 4、重复声明&#xff1a; 5、循环中的行为&#xff1a; 示例 变量提升&#xff1a; 作用域&#xff1a; 全局声明&#xff1a; 重复声明&#xff1a; var 和 let…
阅读更多...
最新文章

Copyright @ 2022~2023