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

猪八戒网的效果图:

源代码:

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

效果图:


  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值