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
Implementation code for adding slash to Vue element header
<template> <div class="app-containe...
Nginx sample code for implementing dynamic and static separation
In combination with the scenario in this article,...
HTML Self-study Journey (I) Basic Elements and Attributes Practice (Write Your Own Code)
I followed the tutorial on W3school. I think the t...
Nginx implements high availability cluster construction (Keepalived+Haproxy+Nginx)
1. Components and implemented functions Keepalive...
VMware pro15 installation macOS10.13 detailed installation diagram (picture and text)
The editor recently wanted to get started with th...
How to encapsulate axios request with vue
In fact, it is very simple to encapsulate axios i...
Solution to the problem that Navicat cannot remotely connect to MySql server
The solution to the problem that Navicat cannot r...
The most basic code for web pages
◆Add to favorites illustrate Click to add your we...
Linux sar command usage and code example analysis
1. CPU utilization sar -p (view all day) sar -u 1...
HTML code text box limit input text box becomes gray limit text box input
Method 1: Set the readonly attribute to true. INPU...
CSS to achieve the small sharp corner effect of bubbles
Effect picture (the border color is too light, pu...
Solve the problem of inconsistent front and back end ports of Vue
Vue front and back end ports are inconsistent In ...
Solve the cross-domain problem of get and post requests of vue $http
Vue $http get and post request cross-domain probl...
MySQL uses SQL statements to modify table names
In MySQL, you can use the SQL statement rename ta...
Linux (CentOS7) installs Tomcat and sets Tomcat as a startup item (taking tomcat8 as an example)
Table of contents Install Tomcat Download Tomcat ...