current position：Home>Implementation time output and greetings of jQuery instance

Implementation time output and greetings of jQuery instance

2022-01-27 01:28:48 【This website uses the user account to publish information witho】

subject ： Output the current time and greeting on the screen , The specific requirements are as follows ：

  • The time is displayed on the screen , The format is Now the time is Hours : minute , Such as Now the time is 12:43
  • morning 8 Before the point , Show Good morning
  • 8 Point to 12 spot , Good morning
  • 12 Point to 14 spot , Show good noon
  • 14 Point to 18 spot , Good afternoon
  • 18 After that , Good evening

This topic is relatively simple , The direct implementation is as follows ：

Basics HTML The code is as follows 

<!DOCTYPE html><html>   <head>       <meta charset="utf-8" />       <title> Different greetings are displayed in different time periods </title>    </head>    <body>        <div id='app'></div>    </body></html>

Don't forget to be in header Introduction in jQuery.

<script src="jquery-3.6.0.min.js"></script>

JavaScript The code is as follows ：

<script>   var day, hour, minute;  // js Date class in   day = new Date();  // For hours   hour = day.getHours();  // Get minutes   minute = day.getMinutes();  //  If the hours are less than 10, Add in front 0, such as 9 Display as 09  if (hour < 10) {    hour = '0' + hour;  }  //  If minutes are less than 10, Add in front 0, such as 9 Display as 09  if (minute < 10) {    minute = '0' + minute;  }  //  String concatenation   var str = ' Now the time is  ' + hour + ':' + minute + ', ';  //  greetings   var greeting = '';  // 8 Before point , Good morning   if (hour < 8) {    greeting += ' Good morning ';  }  // 8 Point to 12 spot , Good morning   else if(hour < 12) {    greeting += ' Good morning ';  }  // 12 Point to 14 spot , Good noon   else if(hour < 14) {    greeting += ' Good noon ';  }  // 14 Point to 18 spot , Good afternoon,   else if(hour < 18) {    greeting += ' Good afternoon, ';  }  // 18 After that , Good evening   else {    greeting += ' Good evening ';  }  //  String splicing   str += greeting;  //  Set the value   $('#app').text(str)</script>

The effect is as follows ：



JavaScript example 03 | Realize time output and greetings

copyright notice
author[This website uses the user account to publish information witho],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270128462784.html

The sidebar is recommended

guess what you like

Random recommended