猪八戒网的效果图:
源代码:
<html> <head> <title>仿猪八戒放制作|动态循环切换input框内容</title> </head> <body> <form name="searcch"> <input type="text" id="clock" onblur="float()" onfocus="empty()"/> <script language=javascript> var content = new Array(); content[0] = "比如:设计一个网站"; content[1] = "比如:网站程序开发"; content[2] = "比如:品牌LOGO设计"; content[3] = "比如:找资源,找人才"; content[4] = "---王春磊设计---"; var int=self.setInterval("clock()",3000); var t = document.getElementById("clock"); function clock(){ if (t.value == "") { t.value = content[0]; } else { for (i=0;i<content.length;i++){ if(t.value == content[i]){ if(i<4){ t.value = content[i+1]; break; }else{ t.value = content[0]; break; } } } } } function empty(){ for (i=0;i<content.length;i++){ if(t.value == content[i]){ t.value = ""; int=window.clearInterval(int); break; } } } function float(){ if(t.value == ""){ int=self.setInterval("clock()",2000); } else{ int=window.clearInterval(int); } } </script> <input type="submit" value="搜索内容"/> <button onclick="int=window.clearInterval(int)">停止变换</button> </form> </body> </html>
效果图: