JavaScript to achieve a simple Countdown Bullet window demo drawings _javascript tips

Source: Internet
Author: User
Tags button type visibility
Recently made a simple settings page, because you need to restart the device function, so I want to add a countdown to the window interface.

The idea at first was to customize an alert window, but soon found that alert would be parked there waiting for the click Confirmation instead of the automatic sequential display I wanted.

Later, just think of direct display and hide div made by the window, it can be achieved. Based on this idea, we have the following:

First look at the effect of the picture:


Then look at the source code:
Copy Code code as follows:

<!------------------restart operation ready for window--------------->
<div id= "Reboot_pre" style= "width:450px; height:200px; Margin-left:auto; Margin-right:auto; margin-top:200px; Visibility:hidden; Background: #F0F0F0; border:1px solid #00DB00; z-index:9999 ">
<div style= "width:450px; height:30px; Background: #00DB00; Line-height:30px;text-align:center; " ><b> Preparation </b></div>
<br/><br/>
<div><p style= "margin-left:50px" > is trying to restart the operation for you ... Wait <span id= "Reboot_pre_time" >4</span> sec </p></div>
<br/>
<div><button type= "button" style= "width:70px; height:30px; margin-left:340px "onclick=" Reboot_cancel () "> Cancel </button></div>
</div>
<!------------------restart operation ready for window--------------->

<!------------------restart operation for window--------------->
<div id= "reboot_ing" style= "width:450px; height:150px; Margin-left:auto; Margin-right:auto; margin-top:-150px; Visibility:hidden; Background: #F0F0F0; border:1px solid #00DB00 ">
<div style= "width:450px; height:30px; Background: #00DB00; Line-height:30px;text-align:center; " ><b> in Progress </b></div>
<br/>
<div><p style= "margin-left:40px" > Restart operation in progress ... Wait <span id= "Reboot_ing_time" >14</span> sec </p></div>
<br/>
<div id= "Progress_reboot" style= "Margin-left:40px;color: #00DB00; font-family:arial;font-weight:bold;height : 18px ">|</div>
<br/>
</div>
<!------------------restart operation for window--------------->


Lt;script type= "Text/javascript" >

var cancel_flag = 0;
var already = 0;

/* Web page load on the operation to do * *
Window.onload = reboot ();

/* Click action for reboot button * *
function reboot () {
If confirm ("This operation disconnects all connections now and restarts your device, are you sure you want to continue?") ")){
document.getElementById ("Reboot_pre_time"). InnerHTML = 4;
document.getElementById ("Reboot_ing_time"). InnerHTML = 14;
Document.all.progress_reboot.innerHTML = "|";
Download_flag = 0;
Cancel_flag = 0;
already = 0;
SetTimeout ("Showdiv (' Reboot_pre ')", 500);
Delaypre_reboot ("Reboot_pre_time");
}
}
/* Reboot Ready window Timer 5 Seconds * *
function Delaypre_reboot (str) {
if (!cancel_flag) {
var delay = document.getElementById (str). InnerHTML;
if (Delay > 0) {
delay--;
document.getElementById (str). InnerHTML = delay;
SetTimeout ("Delaypre_reboot (' Reboot_pre_time ')", 1000);
} else {
Hidediv ("Reboot_pre");
SetTimeout ("Showdiv (' reboot_ing ')", 500);
Delaydo_reboot ("Reboot_ing_time");
}
}
}
/* Reboot for 15 seconds for POP window timer * *
function Delaydo_reboot (str) {
Display_reboot (100);
var delay = document.getElementById (str). InnerHTML;
if (Delay > 0) {
delay--;
document.getElementById (str). InnerHTML = delay;
SetTimeout ("Delaydo_reboot (' Reboot_ing_time ')", 1000);
} else {
Hidediv ("reboot_ing");
Alert ("Reboot successful!") ");
}
}
/* The event to cancel the button when the reboot is ready * *
function Reboot_cancel () {
Cancel_flag = 1;
Hidediv ("Reboot_pre");
Alert ("You have successfully canceled the restart operation!") ");
}
/* Show window/*
function Showdiv (str) {
document.getElementById (str). style.visibility = "visible";
}
* * Hidden window
function Hidediv (str) {
document.getElementById (str). style.visibility = "hidden";
}

/* Restart for window timer, the Buffer bar movement * *
function Display_reboot (max) {
already++;
var dispobj = Document.all.progress_reboot;
DispObj.style.width = 100.0*already/max+ "px";
Document.all.progress_reboot.innerHTML + = "| | | | |";
var timer = window.settimeout ("Display (" +max+ ")", 1000);
if (already >= max) {
Window.cleartimeout (timer);
}
}

</script>
Related Article

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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