Home  >  Article  >  Web Front-end  >  JS implementation of countdown and text scrolling effect examples_javascript skills

JS implementation of countdown and text scrolling effect examples_javascript skills

WBOY
WBOYOriginal
2016-05-16 16:32:541216browse

The example in this article describes how to implement countdown and text scrolling effects with JS. Share it with everyone for your reference. The specific implementation method is as follows:

Note: Generally, we will see some activities such as bidding in some Taobao stores, from which we will sometimes find some countdown effects. In some annual meetings and other occasions, we will also find some lottery activities, from which We can also see some random scrolling effects. Here I would like to share with you a method to implement countdown and text scrolling. I hope it can be helpful to you. This is mainly implemented through js.

1. Implementation of countdown effect

The complete code of the frontend part is as follows:

Copy code The code is as follows:



Realization of countdown effect



Calculating. . .




Supplement: Lite version of countdown effect:

Copy code The code is as follows:




Realization of countdown lite version effect













Finally we can see an effect similar to the picture below:

2. Implementation of text scrolling effect

The front-end code part is as follows:

Copy code The code is as follows:




Implementation of text scrolling effect













The final rendering is as follows:



Knowledge supplement:

var myDate = new Date();

myDate.getYear(); //Get the current year (2 digits)

myDate.getFullYear(); //Get the complete year (4 digits, 1970-????)
myDate.getMonth(); //Get the current month (0-11, 0 represents January)
myDate.getDate(); //Get the current day (1-31)
myDate.getDay(); //Get the current week X (0-6, 0 represents Sunday)
myDate.getTime(); //Get the current time (number of milliseconds since 1970.1.1)
myDate.getHours(); //Get the current hours (0-23)
myDate.getMinutes(); //Get the current minutes (0-59)
myDate.getSeconds(); //Get the current seconds (0-59)
myDate.getMilliseconds(); //Get the current number of milliseconds (0-999)
myDate.toLocaleDateString(); //Get the current date
var mytime=myDate.toLocaleTimeString(); //Get the current time
myDate.toLocaleString( ); //Get date and time

I hope this article will be helpful to everyone’s web programming based on js.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn