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:
|
<<: The meaning and usage of linux cd
>>: How to Clear Disk Space on CentOS 6 or CentOS 7
Recommend
Detailed explanation of some settings for Table adaptation and overflow
1. Two properties of table reset: ①border-collaps...
Tips for turning pixels into comprehensive brand experiences
Editor: This article discusses the role that inte...
How to query duplicate data in mysql table
INSERT INTO hk_test(username, passwd) VALUES (...
Detailed explanation of MySQL cursor concepts and usage
This article uses examples to explain the concept...
CocosCreator Getting Started Tutorial: Making Your First Game with TS
Table of contents premise TypeScript vs JavaScrip...
How to implement JavaScript's new operator yourself
Table of contents Constructor new Operator Implem...
Summary of the unknown usage of "!" in Linux
Preface In fact, the humble "!" has man...
How to run top command in batch mode
top command is the best command that everyone is ...
In-depth explanation of InnoDB locks in MySQL technology
Table of contents Preface 1. What is a lock? 2. L...
The process of building a development environment based on visual studio code + react
Development environment windows Development Tools...
There is no problem with the Linux file path when deploying the window and Linux projects
I haven't written a blog for a long time. Las...
Teach you the detailed process of installing DOClever with Docker Compose
Table of contents 1. What is Docker Compose and h...
Share CSS writing standards and order [recommended for everyone to use]
CSS writing order 1. Position attributes (positio...
Summary of MySQL5 green version installation under Windows (recommended)
1 Download MySQL Download address: http://downloa...
Detailed code for adding electron to the vue project
1. Add in package.json "main": "el...