现在的位置: 首页 > 综合 > 正文

今天看到猪八戒网的一个动态的文本框,心血来潮自己也做了一个

2013年10月24日 ⁄ 综合 ⁄ 共 940字 ⁄ 字号 评论关闭

猪八戒网的效果图:

源代码:


<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>

效果图:

【上篇】
【下篇】

抱歉!评论已关闭.