猪八戒网的效果图:
源代码:
<html>
<head>
<title>仿猪八戒放制作|动态循环切换input框内容</title>
</head>
<body>
<form name="searcch">
<input type="text" id="clock" οnblur="float()" οnfοcus="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 οnclick="int=window.clearInterval(int)">停止变换</button>
</form>
</body>
</html>
效果图: