JavaScript implements simple date effects

JavaScript implements simple date effects

The specific code of JavaScript date effects is for your reference. The specific content is as follows

Directly on the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #date{
            width: 450px;
            height: 300px;
            background-color: darkorange;
            border-radius: 10px;
            margin: 100px auto;
        }
        #nowDate{
            width: 450px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            color: #fff;
            font-size: 26px;
        }
        #day{
            width: 200px;
            height: 200px;
            line-height: 200px;
            background-color: orchid;
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="date">
        <p id="nowDate"></p>
        <p id="day"></p>
    </div>
    <script type="text/javascript">
        // Get the tag var nowDate = document.getElementById("nowDate");
        var day = document.getElementById("day");

        // Use timer to update time changes setInterval(nowNumTime,1000);

        nowNumTime();

        function nowNumTime(){
            var now = new Date();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            var temp = '' + (hour>12 ? hour-12:hour);
            var year = now.getFullYear();
            var month = now.getMonth();
            var d = now.getDate();
            var week = now.getDay();

            console.log(week); //Index var weeks = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];

            // console.log(temp);
            if (hour === 0){
                temp = '12';
            }
            temp = temp + (minute <10 ? ':0':":"+minute);
            temp = temp + (second <10 ? ':0':":"+second);
            temp = temp + (hour>=12 ? ' PM':' AM');
            temp = `${year}${month}${d}${temp}${weeks[week]}`;
            // console.log(temp);
            nowDate.innerHTML = temp;
        }
    </script>
</body>
</html>

Implementation effect diagram:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Summary of js formatting time and date functions
  • 5 ways to initialize js data date
  • A simple example of comparing JS dates
  • How to convert js timestamp to date format
  • Date time js control
  • 3 ways to solve json date format problems
  • js gets the date: yesterday, today, tomorrow, and the day after tomorrow
  • js uses the setDate() function of the Date object to add and subtract dates
  • Conversion between js timestamp and date format
  • JavaScript timestamp and date string conversion code (super simple)

<<:  The meaning and usage of linux cd

>>:  How to Clear Disk Space on CentOS 6 or CentOS 7

Recommend

Drawing fireworks effect of 2021 based on JS with source code download

This work uses the knowledge of front-end develop...

JavaScript Document Object Model DOM

Table of contents 1. JavaScript can change all HT...

Press Enter to automatically submit the form. Unexpected discovery

Copy code The code is as follows: <!DOCTYPE ht...

Mysql date formatting and complex date range query

Table of contents Preface Query usage scenario ca...

Detailed explanation of the usage of setUp and reactive functions in vue3

1. When to execute setUp We all know that vue3 ca...

Html easily implements rounded rectangle

Question: How to achieve a rounded rectangle usin...

Complete steps for deploying a front-end and back-end separated nginx configuration

Preface It's a cliché. Here I will talk about...

SQL query for users who have logged in for at least n consecutive days

Take 3 consecutive days as an example, using the ...

Explanation of the usage of replace and replace into in MySQL

MySQL replace and replace into are both frequentl...

A brief discussion on HTML titles, paragraphs, line breaks, horizontal lines, and special characters

title XML/HTML CodeCopy content to clipboard <...

Element Plus implements Affix

Table of contents 1. Component Introduction 2. So...

JavaScript style object and CurrentStyle object case study

1. Style object The style object represents a sin...

Detailed explanation of Linux command unzip

Table of contents 1. unzip command 1.1 Syntax 1.2...

Solution to ElementUI's this.$notify.close() call not working

Table of contents Requirement Description Problem...

How to install and configure SSH service in Ubuntu 18.04

Install ssh tool 1. Open the terminal and type th...