輸入3個數a,b,c，按大小順序輸出，各種編程語言實現方法

下是使用不同編程語言實現按大小順序輸出的示例代碼，并對每種語言的實現原理進行說明：

C語言實現原理：

從用戶輸入獲取三個整數a、b、c。
將a、b、c存儲在一個整型數組中。
使用冒泡排序算法對數組進行排序，即比較相鄰的元素并交換位置，直到整個數組按升序排列。
輸出排序后的數組。

C語言代碼：

#include <stdio.h>

void sort(int *arr, int n) {
    for (int i = 0; i < n-1; i++) {
        for (int j = 0; j < n-i-1; j++) {
            if (arr[j] > arr[j+1]) {
                int temp = arr[j];
                arr[j] = arr[j+1];
                arr[j+1] = temp;
            }
        }
    }
}

int main() {
    int a, b, c;
    printf("Enter three numbers: ");
    scanf("%d %d %d", &a, &b, &c);
    
    int arr[] = {a, b, c};
    int n = sizeof(arr)/sizeof(arr[0]);
    
    sort(arr, n);
    
    printf("Sorted numbers: %d %d %d\n", arr[0], arr[1], arr[2]);
    
    return 0;
}

C++實現原理：

從用戶輸入獲取三個整數a、b、c。
將a、b、c存儲在一個整型數組中。
使用STL中的sort函數對數組進行排序，該函數使用快速排序算法實現。
輸出排序后的數組。

C++代碼：

#include <iostream>
#include <algorithm>

int main() {
    int a, b, c;
    std::cout << "Enter three numbers: ";
    std::cin >> a >> b >> c;
    
    int arr[] = {a, b, c};
    int n = sizeof(arr)/sizeof(arr[0]);
    
    std::sort(arr, arr+n);
    
    std::cout << "Sorted numbers: " << arr[0] << " " << arr[1] << " " << arr[2] << std::endl;
    
    return 0;
}

Java實現原理：

從用戶輸入獲取三個整數a、b、c。
將a、b、c存儲在一個整型數組中。
使用Arrays類中的sort方法對數組進行排序，該方法使用快速排序算法實現。
輸出排序后的數組。

Java代碼：

import java.util.Arrays;
import java.util.Scanner;

public class Main {
    public static void main(String[] args) {
        Scanner scanner = new Scanner(System.in);
        System.out.print("Enter three numbers: ");
        int a = scanner.nextInt();
        int b = scanner.nextInt();
        int c = scanner.nextInt();
        
        int[] arr = {a, b, c};
        Arrays.sort(arr);
        
        System.out.println("Sorted numbers: " + arr[0] + " " + arr[1] + " " + arr[2]);
    }
}

Python實現原理：

從用戶輸入獲取三個整數a、b、c。
將a、b、c存儲在一個整型列表中。
使用列表的sort方法對列表進行排序，該方法使用TimSort算法實現。
輸出排序后的列表。

Python代碼：

a = int(input("Enter the first number: "))
b = int(input("Enter the second number: "))
c = int(input("Enter the third number: "))

arr = [a, b, c]
arr.sort()

print("Sorted numbers:", arr[0], arr[1], arr[2])

C#實現原理：

從用戶輸入獲取三個整數a、b、c。
將a、b、c存儲在一個整型數組中。
使用Array類中的Sort方法對數組進行排序，該方法使用快速排序算法實現。
輸出排序后的數組。

C#代碼：

using System;

class Program
{
    static void Main()
    {
        Console.Write("Enter three numbers: ");
        int a = int.Parse(Console.ReadLine());
        int b = int.Parse(Console.ReadLine());
        int c = int.Parse(Console.ReadLine());
        
        int[] arr = {a, b, c};
        Array.Sort(arr);
        
        Console.WriteLine("Sorted numbers: {0} {1} {2}", arr[0], arr[1], arr[2]);
    }
}

JavaScript實現原理：

使用readline模塊創建一個接口，用于從標準輸入讀取用戶輸入。
提示用戶輸入三個數，并將輸入的字符串轉換為數字數組。
使用數組的sort方法對數組進行排序，該方法使用快速排序算法實現。
輸出排序后的數組。

JavaScript代碼：

const readline = require('readline');

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

rl.question('Enter three numbers: ', (input) => {
    const numbers = input.split(' ').map(Number);
    numbers.sort((a, b) => a - b);
    console.log(`Sorted numbers: ${numbers[0]} ${numbers[1]} ${numbers[2]}`);
    rl.close();
});

以上是使用不同編程語言實現按大小順序輸出的示例代碼，并對每種語言的實現原理進行了說明。每種語言都使用了不同的排序算法來對輸入的數字進行排序，然后輸出排序后的結果。

挑戰30天在頭條寫日記#

HTML是一種用于創建網頁結構和內容的標記語言，其中包含了許多標簽，可以用于排版、布局和展示內容。本文將詳細介紹HTML中的<tr>和<td>標簽的使用方法，并通過示例展示如何創建表格。

1. <tr>標簽的作用： <tr>標簽代表HTML表格中的一行（行數據），它可以包含一個或多個<td>元素作為單元格。

2. <td>標簽的作用： <td>標簽用于定義表格中的一個單元格（列數據），可以包含文本、圖像、鏈接等內容。

3. 如何使用<tr>和<td>： 在使用<tr>和<td>標簽時，首先需要創建一個<table>元素作為表格的容器，然后在其中嵌套<tr>和<td>標簽，如下所示：

htmlCopy code<table>
  <tr>
    <td>單元格1</td>
    <td>單元格2</td>
  </tr>
  <tr>
    <td>單元格3</td>
    <td>單元格4</td>
  </tr>
</table>

4. 表格樣式： 可以使用CSS來為表格添加樣式，如設置邊框、背景顏色等。以下是一個簡單的示例：

htmlCopy code<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
</style>

5. 示例應用： 以下示例演示了如何使用<tr>和<td>標簽創建一個包含姓名、年齡和城市的簡單表格：

htmlCopy code<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    td {
      border: 1px solid black;
      padding: 8px;
      text-align: center;
    }
  </style>
</head>
<body>

<table>
  <tr>
    <td>姓名</td>
    <td>年齡</td>
    <td>城市</td>
  </tr>
  <tr>
    <td>張三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>28</td>
    <td>廣州</td>
  </tr>
</table>

</body>
</html>

6. 書籍參考：

"HTML and CSS: Design and Build Websites" by Jon Duckett
"Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics" by Jennifer Niederst Robbins

7. 總結： 通過本文的介紹，我們了解了HTML中<tr>和<td>標簽的基本用法，以及如何創建簡單的表格和添加樣式。使用這些標簽，我們可以輕松地創建具有結構和內容的網頁表格，提升頁面的可讀性和可視性。

信 8.0 更新的一大特色就是支持動畫表情，如果發送的消息只有一個內置的表情圖標，這個表情會有一段簡單的動畫，一些特殊的表情還有全屏特效，例如煙花表情有全屏放煙花的特效，炸彈表情有爆炸動畫并且消息和頭像也會隨之震動。

近日，前端工程師華峰用300行代碼實現微信表情包炸裂的特效，一起來看看做出來的效果吧：

據他描述：項目的核心是使用到了 lottie 動畫庫。

lottie 是 Airbnb 出品的、全平臺（Web、Android、IOS、React Native）的動畫庫，它的特點在于能夠直接播放使用 Adobe After Effects 制作的動畫。設計師在 After Effects 中，利用 Bodymovin 插件把動畫導出為 JSON 格式之后，開發者就能夠通過相應平臺的 SDK 進行播放。

發送普通消息——核心

發送普通消息時，用戶在輸入框輸入完消息之后，點擊發送，就會把該條消息追加到消息列表中，并清空輸入框中的內容。那么這里先給發送按鈕添加點擊事件：

sendBtn.addEventListener("click", () => {
  const msg = msgInputEle.value;
  if (msg) {
    appendMsg(msg);
  }
});

在事件處理函數中：

判斷用戶是否輸入了消息。
如果輸入了就追加到消息列表中。

來看一下 appendMsg() 函數的代碼：

function appendMsg(msg, type) {
  // 創建消息元素
  const msgEle = panelEle.appendChild(document.createElement("div"));
  msgEle.classList.add("message", "mine"); // 設置為“我“發送的樣式
  msgEle.innerHTML = `
    <img class="avatar" src="./me.png" alt="" />
    <p><span>${msg}</span></p>
  `;
  // 滾動到最新消息
  panelEle.scrollTop = panelEle.scrollHeight;
  msgInputEle.value = "";
}

函數接收兩個參數，msg 和 type，分別是要追加的消息內容和類型，type 為可選的，不傳則認為是普通文本消息，如果傳遞了 "stickers" 則為表情消息，現在還用不到它。在這個函數中主要做了下面幾件事情：

按照消息的 HTML 結構創建一個新的消息元素 msgEle，并追加到消息列表中。
把消息的樣式設置為我發送的。
內部的元素分別為頭像和文本消息，使用模板字符串的形式賦值給 msgEle 的 innerHTML 屬性中，并在 <p> 中使用 msg 變量的值。
最后把滾動條滾動到最新的消息處，并清空輸入框中的消息。

這樣就可以發送普通的文本消息了。

發送動畫表情

在發送動畫表情之前，需要先加載動畫表情。在 index.js 的最上方先定義表情名稱和表情動畫文件路徑的鍵值對信息：

const stickers = {
  bomb: {
    path: "./3145-bomb.json",
  },
  pumpkin: {
    path: "./43215-pumpkins-sticker-4.json",
  },
};

我們會根據 bomb 、 pumkin 這樣的 key 來找到對應的動畫路徑。接著初始化彈出層中的表情以供用戶選擇：

// 初始化表情面板，也可以在表情選擇窗彈出時再初始化
Object.keys(stickers).forEach((key) => {
  const lottieEle = stickersEle.appendChild(document.createElement("span"));
  // 對每個表情創建 lottie 播放器
  const player = lottie.loadAnimation({
    container: lottieEle,
    renderer: "svg",
    loop: true,
    autoplay: false,
    path: stickers[key].path,
  });
  // 當選擇表情時，發送消息，并設置類型為 sticker 表情消息
  lottieEle.addEventListener("click", () => {
    appendMsg(key, "sticker");
  });
  // 當鼠標劃過時，播放動畫預覽
  lottieEle.addEventListener("mouseover", () => {
    player.play();
  });
  // 當鼠標劃過時，停止動畫預覽
  lottieEle.addEventListener("mouseleave", () => {
    player.stop();
  });
});

這里的代碼分別作了下邊這些操作：

遍歷存儲表情信息的對象。
創建一個 lottie 的容器，使用 span 元素，因為 lottie 動畫的播放器需要掛載到一個具體的 html 元素中。
調用 lottie 的 loadAnimation() 加載動畫，它需要傳遞這樣幾個參數：

container: 播放器要掛載到的容器。
renderer：可以選擇是使用 svg 還是 canvas 渲染動畫。
loop: 是否循環播放，由于此處是在表情選擇彈出層中預覽動畫，所以支持循環播放。
autoplay：是否自動播放，這里設置為了否，后邊讓它在鼠標劃過時再播放動畫。
path：動畫 json 文件路徑，直接從對象中獲取。

loadAnimation() 會返回 lottie 的實例，把它保存在 player 中。

然后后邊則注冊了幾個事件：

當 lottieEle 也就是表情被點擊時，發送表情消息，給 appendMsg() 的 msg 參數設置為表情的 key，type 參數設置為 "sticker"。
當鼠標劃過表情時，開始播放動畫。
當鼠標劃出表情時，停止動畫。

接著給發送表情按鈕添加事件，點擊時，切換表情彈出層的顯示狀態：

chooseStickerBtn.addEventListener("click", () => {
  stickersEle.classList.toggle("show");
});

這時點擊發送表情按鈕就可以看到表情選擇彈出層了。現在還不能發送表情，因為還沒在 appendMsg() 函數中處理，現在來修改一下它里邊的代碼。首先判斷：如果是表情消息，則不在消息中的 <p> 元素里添加任何信息：

function appendMsg(msg, type) {
 // ... 
  msgEle.innerHTML = `
    <img class="avatar" src="./me.png" alt="" />
    <p><span>${type === "sticker" ? "" : msg}</span></p>
  `;
}

然后在它的下方，調用 playSticker() 函數來播放動畫：

// 處理表情消息，播放相關動畫
if (type === "sticker") {
  playSticker(msg, msgEle);
}

playSticker() 函數接收兩個參數，一個是表情的 key，一個是消息元素。此時的 msg 變量的內容就是在 lottieEle 點擊事件中傳遞過來的表情 key。函數中的代碼如下：

function playSticker(key, msgEle) {
  // 表情消息，創建 lottie 動畫
  const lottieEle = msgEle.querySelector("span");
  lottieEle.style.width = "40px";
  lottieEle.style.height = "40px";
  lottie.loadAnimation({
    container: lottieEle,
    renderer: "svg",
    loop: false,
    autoplay: true,
    path: stickers[key].path,
  });
}

在這個函數里主要做了下邊幾項操作：

獲取消息中的 span 元素，它將作為 lottie 的動畫容器。
設置表情動畫的寬高為 40px。
使用 lottie 加載動畫，并設置循環播放為 false，自動播放為 true，來讓表情發送時自動播放動畫，且只播放一次。

現在可以發送表情消息了，相關的動畫也會自動播放，接下來看一下怎么實現炸彈的全屏動畫和對消息元素的晃動效果。

發送帶全屏特效的表情

對于這種帶全屏特效的表情可以單獨進行判斷，也可以在保存表情的對象中定義相關的操作，這里為了簡單起見，我們單獨判斷用戶是否發送了炸彈表情，然后施加相應特效。

首先在 appendMsg() 函數里，進行判斷，如果發送的消息是表情消息，且表情為炸彈，則播放全屏動畫并晃動消息：

function appendMsg(msg, type) {
  if (type === "sticker") {
    playSticker(msg, msgEle);
    if (msg === "bomb") {
      // 播放爆炸動畫
      setTimeout(() => {
        playExplosion(msgEle);
      }, 800);
      // 晃動消息列表
      shakeMessages();
    }
  }
}

這里爆炸全屏動畫延遲了 800 毫秒之后再執行，目的是在炸彈表情播放到合適的時間時，再播放全屏動畫，播放動畫使用了 playExplosion() 函數，并傳遞了消息元素進去。在爆炸全屏動畫結束之后，調用 shakeMessages() 來晃動消息。這里先看一下 playExplosion() 函數的代碼：

function playExplosion(anchor) {
  const explosionAnimeEle = anchor.appendChild(document.createElement("div"));
  explosionAnimeEle.style.position = "absolute";
  explosionAnimeEle.style.width = "200px";
  explosionAnimeEle.style.height = "100px";
  explosionAnimeEle.style.right = 0;
  explosionAnimeEle.style.bottom = 0;
  const explosionPlayer = lottie.loadAnimation({
    container: explosionAnimeEle,
    renderer: "svg",
    loop: false,
    autoplay: true,
    path: "./9990-explosion.json",
  });
  explosionPlayer.setSpeed(0.3);
  // 播放完成后，銷毀爆炸相關的動畫和元素
  explosionPlayer.addEventListener("complete", () => {
    explosionPlayer.destroy();
    explosionAnimeEle.remove();
  });
}

playExplosion() 函數接收一個 anchor 錨點，就是說基于哪個位置開始播放全屏動畫，由于示例中的動畫畫幅比較小，所以把它固定在了最新發送的消息的下方，這里爆炸動畫的 anchor 就是消息元素，之后函數做了下邊的這些操作：

添加全屏動畫元素，設置為絕對定位，寬度 200px，高度 100px，放在最新消息元素的右下角。
加載 lottie 動畫，不循環、自動播放。
由于原動畫速度過快，這里調用 lottie 實例的 setSpeed() 方法，把速度設置為 0.3 倍速。
之后給 lottie 實例設置事件監聽："complete"，它會在動畫執行完成時觸發，里邊銷毀了 lottie 實例和全屏動畫元素。

這樣全屏動畫的效果就實現了。接下來看消息晃動的代碼：

function shakeMessages() {
  [...panelEle.children]
    .reverse()
    .slice(0, 5)
    .forEach((messageEle) => {
      const avatarEle = messageEle.querySelector("img");
      const msgContentEle = messageEle.querySelector("p");
      avatarEle.classList.remove("shake");
      msgContentEle.classList.remove("shake");
      setTimeout(() => {
        avatarEle.classList.add("shake");
        msgContentEle.classList.add("shake");
      }, 700);
    });
}

這個函數的操作是：

使用 reverse() 和 slice() 對最新的 5 條消息進行晃動，也可以把 5 改大一點，對更多消息進行晃動。
然后在循環中，分別給頭像和消息添加 shake class 執行晃動動畫，這個 class 的內容稍后再介紹。
要注意的是，在添加 shake class執行動畫前，需要先刪除 shake，因為有的消息可能在之前已經晃動過了，例如當連續發了多個炸彈表情時。后邊在添加 shake class 時，使用 setTimeout() 延遲了 700 毫秒，目的是在全屏動畫執行到一定程度時再晃動消息。

接下來看一下 shake class 的定義，在 style.css 中添加下方代碼：

.shake {
  animation: shake 0.8s ease-in-out;
}
@keyframes shake {
  from {
    transform: translate3d(0, 0px, 0px);
  }
  10% {
    transform: translate3d(6px, -6px, 0px);
  }
  20% {
    transform: translate3d(-5px, 5px, 0px);
  }
  30% {
    transform: translate3d(4px, -4px, 0px);
  }
  35% {
    transform: translate3d(-3px, 3px, 0px);
  }
  39% {
    transform: translate3d(2px, -2px, 0px);
  }
  41% {
    transform: translate3d(-1px, 1px, 0px);
  }
  42% {
    transform: translate3d(0px, 0px, 0px) rotate(20deg);
  }
  52% {
    transform: rotate(-15deg);
  }
  60% {
    transform: rotate(8deg);
  }
  65% {
    transform: rotate(-3deg);
  }
  67% {
    transform: rotate(1deg);
  }
  70% {
    transform: rotate(0deg);
  }
  to {
    transform: translate3d(0px, 0px, 0px) rotate(0);
  }
}

.shake 中使用了 shake keyframes 定義的動畫，執行時間為 0.8s，動畫執行函數為 ease-in-out。Keyframes 里的代碼比較多，但是都是很簡單的，就是模擬了爆炸時的效果，移動 x 軸和 y 軸的偏移，每次的偏移幅度越來越小，并且越來越快，可以看到百分比的間隔越來越小。在動畫進行到 42% 的時候，加了一些旋轉動畫，這樣就有了落地時的震動效果。由于使用 rotate() 旋轉時的軸心在元素中間，我們可以把消息氣泡的軸心修改一下來實現更真實的效果：

.message p {
  transform-origin: left bottom;
}
.message.mine p {
  transform-origin: right bottom;
}

這里把對方發送的消息的軸心設置在左下角，自己發送的消息則設置在了右下角。

本文所有地址：

示例地址：https://codechina.csdn.net/mirrors/zxuqian/html-css-examples
代碼地址：https://codechina.csdn.net/mirrors/zxuqian/html-css-examples/-/tree/master/31-05-wechat-emoji-effect
lottie: https://cdnjs.com/libraries/bodymovin ，下載 lottie.min.js
南瓜表情：https://lottiefiles.com/43215-pumpkins-sticker-4
炸彈表情：https://lottiefiles.com/3145-bomb
爆炸動畫：https://lottiefiles.com/9990-explosion
Lottie 官網：https://airbnb.io/lottie

總結

現在，這個模擬微信 8.0 動畫表情的功能就實現了。主要就是下邊幾點：

使用 lottie 庫加載并播放動畫。
確定全屏動畫的位置和播放時間。
消息晃動動畫的 CSS 實現。

那么問題來了，作為編程界大佬的C語言能否實現微信對話框爆炸特效呢？這個需要大家一起探索！小編相信C語言的強大，是完全可以做到的，甚至更加簡單，期待各位小伙伴一起討論~

如果你對學習編程有興趣，也想有一天別人使用你開發的軟件或小程序、小特效，沒基礎也完全不用擔心，因為機會來了，點擊下方的了解更多鏈接，開啟你的編程之旅~

在這里我們有什么？

1、海量學習資源

2、名師一對一指導

3、同行之間的相互切磋

4、外包項目拿到手軟

心動不如行動，趕緊點擊下方了解更多免費領取你的專屬福利吧~

在線咨詢

上一篇：JavaScript代碼怎樣引入到HTML中？
下一篇：JavaScript 基本變量語法的使用

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

輸入3個數a,b,c，按大小順序輸出，各種編程語言實現方法

發送普通消息——核心

發送動畫表情

總結

您的項目需求