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

Detailed explanation of the steps of using ElementUI in actual projects

Table of contents 1. Table self-sorting 2. Paging...

HTML implementation of a simple calculator with detailed ideas

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

CSS style writing order and naming conventions and precautions

The significance of writing order Reduce browser ...

A simple way to change the password in MySQL 5.7

This is an official screenshot. After MySQL 5.7 i...

JavaScript to implement a simple clock

This article example shares the specific code for...

HTML table tag tutorial (17): table title vertical alignment attribute VALIGN

The table caption can be placed above or below th...

Linux swap partition (detailed explanation)

Table of contents linux 1. What is SWAP 2. What d...

CSS polar coordinates example code

Preface The project has requirements for charts, ...

Explanation of the usage scenarios of sql and various nosql databases

SQL is the main trunk. Why do I understand it thi...

Detailed explanation of the installation and configuration of ROS in CLion2020.1.3 under ubuntu20.04

1. Download, install and activate CLion Just foll...

Realize breadcrumb function based on vue-router's matched

This article mainly introduces the breadcrumb fun...

Detailed explanation of the buffer pool in MySQL

Everyone knows that data in MySQL needs to be wri...

MySQL 5.7.16 installation and configuration method graphic tutorial (Ubuntu 16.04)

How to install MySQL 5.7 in Ubuntu 16.04? Install...

Detailed explanation of calculated properties, monitoring properties and life cycle in Vue.js

Table of contents Preface Computed properties Int...

Detailed method of using goaccess to analyze nginx logs

Recently I want to use goaccess to analyze nginx ...