Web Front-end
JS Tutorial
Display the current time and countdown function based on javascript_javascript skills
Display the current time and countdown function based on javascript_javascript skills
For self-practice, I would like to share with you a piece of js native code.
Date objects are used to handle dates and times.
Date() Returns the date and time of the current day.
getDate() Returns the day of the month (1 ~ 31) from a Date object.
getDay() Returns the day of the week (0 ~ 6) from a Date object.
getMonth() Returns the month (0 ~ 11) from the Date object.
getFullYear() Returns the year as a four-digit number from a Date object.
getYear() Please use getFullYear() method instead.
getHours() Returns the hours (0 ~ 23) of the Date object.
getMinutes() returns the minutes (0 ~ 59) of the Date object.
getSeconds() Returns the seconds of the Date object (0 ~ 59).
getMilliseconds() returns the milliseconds (0 ~ 999) of the Date object.
getTime() Returns the number of milliseconds since January 1, 1970.
getTimezoneOffset() Returns the difference in minutes between local time and Greenwich Mean Time (GMT).
getUTCDate() Returns the day of the month (1 ~ 31) from a Date object based on universal time.
getUTCDay() Returns the day of the week (0 ~ 6) from a Date object based on universal time.
getUTCMonth() Returns the month (0 ~ 11) from the Date object according to universal time.
getUTCFulYear() Returns the four-digit year from a Date object based on universal time.
getUTCHours() Returns the hour (0 ~ 23) of the Date object according to universal time.
getUTCMinutes() Returns the minutes (0 ~ 59) of a Date object according to universal time.
getUTCSeconds() Returns the seconds (0 ~ 59) of a Date object according to universal time.
getUTCMilliseconds() Returns the milliseconds (0 ~ 999) of the Date object according to universal time.
parse() Returns the number of milliseconds from midnight on January 1, 1970 to the specified date (string).
setDate() sets the day of the month (1 ~ 31) in the Date object.
setMonth() sets the month (0 ~ 11) in the Date object.
setFullYear() Sets the year (four digits) in the Date object.
setYear() Please use setFullYear() method instead.
setHours() Sets the hours (0 ~ 23) in the Date object.
setMinutes() Sets the minutes (0 ~ 59) in the Date object.
setSeconds() Sets the seconds (0 ~ 59) in the Date object.
setMilliseconds() Sets the milliseconds (0 ~ 999) in the Date object.
setTime() sets a Date object in milliseconds.
setUTCDate() Sets the day of the month (1 ~ 31) in the Date object according to universal time.
setUTCMonth() Sets the month (0 ~ 11) in the Date object according to universal time.
setUTCFulYear() Sets the year (four digits) in a Date object according to universal time.
setUTCHours() Sets the hour (0 ~ 23) in the Date object according to universal time.
setUTCMinutes() Sets the minutes in the Date object (0 ~ 59) according to universal time.
setUTCSeconds() Sets the seconds in the Date object (0 ~ 59) according to universal time.
setUTCMilliseconds() Sets the milliseconds (0 ~ 999) in the Date object according to universal time.
toSource() returns the source code of this object.
toString() Converts a Date object to a string.
toTimeString() Converts the time portion of a Date object to a string.
toDateString() Converts the date portion of the Date object to a string.
toGMTString() Please use toUTCString() method instead.
toUTCString() Converts a Date object to a string according to universal time.
toLocaleString() Converts a Date object to a string according to the local time format.
toLocaleTimeString() Converts the time part of the Date object to a string according to the local time format.
toLocaleDateString() Converts the date part of the Date object to a string according to the local time format.
UTC() Returns the number of milliseconds from January 1, 1970 to the specified date, according to universal time.
valueOf() returns the original value of the Date object.
Specific implementation code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>原生js 当前时间 倒计时代码</title>
<style>
*{margin:0;padding:0;}
body{text-align:center;}
.text{margin-top:150px;font-size:14px;}
</style>
<script>
window.onload=function(){
getMyTime();
getMyTime1();
}
//1.前面补0
function p(n){
return n<10?'0'+n:n;
}
//2.倒计时
function getMyTime(){
var startDate=new Date();
var endDate=new Date('2017/4/17 11:15:00');
var countDown=(endDate.getTime()-startDate.getTime())/1000;
var day=parseInt(countDown/(24*60*60));
var h=parseInt(countDown/(60*60)%24);
var m=parseInt(countDown/60%60);
var s=parseInt(countDown%60);
document.getElementById('time').innerHTML=day+'天'+p(h)+'时'+p(m)+'分'+p(s)+'秒';
setTimeout('getMyTime()',500);
if(countDown<=0){
document.getElementById('time').innerHTML='活动结束';
}
}
//3.当前时间
function getMyTime1(){
var myDate=new Date();
var year=myDate.getFullYear();
var month=myDate.getMonth()+1;
var day=myDate.getDate();
var week=myDate.getDay();
var array=['星期日','星期一','星期二','星期三','星期四','星期五','星期六',];
var hour=myDate.getHours();
var minute=myDate.getMinutes();
var second=myDate.getSeconds();
document.getElementById('time1').innerHTML=year+'年'+month+'月'+day+'日'+' '+array[week]+' '+p(hour)+':'+p(minute)+':'+p(second);
setTimeout('getMyTime1()',500);
}
</script>
</head>
<body>
<div class="text">
<p>倒计时间：<span id="time"></span></p>
<p>当前时间：<span id="time1"></span></p>
</div>
</body>
</html>The above is the entire content of this article. I hope it will be helpful to everyone in learning javascript programming.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to write a simple countdown program in C++?
Nov 03, 2023 pm 01:39 PM
C++ is a widely used programming language that is very convenient and practical in writing countdown programs. Countdown program is a common application that can provide us with very precise time calculation and countdown functions. This article will introduce how to use C++ to write a simple countdown program. The key to implementing a countdown program is to use a timer to calculate the passage of time. In C++, we can use the functions in the time.h header file to implement the timer function. The following is the code for a simple countdown program
How to use JS and Baidu Maps to implement map pan function
Nov 21, 2023 am 10:00 AM
How to use JS and Baidu Map to implement map pan function Baidu Map is a widely used map service platform, which is often used in web development to display geographical information, positioning and other functions. This article will introduce how to use JS and Baidu Map API to implement the map pan function, and provide specific code examples. 1. Preparation Before using Baidu Map API, you first need to apply for a developer account on Baidu Map Open Platform (http://lbsyun.baidu.com/) and create an application. Creation completed
Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS
Dec 17, 2023 pm 06:55 PM
Essential tools for stock analysis: Learn the steps to draw candle charts in PHP and JS. Specific code examples are required. With the rapid development of the Internet and technology, stock trading has become one of the important ways for many investors. Stock analysis is an important part of investor decision-making, and candle charts are widely used in technical analysis. Learning how to draw candle charts using PHP and JS will provide investors with more intuitive information to help them make better decisions. A candlestick chart is a technical chart that displays stock prices in the form of candlesticks. It shows the stock price
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side
How to create a stock candlestick chart using PHP and JS
Dec 17, 2023 am 08:08 AM
How to use PHP and JS to create a stock candle chart. A stock candle chart is a common technical analysis graphic in the stock market. It helps investors understand stocks more intuitively by drawing data such as the opening price, closing price, highest price and lowest price of the stock. price fluctuations. This article will teach you how to create stock candle charts using PHP and JS, with specific code examples. 1. Preparation Before starting, we need to prepare the following environment: 1. A server running PHP 2. A browser that supports HTML5 and Canvas 3
PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts
Dec 18, 2023 pm 03:39 PM
With the rapid development of Internet finance, stock investment has become the choice of more and more people. In stock trading, candle charts are a commonly used technical analysis method. It can show the changing trend of stock prices and help investors make more accurate decisions. This article will introduce the development skills of PHP and JS, lead readers to understand how to draw stock candle charts, and provide specific code examples. 1. Understanding Stock Candle Charts Before introducing how to draw stock candle charts, we first need to understand what a candle chart is. Candlestick charts were developed by the Japanese
How to use JS and Baidu Maps to implement map polygon drawing function
Nov 21, 2023 am 10:53 AM
How to use JS and Baidu Maps to implement map polygon drawing function. In modern web development, map applications have become one of the common functions. Drawing polygons on the map can help us mark specific areas for users to view and analyze. This article will introduce how to use JS and Baidu Map API to implement map polygon drawing function, and provide specific code examples. First, we need to introduce Baidu Map API. You can use the following code to import the JavaScript of Baidu Map API in an HTML file
Get the current time using DateTime.Now function in C#
Nov 18, 2023 pm 03:14 PM
Use the DateTime.Now function in C# to get the current time. In C# programming, we often need to get the current time. The DateTime.Now function is provided in C# to obtain the current system time. Below I will introduce to you how to use the DateTime.Now function and give specific code examples. The DateTime.Now function returns a DateTime object representing the current date and time. Its usage is very simple, just call the function. Below is one
