Home > Others

JS implementation countdown and Text scrolling effect example _javascript skills

Source: Internet
Author: User
Tags compact setinterval
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

This article is an example of the implementation of JS countdown and Text scrolling effect method. Share to everyone for your reference. The implementation methods are as follows:

Description: In general, we will see some Taobao shop in some of the activities such as auction, from which we will find some countdown effect, in some of the annual meeting and other occasions we will find some lottery activities, from which we can also see some of the effect of scrolling. Here to share a countdown to achieve and text scrolling method, hope can be helpful to everyone. This is mainly achieved through JS.

The realization of the countdown effect

The complete code for the foreground section is as follows:

Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
Implementation of <title> Countdown effect </title>
<body>
<form runat= "Server" >
<div id= "Timer" > Calculation ... </div>
<script type= "Text/javascript" >
var i = 0;
function Timeto (dd, nowtstr) {
var t = new Date (DD),//Get total number of milliseconds for a specified time
n = (new Date (NOWTSTR))-( -100 * i),//Get current number of milliseconds
c = t-n; Get a time lag
if (c <= 0) {//If the difference is less than or equal to 0, which is expired or just expires, the program is launched
document.getElementById (' Timer '). InnerHTML = ' activity has ended ';
Clearinterval (window[' TTT ')); Clear Timer
Return End execution
}
var ds = 60 * 60 * 24 * 1000,//How many milliseconds a day
D = parseint (c/ds),//Total millisecond divided by day millisecond to get the difference in number of days
h = parseint ((c-d * ds)/(3600 * 1000)),//Then take the remaining milliseconds after the number of days and divide by the number of milliseconds per hour to get the hour
m = parseint ((c-d * ds-h * 3600 * 1000)/(60 * 1000)),//minus the number of milliseconds for days and hours, divided by the number of milliseconds per minute, and the number of minutes
s = parseint ((c-d * ds-h * 3600 * 1000-m * 60 * 1000)/1000); To get the last remaining millisecond divided by 1000 is the number of seconds, and then the remaining milliseconds automatically ignored
document.getElementById (' Timer '). InnerHTML = ' <p style= ' margin-top:5px; > <b> ' + D + ' </b> day <b> ' + H + ' </b> hour <b> ' + M + ' </b> min <b> ' + S + ' </b > sec </p> '; Finally, we'll update the fixed-format string to the div with ID timer.
i++;
}
(function () {
window[' TTT ' = setinterval (function () {
var timestr = "<%=endtimestr%>";//This can be done through the background to the foreground delivery activity deadline, note if the "YYYY-MM-DD" this format
var nowtstr = "<%=nowtimestr%>";//also here can pass the current time through the backstage to the foreground, note also if "YYYY-MM-DD" this format
var timestr = "2013-10-21";///This can also customize the "YYYY-MM-DD" format for the end of the active time
var nowtstr = "2013-08-23";//This can also customize the current time of the format "YYYY-MM-DD"
if (timestr!= "") {
Timeto (Timestr, NOWTSTR); Define the time difference between countdown, note format
}
}, 100); Defines the timer, calculates and updates the div's display every 100 milliseconds, 1 seconds.
})();
</script>
</form>
</body>

Add: Countdown Effect Compact version:

Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> countdown Implementation of the Compact effect </title>

<body>
<form runat= "Server" >
<table border= "1" >
<tr>
<th id= "Day" width= "></th>"
<th id= "Day2" width= "></th>"
<th id= "Day3" width= "></th>"
<th id= "Day4" width= "></th>"
</tr>
</table>
<script type= "Text/javascript" >
function Timestr ()
{
var c = date.parse ("2014-11-11")-date.parse (New Date ());
if (c<=0)
{
Alert (' activity has ended ');
Clearinterval (AA);//Purge Timer
}
var ds = 60 * 60 * 24 * 1000,//How many milliseconds a day
D = parseint (c/ds),//Total millisecond divided by day millisecond to get the difference in number of days
h = parseint ((c-d * ds)/(3600 * 1000)),//Then take the remaining milliseconds after the number of days and divide by the number of milliseconds per hour to get the hour
m = parseint ((c-d * ds-h * 3600 * 1000)/(60 * 1000)),//minus the number of milliseconds for days and hours, divided by the number of milliseconds per minute, and the number of minutes
s = parseint ((c-d * ds-h * 3600 * 1000-m * 60 * 1000)/1000); To get the last remaining millisecond divided by 1000 is the number of seconds, and then the remaining milliseconds automatically ignored
document.getElementById (' Day '). InnerHTML = ' <p style= ' margin-top:5px; > <b> ' + D + ' </b> day </p> ';
document.getElementById (' Day2 '). InnerHTML = ' <p style= ' margin-top:5px; > <b> ' + H + ' </b> time </p> ';
document.getElementById (' Day3 '). InnerHTML = ' <p style= ' margin-top:5px; > <b> ' + M + ' </b> cent </p> '
document.getElementById (' Day4 '). InnerHTML = ' <p style= ' margin-top:5px; > <b> ' + S + ' </b> sec </p> '
}
var AA = setinterval (timestr,1000);
</script>
</form>

</body>

In the end we can see an effect similar to the following figure:

The realization of text scrolling effect

The Front code section is as follows:

Copy Code code as follows:

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
Implementation of <title> text scrolling effect </title>
<script type= "Text/javascript" src= "Jquery-1.6.2.min.js" ></script>
<script type= "Text/javascript" >
function Timeto (DD) {
document.getElementById (' TextBox1 '). Value = DD; Finally, the fixed-format string is updated to the text box with ID TextBox1
}

$ (function () {
window[' ttt '] = setinterval (aaa,100); When the page loads, it executes
});

function Stopinterval ()
{
Clearinterval (window[' TTT ')); Clear Timer
window[' TTT ']= ' ";
var aa = "John, Dick, Harry, Zhao Liu, Sun Seven, Hu Eight, Zeng Nine, Liu 10, Yi Yi, Park II";
var arr = aa.split (', ');
var Rdd = 9 * math.random ();
var leth = Math.Round (RDD);
var leths = arr[leth].tostring ();
document.getElementById (' TextBox1 '). Value = Leths;
}
function aaa () {
var aa = "John, Dick, Harry, Zhao Liu, Sun Seven, Hu Eight, Zeng Nine, Liu 10, Yi Yi, Park II";
var arr = aa.split (', ');
var Rdd = 9 * math.random ();
var leth = Math.Round (RDD);
var leths = arr[leth].tostring ();
Timeto (leths)
}

function TimeTo2 () {
if (window[' TTT ']== "") {
window[' ttt '] = setinterval (aaa,100);
}
}
</script>
<body>
<form runat= "Server" >
<input type= "text" id= "TextBox1"/>
<input type= "button" value= "Start the Lottery" onclick= "TimeTo2 ();" />
<input type= "button" value= "Get Lucky Viewers" onclick= "Stopinterval ();" />
</form>
</body>


The results of the final implementation are shown below:


Knowledge Supplement:

var mydate = new Date ();
Mydate.getyear (); Get Current year (2-bit)
Mydate.getfullyear (); Get full year (4-bit, 1970-????)
Mydate.getmonth (); Get Current month (0-11, 0 for January)
Mydate.getdate (); Get the current day (1-31)
Mydate.getday (); Get Current week x (0-6, 0 for Sunday)
Mydate.gettime (); Gets the current time (number of milliseconds since 1970.1.1)
Mydate.gethours (); Get the current number of hours (0-23)
Mydate.getminutes (); Get the current number of minutes (0-59)
Mydate.getseconds (); Get the current number of seconds (0-59)
Mydate.getmilliseconds (); Get current number of milliseconds (0-999)
Mydate.tolocaledatestring (); Get Current date
var mytime=mydate.tolocaletimestring (); Get current time
Mydate.tolocalestring (); Get Date and time

I hope this article will help you with the Web design based on JS.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
race countdown sound effect scrolling text after effects template smoke text effect download java interface implementation example data analysis and presentation skills pwc approach interface and implementation in java difference between interface and implementation

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More