<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		#div1{ width: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>

　　

js 展开&收缩 二种的更多相关文章

  1. 原生态js展开收缩

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. js实现的侧边栏展开收缩效果

    原文地址:http://www.softwhy.com/forum.php?mod=viewthread&tid=12246 <!DOCTYPE html> <html> ...

  3. js之展开收缩菜单，用到window.onload ,onclick,

    目标效果:点击标签1,如果列表标签的style的display是block,改成none,否则改成block,来达到展开收缩菜单效果 一.准备阶段 html文件 <!DOCTYPE html&g ...

  4. jQuery弹性展开收缩菜单插件gooey.js

    分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <hea ...

  5. 右上角鼠标滑过展开收缩动画效果js代码的演示页面

    http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...

  6. 修改mui accordion（折叠面板）默认展开收缩行为

    mui的折叠面板 accordion 默认展开收缩逻辑是,展开其中一个的同时收缩起同级已经展开的元素. 实际需求:展开其中一个不必收缩同级元素. 分析mui.js源代码: window.addEven ...

  7. 【高德地图API】从零开始学高德JS API（二）地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...

  8. WordPress文章页添加展开/收缩功能

    很多时候我们在WordPress上发布一些文章的时候里面都包含了很多的代码,我一般又不喜欢把代码压缩起来而喜欢让代码格式化显示,但是格式化显示通常会让文章内容看起来很多,不便于访问者浏览,所以今天就介 ...

  9. jquery展开收缩列表

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

随机推荐

  1. zookeeper Zookeeper

    这是ZooKeeper客户端库的主要类.使用一个ZooKeeper服务,应用程序必须首先实例化ZooKeeper类的对象.所有的迭代都将通过调用ZooKeeper类的方法来完成.除非另有说明,该类的方 ...

  2. rule.xml属性概念

    # tableRule <tableRule name="rule1"> <rule> <columns>id</columns> ...

  3. 密码 （pasuwado）

    密码 (pasuwado) 题目描述 哪里有压迫,哪里就有反抗. moreD的宠物在法庭的帮助下终于反抗了.作为一只聪明的宠物,他打算把魔法使moreD的魔法书盗去,夺取moreD的魔法能力.但mor ...

  4. Docker Daemon 连接方式详解

    前言 在 Docker 常用详解指令 一文中粗粗提了一下, Docker 是分为客户端和服务端两部分的, 本文将介绍客户端是如何连接服务端的. 连接方式 1. UNIX域套接字 默认就是这种方式, 会 ...

  5. ai相关

    学习资源 1.1 1.2 2.1 2.2 2.3 前置 octave sklearn python3 git 学习相关 link 定义 Field of study that gives comput ...

  6. 团体天梯赛 L3-001. 凑零钱

    L3-001. 凑零钱 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 韩梅梅喜欢满宇宙到处逛街.现在她逛到了一家火星店里,发现 ...

  7. 【LA5059】Playing With Stones （SG函数）

    题意:有n堆石子,分别有a[i]个.两个游戏者轮流操作,每次可以选一堆,拿走至少一个石子,但不能拿走超过一半的石子. 谁不能拿石子就算输,问先手胜负情况 n<=100,1<=a[i]< ...

  8. 微信公众平台开发（71）OAuth2.0网页授权-摘抄

      微信公众平台开发 OAuth2.0网页授权认证 网页授权获取用户基本信息 作者:方倍工作室 微信公众平台最近新推出微信认证,认证后可以获得高级接口权限,其中一个是OAuth2.0网页授权,很多朋友 ...

  9. AtCoder Regular Contest 075 C D E (暂时)

    C - Bugged 题意 给\(n\)个数,找其中的一个子集,使得其和最大,且不是\(10\)的整数倍. 思路 先对\(n\)个数求和, 如果本身即不被\(10\)整除,则即为答案. 否则,如果本身 ...

  10. 【Visual Studio】解决错误 fatal error C1010: unexpected end of file while looking for precompiled head（转）

    原文转自 http://blog.csdn.net/liuqiyao_01/article/details/38867145 在编译VS时候,出现fatal error C1010: unexpect ...