JQuery copy xiaomi mobile phone panic page countdown effect
- 2020-05-05 10:57:17
- OfStack
1. Effect and function description
The control of time tells the user how much time is left in an activity, down to seconds.
2. Implementation principle
First define the cutoff time of the activity, to re - year to millisecond, to get the current year to seconds, to take the cutoff time, subtract the current time, how much time is left and then show the remaining time to figure out how much time is left until the deadline.
The main code is
var startTime = new Date();
// Get the current time
startTime.setFullYear(2016, 5, 27);
// Call setting year
startTime.setHours(23);
// Invokes the hour field that sets the specified time
startTime.setMinutes(59);
// Invokes the minute field that sets the specified time
startTime.setSeconds(59);
// Invokes the second field that sets the specified time
startTime.setMilliseconds(999);
// Call the millisecond field of the specified time
var EndTime=startTime.getTime();
// Get the deadline
var nMS = EndTime - NowTime.getTime();
// The remaining time is obtained by subtracting the current time from the deadline
var nD = Math.floor(nMS/(1000 * 60 * 60 * 24));
// Define the parameters Get the number
var nH = Math.floor(nMS/(1000*60*60)) % 24;
// Define the parameters For hours
var nM = Math.floor(nMS/(1000*60)) % 60;
// Define the parameters For minutes
var nS = Math.floor(nMS/1000) % 60;
// Define the parameters Get the second These are the current times
3. Operating environment
IE6 IE7 IE8 and above Firefox and Google
You can see at the bottom of the page where you can download the image and you don't need to change the folder name because it's already written and matches the path in html5,
5. Change the encoding type to UTF-8 when you save the html file (UTF-8 is signed), so that part of Chinese can be displayed normally. Change the save type (T) to all files (*.*)
6. Code
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180%;background:#fff;}
.timerbg{background:url(images/bg.png) no-repeat;height:60px;width:980px;margin:20px auto;}
.timerbg div{float:right;font-size:16px;margin:24px 0 0 0;font-weight:800;text-align:left;width:335px;font-family:" Microsoft jas black "," Song typeface ";}
.timerbg div strong{font-size:28px;margin:0 13px;color:#D6000F;font-family:Arial;}
#daoend{margin:24px 0 0 0;width:324px;color:#D6000F;font-size:22px;}
</style>
</head>
<body>
<div class="timerbg">
<div id="daoend" style="display:none;"> This activity is over. </div>
<div id="dao"><strong id="RemainD"></strong> day <strong id="RemainH"></strong> when <strong id="RemainM"></strong> points <strong id="RemainS"></strong> seconds </div>
</div>
<script type="text/javascript">
var startTime = new Date();
// Defines a parameter that returns the date and time of the day
startTime.setFullYear(2016, 5, 27);
// Call setting year
startTime.setHours(23);
// Invokes the hour field that sets the specified time
startTime.setMinutes(59);
// Invokes the minute field that sets the specified time
startTime.setSeconds(59);
// Invokes the second field that sets the specified time
startTime.setMilliseconds(999);
// Call the millisecond field of the specified time
var EndTime=startTime.getTime();
// Defines a parameter to return a distance 1970 years 1 month 1 The number of milliseconds between days
function GetRTime(){
// Define methods
var NowTime = new Date();
// Defines a parameter that returns the date and time of the day
var nMS = EndTime - NowTime.getTime();
// Define the parameters EndTime Minus the NowTime Parameter to get the return distance 1970 years 1 month 1 The number of milliseconds between days
var nD = Math.floor(nMS/(1000 * 60 * 60 * 24));
// Define the parameters Get the number
var nH = Math.floor(nMS/(1000*60*60)) % 24;
// Define the parameters For hours
var nM = Math.floor(nMS/(1000*60)) % 60;
// Define the parameters For minutes
var nS = Math.floor(nMS/1000) % 60;
// Define the parameters Get the second
if (nMS < 0){
// If seconds are greater than 0
$("#dao").hide();
// Days of gain hidden
$("#daoend").show();
// Get the activity deadline to expand
}else{
// Otherwise,
$("#dao").show();
// Number of days in
$("#daoend").hide();
// Activity deadlines are hidden
$("#RemainD").text(nD);
// According to number of days
$("#RemainH").text(nH);
// Shows hours
$("#RemainM").text(nM);
// minutes
$("#RemainS").text(nS);
// According to second
}
}
$(document).ready(function () {
// Define methods
var timer_rt = window.setInterval("GetRTime()", 1000);
// Define the parameters show GetRTime() methods 1000 Start after milliseconds
});
</script>
</body>
</html>
7. After the countdown is completed, set the hidden attribute of the button to false
This code is intercepted from my project, friends can be assured to use, if you have any questions, please leave a message.