`
wsql
  • 浏览: 11775047 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

猪八戒网的效果图：

源代码：



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


效果图：





  


  

    
    
分享到：
      
      
    

  


  

    

      
      |
      ER图
    

  

  

        
  

    
  

    
评论

    
    
    
    
  


  

    
发表评论

            
   您还没有登录,请您登录后再发表评论 

      

  

  





  

    
相关推荐

    
    
  





  
    Magicbox
  













      

            
    

    
    
  

  



   Global site tag (gtag.js) - Google Analytics