<!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. Web进程被kill掉后线程还在运行怎么办？

    目录 背景描述 原因分析 处理方案 参考 背景描述 系统有一个配置表,系统在启动后会启动一个线程,每隔5分钟将配置表里所有的数据更新到内存中. 系统是通过jenkins构建(直接kill掉Web进程, ...

  2. [cocos2dx enhancement] CCPlatformMacros.h

    为了更好的调试Log,优化CCLOG格式 path: cocos2dx/platform/CCPlatformMacros.h line 218: #define CCLOGERROR(format, ...

  3. mysql-Innodb事务隔离级别-repeatable read详解1

    经验总结: Python使用MySQLdb数据库后,如使用多线程,每个线程创建一个db链接,然后再各自创建一个游标cursor,其中第一个线程读一个表中数据为空,第二个写入该表一条数据并提交,第一个线 ...

  4. vue的roter使用

    1在src下建立router文件夹,再建立router.js import Vue from 'vue' import Router from 'vue-router' import home fro ...

  5. Python之面向对象：继承

    概念:子类继承父类的属性和方法. 一个派生类(derived class)继承基类(bass class)字段和方法.继承也允许把一个派生类的对象作为一个基类对象对待. 一.单继承 :推崇.特点和使用 ...

  6. EasyUI中combogrid设置onSelect后 获取不到getSelecte问题解决

    $('#person').combogrid({ onSelect: function(index, item){ $('#dataForm').form('load', item); $(" ...

  7. 清理雪道（bzoj 2502）

    Description        滑雪场坐落在FJ省西北部的若干座山上. 从空中鸟瞰,滑雪场可以看作一个有向无环图,每条弧代表一个斜坡(即雪道),弧的方向代表斜坡下降的方向. 你的团队负责每周定时 ...

  8. HDOJ-1671 Phone List

    Phone List Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Probl ...

  9. Springboot - 在启动完成后执行特定方法

    1.实现方式 实现ApplicationRunner接口 实现CommandLineRunner接口 @Component @Slf4j public class AfterServiceStarte ...

  10. COUNT多列，但是每列都是不同条件的，怎么用一句SQL写？

    原文发布时间为:2010-09-06 -- 来源于本人的百度文章 [由搬家工具导入] 《转》http://www.cnblogs.com/ruanzuzhang/archive/2009/02/22/ ...