This article describes the method of JS to achieve countdown and text scrolling effects. Share it for your reference. The specific implementation method is as follows:
Note: Generally, we will see some activities like bidding in some Taobao stores. From them, we will occasionally find some countdown effects. In some annual meetings and other occasions, we will also find some lottery activities, and from them, we can also see some immediate scrolling effects. Here I will share with you a way to achieve countdown and text scrolling, hoping it will be helpful to you. This is mainly implemented through js.
1. Realization of countdown effect
The complete code for the front desk part is as follows:
The code copy is as follows: <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Implementation of Countdown Effect</title>
</head>
<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 the total number of milliseconds for the specified time
n = (new Date(nowtstr)) - (-100 * i), //Get the current number of milliseconds
c = t - n; //Get the time difference
if (c <= 0) {//If the difference is less than or equal to 0, that is, it expires or is just expired, then the program will be launched
document.getElementById('timer').innerHTML = 'Event has ended';
clearInterval(window['ttt']); //Clear the timer
return; //End execution
}
var ds = 60 * 60 * 24 * 1000, //How many milliseconds are there in a day
d = parseInt(c/ds), // Total milliseconds divided by milliseconds of one day to get the number of days difference
h = parseInt((c - d * ds) / (3600 * 1000)), // Then take the remaining milliseconds after the number of days and divide by the milliseconds per hour to get the hours
m = parseInt((c - d * ds - h * 3600 * 1000) / (60 * 1000)), // Subtract the milliseconds of the days and hours and divide by the milliseconds per minute to get the minutes
s = parseInt((c - d * ds - h * 3600 * 1000 - m * 60 * 1000) / 1000); //Get the last remaining milliseconds divided by 1000 and are the seconds, and the remaining milliseconds are automatically ignored
document.getElementById('timer').innerHTML = '<p style="margin-top:5px;"> <b>' + d + '</b> days<b>' + h + '</b> hours<b>' + m + '</b> minutes<b>' + s + '</b> seconds</p>'; // Finally, the fixed format string is updated to the div with ID timer
i++;
}
(function () {
window['ttt'] = setInterval(function () {
// var timestr = "<%=EndTimeStr %>";// Here you can pass the activity deadline to the foreground through the background. Note that it is in the format "yyyy-MM-dd"
// var nowtstr = "<%=NowTimeStr %>";// Similarly, the current time can be passed to the foreground through the background. Note that it is also in the format "yyyy-MM-dd"
var timestr = "2013-10-21";//You can also customize the deadline of the "yyyy-MM-dd" format.
var nowtstr = "2013-08-23";//You can also customize the current time of the format "yyyy-MM-dd" here
if (timestr != "") {
TimeTo(timestr, nowstr); //Define the phase difference time of countdown, pay attention to the format
}
}, 100); //Define the timer, calculate and update the display of the div every 100 milliseconds, that is, 1 second
})();
</script>
</form>
</body>
</html>
Supplement: Countdown Effect Lite Version:
Copy the code as follows:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Implementation of Countdown Lite Effect</title>
</head>
<body>
<form runat="server">
<table>
<tr>
<th id="day"></th>
<th id="day2"width="100"></th>
<th id="day3"width="100"></th>
<th id="day4"width="100"></th>
</tr>
</table>
<script type="text/javascript">
function timestr()
{
var c = Date.parse("2014-11-11")-Date.parse((new Date()));
if(c<=0)
{
alert('The activity has ended');
clearInterval(aa);//Clear the timer
}
var ds = 60 * 60 * 24 * 1000, //How many milliseconds are there in a day
d = parseInt(c/ds), // Total milliseconds divided by milliseconds of one day to get the number of days difference
h = parseInt((c - d * ds) / (3600 * 1000)), // Then take the remaining milliseconds after the number of days and divide by the milliseconds per hour to get the hours
m = parseInt((c - d * ds - h * 3600 * 1000) / (60 * 1000)), // Subtract the milliseconds of the days and hours and divide by the milliseconds per minute to get the minutes
s = parseInt((c - d * ds - h * 3600 * 1000 - m * 60 * 1000) / 1000); //Get the last remaining milliseconds divided by 1000 and are the seconds, and the remaining milliseconds are 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> when</p>';
document.getElementById('day3').innerHTML = '<p style="margin-top:5px;"> <b>' + m + '</b> points</p>'
document.getElementById('day4').innerHTML = '<p style="margin-top:5px;"> <b>' + s + '</b> seconds</p>'
}
var aa = setInterval(timestr,1000);
</script>
</form>
</body>
</html>
Finally we can see the effect similar to the one shown in the figure below:
2. Implementation of text scrolling effect
The front desk code part is as follows:
The code copy is as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Implementation of 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); //Execute when the page is loading
});
function stopInterval()
{
clearInterval(window['ttt']); //Clear the timer
window['ttt']="";
var aa = "Zhang San, Li Si, Wang Wu, Zhao Liu, Sun Qi, Hu Ba, Zeng Jiu, Liu Shi, Yi Yi, Park Er";
var arr = aa.split(',');
var rdd = 9 * Math.random();
var leaveth = Math.round(rdd);
var letters = arr[leth].toString();
document.getElementById('TextBox1').value = lefts;
}
function aaa() {
var aa = "Zhang San, Li Si, Wang Wu, Zhao Liu, Sun Qi, Hu Ba, Zeng Jiu, Liu Shi, Yi Yi, Park Er";
var arr = aa.split(',');
var rdd = 9 * Math.random();
var leaveth = Math.round(rdd);
var letters = arr[leth].toString();
TimeTo(leths)
}
function TimeTo2(){
if(window['ttt']==""){
window['ttt'] = setInterval(aaa,100);
}
}
</script>
</head>
<body>
<form runat="server">
<input type="text" id="TextBox1"/>
<input type="button" value="Start the lottery" onClick="TimeTo2();"/>
<input type="button" value="get lucky audience" onClick="stopInterval();"/>
</form>
</body>
</html>
The final renderings are as follows:
Knowledge Supplement:
var myDate = new Date();
myDate.getYear(); //Get the current year (2 digits)
myDate.getFullYear(); //Get the full 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 starting from 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 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.