关闭

javascript 实现简单的逐字打印的效果

标签: javascripthtml
1135人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE>
<html>
<head>
<title>js打字效果</title>
<meta charset="utf-8">
</head>
<style type="text/css">
div {
	width:980px;
	margin:10px auto;
	background:#F3E6EA;
	border:2px outset #f9c6aa;
	color:green;
}
</style>
<script type="text/javascript">
var i=1;
function write()
{
	var id=document.getElementById("main");
	var msg="JS打字机效果 ,原理很简单:每次多获取一个待打出的字符串的值,输出,覆盖原来输出的内容即可JS打字机效果 ,原理很简单:每次多获取一个待打出的字符串的值,输出,覆盖原来输出的内容即可JS打字机效果 ,原理很简单:每次多获取一个待打出的字符串的值,输出,覆盖原来输出的内容即可JS打字机效果 ,原理很简单:每次多获取一个待打出的字符串的值,输出,覆盖原来输出的内容即可JS打字机效果 ,原理很简单:每次多获取一个待打出的字符串的值,输出,覆盖原来输出的内容即可JS打字机效果 ,原理很简单:每次多获取一个待打出的字符串的值,输出,覆盖原来输出的内容即可JS打字机效果 ,原理很简单:每次多获取一个待打出的字符串的值,输出,覆盖原来输出的内容即可JS打字机效果 ,原理很简单:每次多获取一个待打出的字符串的值,输出,覆盖原来输出的内容即可JS打字机效果 ,原理很简单:每次多获取一个待打出的字符串的值,输出,覆盖原来输出的内容即可";
	var len=msg.length;
	var msg1=msg.substring(0,i);
	id.innerHTML=msg1;
	if(i==len){clearInterval(t)}
	else
		i++;
}
function time1()
{
	var t=setInterval(function(){write()},50);
}
</script>
<body onload=time1()>
<div id="main"></div>
</body>
</html>

0
0
查看评论

js 实现网页一个一个字打印出来的效果

最近看了一个小效果,感觉还挺不错,代码实现起来也挺简单,于是就写了些。 html: //用来显示逐渐出现的文字 宝贝,我好想好想你,想你想的睡不好觉,想你想的吃不下饭,我爱你爱你爱你,么么么么么么么么,啵啵啵啵啵啵啵 js: var index = 0; var str = document....
  • susuzhe123
  • susuzhe123
  • 2017-03-03 14:53
  • 2719

jQuery实现逐字打出效果

主要是看了这个 https://www.firecode.io/ 的效果,再加上之前 http://npmjs.org/也有类似的效果,就试着动手自己实现了下。先上效果图吧:演示地址:http://justforuse.github.io/print-literally/demo.html可以看出主...
  • u014291497
  • u014291497
  • 2016-10-14 22:41
  • 997

NGUI实用操练(一)如何实现逐字打印效果【NGUI2.6.3】

从本节开始,我和大家一起学习研究下,
  • LGFEngine
  • LGFEngine
  • 2014-05-06 11:05
  • 1292

用js控制实现逐字显示

用js控制实现逐字显示将下面的内容保存为.html或者.jsp文件,用浏览器运行即可看到效果!!! 此功能配上背景图片(星空夜景)可以很炫酷,配上背景音乐,也可以很煽情···<head> <title>Js逐字显示</title> ...
  • zhangfengwu2014
  • zhangfengwu2014
  • 2016-03-20 10:12
  • 1125

javascript打印dom树

javascript打印dom树 |----BODY |----|----A |----|----DIV |----|----|----DIV |----|----|----|----DIV |----|----|----|----|----A |----|----|----|----|----|-...
  • liuyanzhi08
  • liuyanzhi08
  • 2015-01-23 13:37
  • 1630

音乐播放器歌词的逐字渲染效果

受到Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器的启发,决定用这个来仿制大多数音乐播放器的逐字染色效果,效果图如下:这个效果的核心代码是:public boolean clipRect(int left, int top, int right, int bottom) l...
  • mwping1324
  • mwping1324
  • 2015-06-18 18:39
  • 1549

jq实现逐字打印效果

无意中看到比特之理博客上的自动打字JS实现文章,看了下代码实现逻辑,觉得这效果代码有些地方还是值得学习下的。 运行代码测试了下,发现有2个小问题:一是换行打印会有下划线输出停顿,二是结束符可能会多输出一下划线字符。针对这2个问题,改进了下原始代码,注释部分可谓是该效果的精髓所在吧,源码如下...
  • u013800347
  • u013800347
  • 2014-02-27 09:12
  • 238

Java图形程序中的对话逐字显示实现

在现代,摒弃传统的会话方式,很多的图形广告或游戏采用了[逐字打印]的效果来展示文字,当然,这样做的目的无非是为了突出内容或吸引眼球。但是这种实现方式却是值得借鉴的,以下,我给出一个JAVA实现的简单用例,需要者可以自行扩充。代码实现:package org.test;import ...
  • cping1982
  • cping1982
  • 2007-10-20 08:41
  • 4485

001_007 Python 将字符串逐字或者逐词翻转

代码如下: #encoding=utf-8 print '中国' #将字符串逐字或者逐词翻转 print '--1' #方案一  步长负一 实现翻转 最好的方法 str = '123' print str pr...
  • houyj1986
  • houyj1986
  • 2014-03-09 02:58
  • 1149

UGUI 实现文本打字效果

孙广东 2015.6.17熟悉NGUI的人可定知道了。但是NGUI弄的有些繁琐, 感兴趣的人可以将NGUI的TypewriterEffect类转成 UGUI特定的,因为有些以来的其他脚本,不爱弄。我这个只是简化的内容。够用了using System; using UnityEngine; using...
  • u010019717
  • u010019717
  • 2015-06-19 08:53
  • 7082
    个人资料
    • 访问:36837次
    • 积分:793
    • 等级:
    • 排名:千里之外
    • 原创:39篇
    • 转载:9篇
    • 译文:0篇
    • 评论:3条

        最痛苦的事,不是失败,是我本可以!

    文章分类