Maison interface Web Questions et réponses frontales Comment utiliser JavaScript pour implémenter la fonction de salutation

Comment utiliser JavaScript pour implémenter la fonction de salutation

Apr 24, 2023 pm 02:47 PM

Dans notre vie quotidienne, les salutations sont un moyen de communication très courant. Qu'il s'agisse de rencontrer des amis ou de communiquer avec des collègues, les gens veulent faire preuve de courtoisie et d'enthousiasme à travers les salutations. Il en va de même pour la communication en ligne. En tant que développeurs, nous pouvons implémenter la fonction d'accueil via JavaScript pour rendre le site Web ou l'application plus convivial.

1. Salutations de base

Tout d'abord, nous devons définir quelques salutations de base. Ici, nous pouvons définir trois salutations différentes :

  • Bonjour
  • Bon après-midi
  • Bonsoir

Nous pouvons afficher le message d'accueil correspondant par. obtenir l'heure actuelle et la juger. Le code est le suivant :

var date = new Date();
var hour = date.getHours();

if(hour >= 5 && hour < 12){
    document.write("早上好");
}
else if(hour >= 12 && hour < 18){
    document.write("下午好");
}
else {
    document.write("晚上好");
}
Copier après la connexion

Ce code obtient d'abord l'objet heure actuelle via new Date(), puis utilise getHours ()</code. > La méthode obtient l'heure actuelle. Ensuite, portez un jugement dans l'instruction if-else. Si l'heure actuelle est le matin (entre 5 heures et 12 heures), affichez "Bonjour". horloge et 18 heures), puis sortie "Bonsoir", sinon sortie "Bonsoir". <code>new Date()获取当前时间对象,然后使用getHours()方法获取当前的小时数。接下来,在if-else语句中进行判断,如果当前时间在早上(5点到12点之间),则输出“早上好”,如果在中午(12点到18点之间),则输出“下午好”,否则输出“晚上好”。

二、根据用户输入的名字输出问候语

除了基本的问候语,我们还可以让我们的问候语更加个性化,例如根据用户输入的名字输出问候语。代码如下:

var name = prompt("请输入您的名字:");
var date = new Date();
var hour = date.getHours();
var greet;

if(hour >= 5 && hour < 12){
    greet = "早上好";
}
else if(hour >= 12 && hour < 18){
    greet = "下午好";
}
else {
    greet = "晚上好";
}

document.write("<p>"+greet+","+name+",欢迎来到我们的网站!</p>");
Copier après la connexion

这段代码首先使用prompt()方法弹出一个输入框,要求用户输入自己的名字。接下来,根据获取到的当前小时数和之前的代码段一样进行判断,不同的是在判断语句中将问候语存储在一个变量中。最后,将问候语和用户输入的名字输出到网页中。

三、实现随机问候语

在前两个例子中,我们都是使用预定义的问候语来进行输出,有时候我们可能需要更有趣、更生动的问候语。这时候,我们可以通过建立一个包含多个问候语的数组,然后随机选择一个进行输出。代码如下:

var greetings = ["您好!", "欢迎光临!", "祝您今天有一个愉快的一天!", "早上好!", "下午好!", "晚上好!", "最近好吗?"];
var randomGreet = greetings[Math.floor(Math.random()*greetings.length)];
document.write("<p>"+randomGreet+"</p>");
Copier après la connexion

这段代码首先定义了一个包含多个问候语的数组greetings,然后使用了Math.random()Math.floor()

2. Afficher des salutations basées sur le nom saisi par l'utilisateur

En plus des salutations de base, nous pouvons également rendre nos salutations plus personnalisées, par exemple en émettant des salutations basées sur les noms saisis par l'utilisateur. Le code est le suivant :

rrreee

Ce code utilise d'abord la méthode prompt() pour faire apparaître une zone de saisie et demander à l'utilisateur de saisir son nom. Ensuite, le jugement est effectué sur la base de l'heure actuelle obtenue et du segment de code précédent. La différence est que le message d'accueil est stocké dans une variable de l'instruction de jugement. Enfin, le message d'accueil et le nom saisi par l'utilisateur sont affichés sur la page Web. 🎜🎜3. Implémenter des salutations aléatoires🎜🎜Dans les deux premiers exemples, nous utilisons des salutations prédéfinies pour la sortie. Parfois, nous pouvons avoir besoin de salutations plus intéressantes et plus vives. À ce stade, nous pouvons créer un tableau contenant plusieurs salutations, puis en sélectionner une au hasard pour la sortie. Le code est le suivant : 🎜rrreee🎜Ce code définit d'abord un tableau greetings contenant plusieurs salutations, puis utilise Math.random() et Math The floor. () sélectionne au hasard un message d'accueil et l'affiche sur la page Web. 🎜🎜Résumé : 🎜🎜La fonction de salutation via JavaScript peut être implémentée via des salutations prédéfinies, des noms saisis par l'utilisateur et une sélection aléatoire. Lors du développement d'un site Web ou d'une application, la fonction d'accueil peut permettre aux utilisateurs de se sentir plus amicaux et amicaux, rendant l'expérience plus confortable. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Le rôle de React dans HTML: Amélioration de l'expérience utilisateur Le rôle de React dans HTML: Amélioration de l'expérience utilisateur Apr 09, 2025 am 12:11 AM

React combine JSX et HTML pour améliorer l'expérience utilisateur. 1) JSX incorpore du HTML pour rendre le développement plus intuitif. 2) Le mécanisme DOM virtuel optimise les performances et réduit les opérations DOM. 3) Interface utilisateur de gestion basée sur les composants pour améliorer la maintenabilité. 4) La gestion des états et le traitement des événements améliorent l'interactivité.

React and the frontend: construire des expériences interactives React and the frontend: construire des expériences interactives Apr 11, 2025 am 12:02 AM

React est l'outil préféré pour construire des expériences frontales interactives. 1) Réagir simplifie le développement de l'interface utilisateur par la composontisation et le DOM virtuel. 2) Les composants sont divisés en composants de fonction et composants de classe. Les composants de fonction sont plus simples et les composants de la classe fournissent plus de méthodes de cycle de vie. 3) Le principe de travail de React repose sur le DOM virtuel et l'algorithme de réconciliation pour améliorer les performances. 4) La gestion de l'État utilise USESTATE ou This. State, et des méthodes de cycle de vie telles que ComponentDidMount sont utilisées pour une logique spécifique. 5) L'utilisation de base comprend la création de composants et la gestion de l'état, et l'utilisation avancée implique des crochets personnalisés et une optimisation des performances. 6) Les erreurs courantes incluent les mises à jour de statut et les problèmes de performance inappropriés, les compétences de débogage comprennent l'utilisation de Reactdevtools et d'excellents

React Composants: Création d'éléments réutilisables en HTML React Composants: Création d'éléments réutilisables en HTML Apr 08, 2025 pm 05:53 PM

Les composants React peuvent être définis par des fonctions ou des classes, encapsulant la logique de l'interface utilisateur et acceptant les données d'entrée via des accessoires. 1) Définissez les composants: utilisez des fonctions ou des classes pour retourner les éléments de réact. 2) Rendre le composant: React Cappel Render Method ou Exécute le composant de fonction. 3) Composants de multiplexage: passer des données à travers des accessoires pour construire une interface utilisateur complexe. L'approche du cycle de vie des composants permet d'exécuter la logique à différentes étapes, améliorant l'efficacité de développement et la maintenabilité du code.

Quels sont les avantages de l'utilisation de TypeScript avec React? Quels sont les avantages de l'utilisation de TypeScript avec React? Mar 27, 2025 pm 05:43 PM

TypeScript améliore le développement de React en offrant la sécurité du type, en améliorant la qualité du code et en offrant un meilleur support IDE, réduisant ainsi les erreurs et améliorant la maintenabilité.

Comment pouvez-vous utiliser UserReducer pour une gestion complexe de l'état? Comment pouvez-vous utiliser UserReducer pour une gestion complexe de l'état? Mar 26, 2025 pm 06:29 PM

L'article explique l'utilisation d'un userReducer pour une gestion complexe de l'état dans React, détaillant ses avantages sur UseState et comment l'intégrer avec l'utilisation d'effet pour les effets secondaires.

React et la pile frontale: les outils et les technologies React et la pile frontale: les outils et les technologies Apr 10, 2025 am 09:34 AM

React est une bibliothèque JavaScript pour la construction d'interfaces utilisateur, avec ses composants principaux et sa gestion de l'État. 1) Simplifiez le développement de l'interface utilisateur par la composontisation et la gestion de l'État. 2) Le principe de travail comprend la réconciliation et le rendu, et l'optimisation peut être mise en œuvre via React.Memo et UseMemo. 3) L'utilisation de base est de créer et de rendre des composants, et l'utilisation avancée comprend l'utilisation de crochets et de contextapi. 4) Erreurs courantes telles que la mise à jour du statut incorrect, vous pouvez utiliser ReactDevTools pour déboguer. 5) L'optimisation des performances comprend l'utilisation de React.Memo, des listes de virtualisation et de la circulation des codes, et la maintenance de code et maintenable du code est la meilleure pratique.

L'écosystème de React: bibliothèques, outils et meilleures pratiques L'écosystème de React: bibliothèques, outils et meilleures pratiques Apr 18, 2025 am 12:23 AM

L'écosystème React comprend des bibliothèques de gestion d'État (telles que Redux), des bibliothèques de routage (telles que Reactrouter), des bibliothèques de composants d'interface utilisateur (telles que Material-UI), des outils de test (tels que la plaisanterie) et de la construction d'outils (tels que WebPack). Ces outils fonctionnent ensemble pour aider les développeurs à développer et à maintenir efficacement les applications, à améliorer la qualité du code et l'efficacité de développement.

React vs frameworks backend: une comparaison React vs frameworks backend: une comparaison Apr 13, 2025 am 12:06 AM

React est un cadre frontal pour la construction d'interfaces utilisateur; Un framework back-end est utilisé pour créer des applications côté serveur. React fournit des mises à jour d'interface utilisateur composentisées et efficaces, et le framework backend fournit une solution de service backend complète. Lors du choix d'une pile technologique, les exigences du projet, les compétences en équipe et l'évolutivité doivent être prises en compte.

See all articles