GFT动态效果图:
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery.js"></script> <style> .blue{ height: 50px; width: 40px; background-color: blue; border-radius: 20px 20px 2px 2px; } .red{ height: 50px; width: 40px; background-color: red; border-radius: 20px 20px 2px 2px; } </style> </head> <body> <div class="blue"></div><br/> <input type="button" id="close" value="关闭" /> <input type="button" id="open" value="打开" /> <script type="text/javascript"> //定义定时器对象 var interval; //打开定时器 function open(){ if(interval != undefined){ alert("已经启动!"); }else{ interval = setInterval(function(){ $("div").toggleClass("red"); },100); } } //关闭定时器 function close(){ clearInterval(interval); interval = undefined; } $(function(){ //关闭按钮绑定点击事件 $("#close").click(function(){ close(); }); //打开按钮绑定点击事件 $("#open").click(function(){ open(); }); }); </script> </body> </html>