zoukankan      html  css  js  c++  java
  • js 展开&收缩 二种

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		#div1{ 200px; min-height:20px; border:1px #000 solid;}
    	</style>
    	<script type="text/javascript">
    		window.onload = function(){
    			var aInput = document.getElementsByTagName("input");
    			var oDiv = document.getElementById("div1");
    			var str = '曾经是打工妹,如今她是上市公司的CEO;她曾经被逼婚,如今蜕变为网络第一红娘;她在成就更多人幸福的同时,也成就了自己的事业。她就是"小龙女",世纪佳缘CEO龚海燕';
    			var timer = null;
    			var arr = str.split("");
    
    			aInput[0].onclick = function(){
    				clearInterval(timer);
    				timer = setInterval(function (){
    					var val = arr.shift();
    					oDiv.innerHTML += val;
    					if(arr.length == 0 ){
    						clearInterval(timer);
    					}
    				},50);
    				
    			}
    
    			aInput[1].onclick = function(){
    				clearInterval(timer);
    				var arr2 = oDiv.innerHTML.split("");
    				timer = setInterval(function(){
    					arr.unshift(arr2.pop());
    					oDiv.innerHTML = arr2.join("");
    					if(arr2.length == 0 ){
    						clearInterval(timer);
    					}
    				},50)
    			}
    
    			
    
    			aInput[1].onclick = function(){
    				var arr2 = oDiv.innerHTML.split("");
    				clearInterval(timer);
    				timer = setInterval(function(){
    					arr.unshift(arr2.pop());
    					oDiv.innerHTML = arr2.join("");
    					if(arr2.length == 0){
    						clearInterval(timer);
    					}
    				},50)
    			}
    		}
    	</script>
    </head>
    <body>
    	<input type="button" value="展开" ><input type="button" value="收缩">
    	<div id="div1"></div>
    </body>
    </html>
    

      

    <script type="text/javascript">
    		window.onload = function(){
    			var aInput = document.getElementsByTagName("input");
    			var oDiv = document.getElementById("div1");
    			var str = '曾经是打工妹,如今她是上市公司的CEO;她曾经被逼婚,如今蜕变为网络第一红娘;她在成就更多人幸福的同时,也成就了自己的事业。她就是"小龙女",世纪佳缘CEO龚海燕';
    			var timer = null;
    			var iNow = 0;
    
    			aInput[0].onclick = function(){
    				clearInterval(timer);
    				timer = setInterval(function (){
    					var val = str.substring(0,++iNow);
    
    					oDiv.innerHTML = val;
    					if(val == str){
    						clearInterval(timer);
    					}
    				},50);
    				
    			}
    
    			aInput[1].onclick = function(){
    				clearInterval(timer);
    				timer = setInterval(function(){
    					var val = str.substring( 0 , iNow-- )
    					oDiv.innerHTML = val;
    					if(val == "" ){
    						clearInterval(timer);
    					}
    				},50)
    			}
    
    			
    
    			
    		}
    	</script>
    

      

  • 相关阅读:
    使用puppeteer爬取网页数据实践小结
    React服务器端渲染框架next.js项目实战及部署上下文context问题解决办法
    在 React 组件中监听 android 手机物理返回/回退/back键事件
    vue页面切换效果(slide效果切换)
    记录HttpWebRequest辅助类
    C#异常Retry通用类
    Quartz.net2.2初体验
    【jQuery源码】整体架构
    CSRF攻击原理及防御
    SpringBoot----跨域配置
  • 原文地址:https://www.cnblogs.com/mayufo/p/4439590.html
Copyright © 2011-2022 走看看