| 标题 | js使用settimeout实现定时炸弹的方法 |
| 内容 | 今天看 css探索之旅 的博客文章，有个用settimeout写定时炸弹的效果，自己也就照猫画猫来写一个。 <!doctype html public -//w3c//dtd xhtml 1.0 transitional//en > <html xmlns=> <head> <meta http-equiv=content-type content=text/html; charset=gb2312/> <title>无标题文档</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>开始定时</div> <div id=chai style=display:none>拆除炸弹</div> <script> $(#zha).bind(click,function(){ zha(); }) $(#chai).bind(click,function(){ chai(); }) var time = 5; var timer = 0; function zha(){ var text = 倒计时; text += time--; $(#zha).text(text); if(time >=0){ timer = settimeout(zha,1000); $(#zha).css(color,black); $(#chai).show(); }else{ $(#zha).text(爆炸); $(#zha).css(color,red); time = 5; $(#chai).fadeout(); } } function chai(){ cleartimeout(timer); $(#zha).text(炸弹拆除成功,点击继续); } </script> </body> </html> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。