<! 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 = gb2312"/> <Title> untitled document </title> <Style> Div { Width: 200px; Height: 50px; Margin: 30px auto 0; Background: # ccc; Text-align: center; Font: 14px/50px arial; Cursor: pointer } </Style> <Script type = "text/javascript" src = "js/jquery_1.4.2.js"> </script> </Head> <Body> <Div id = "zha"> Start time </div> <Div id = "chai" style = "display: none"> bomb removal </div> <Script> $ ("# Zha"). bind ("click", function (){ Zha (); }) $ ("# Chai"). bind ("click", function (){ Chai (); }) Var time = 5; Var timer = 0; Function zha (){ Var text = "Countdown "; Text + = time --; $ ("# Zha"). text (text ); If (time> = 0 ){ Timer = setTimeout (zha, 1000 ); $ ("# Zha" ).css ("color", "black "); $ ("# Chai"). show (); } Else { $ ("# Zha"). text ("explosion "); $ ("# Zha" ).css ("color", "red "); Time = 5; $ ("# Chai"). fadeOut (); } } Function chai (){ ClearTimeout (timer ); $ ("# Zha"). text ("the bomb has been removed successfully, click Continue "); } </Script> </Body> </Html> |