js使用settimeout实现定时炸弹的方法
2016-06-29来源:易贤网

今天看 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>

2025公考·省考培训课程试听预约报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
推荐信息