Javascript实现打字效果
伤感的 学期末
今天是这学期的最后一天,考完了最后一门数学,明天我们就要各自为自己的暑假打算打算了,所以趁着大家还没走一起出去打了打篮球,玩了玩轮滑,很累但是很开心,最大的感触莫过于忧伤额,明年我或许不在学校了,或许见不到他们,明年大三名存实亡,挺失落的。晚上玩轮滑都还好,最大的糗事儿竟然是没保护好美女老乡,貌似摔得不轻额,希望她木有事儿吧,祈祷!!!
打字效果学习
经常看见一个蛮过瘾的Javascript打字效果,一直自己想写个玩玩,貌似总忘了,今天来玩哈,我写的是使用setTimeout来实现的,貌似大神都不是这么弄。
介绍介绍我的思路,给出一段需要打字的内容,然后使用substring函数每隔x毫秒就截取一次字符串,直至最后一次截获整个字符串停止。我这里使用的事setTimeout,其实我觉得吧这个东东就是一个循环,只是循环木有等待时间,也就是时间间隔,仅仅我个人看法,或许还木有理解透彻吧!
<html>
<head>
<title></title>
<script type="text/javascript">
message = "上世纪60年代,根据柳残阳原著改编的粤语神怪武侠片《如来神掌》曾红极一时,由当时的巨星曹达华、于素秋扮演主角,整个系列曾先后拍摄5集,片中的“火云邪神”([柠檬]饰演)是主人公龙剑飞的师傅,也是绝技“如来神掌”的传人。后来,曾江、雪妮还续拍了《如来神掌再显神威》、《如来神掌劈魔平九派》,可见这套电影当时的热门程度。而到了1982年,邵氏还推出了新版《如来神掌》,万梓良在片中扮演的就是“火云邪神”。电视也曾两度拍摄《如来神掌》片集,第一套分别由于洋主演,後一套由张智霖主演。《如来神掌》《如来神掌》火云邪神的名字还被借用到漫画之中,黄玉郎从上世纪70年代开始连载的名著《龙虎门》中的大反派、日本罗刹教教主便叫“火云邪神”。1994年,《功夫》的武术指导袁和平还拍过一部《火云传奇》,林青霞扮演的角色也被称为“火云邪神”。可以说,火云邪神一词在香港武侠文化中占有不可忽视的地位。 "
pos = /*初始截字符的位置*/
maxlength = message.length +
function writemsg() {
if (pos < maxlength) {
txt = message.substring(pos, )
document.forms[].vito.value = txt
document.forms[].vito.style.color = '#00F' /*设置打出来的字体样式*/
timer = setTimeout("writemsg()", ) /*设置间隔50毫秒打一个字*/
pos++
}
} </script>
</head>
<body>
<form action="">
<textarea rows="" cols="" id="vito"></textarea><br />
<input type="button" onclick="writemsg()" value="开始" />
</form>
</body>
</html>
以上打字效果图如下图:

话说我真心不想用这个图的,我也想给博客园减负,木有办法,罪过
网上其他人的类似效果
<html>
<head>
<title>Type Write</title>
<style type="text/css">
a
{
text-decoration: none;
}
</style>
</head>
<body>
<div id="newsticker">
<span id="tickertitle"></span><a id="typewriter" href="#"></a>
</div>
</body>
</html>
<script type="text/javascript">
var current =
var x =
var speed =
var speed2 =
function initArray(n) {
this.length = n;
for (var i = ; i <= n; i++) {
this[i] = ' '
}
}
typ = new initArray();
typ[] = "406:red:Texas last in US Gov State Governors Websites (June 2008)";
typ[] = "409:red:The Insolvency Service last in UK Central Government (June 2008)";
typ[] = "384:green:Federated States of Micronesia 1st in US Gov State and Territorial Government Websites (April 2008)";
typ[] = "413:green:U.S. Immigration and Customs Enforcement highest climber in US Gov Federal Agencies (up 188) - June 2008";
typ[] = "371:green:Iowa 1st in US Gov State Governors Websites (April 2008)";
typ[] = "373:green:Directgov Jobs and Skills 1st in UK Central Government (April 2008)";
typ[] = "379:red:Birmingham last in UK Local Government (April 2008)";
typ[] = "406:green:Utah highest climber in US Gov State Governors Websites (up 16) - June 2008";
typ[] = "380:red:Kent Police greatest faller in Police Forces (down 31) - April 2008";
function typewrite() {
var m = typ[current];
document.getElementById("typewriter").href = '/survey/report.html?rt=' + m.substring(, m.indexOf(':'));
m = m.substring(m.indexOf(':') + );
document.getElementById("typewriter").style.color = m.substring(, m.indexOf(':'));
m = m.substring(m.indexOf(':') + );
m = m.replace("&", "and");
document.getElementById("typewriter").innerHTML = m.substring(, x++) + "_"; if (x == m.length + ) {
x =
current++
if (current > typ.length - ) {
current =
}
setTimeout("typewrite()", speed2)
}
else {
setTimeout("typewrite()", speed)
}
}
typewrite()
</script>
这个是我下的,效果就不演示了,gif太大,园子空间伤不起。
夜深人静404
今天就写到这里吧,貌似写的不咋地,希望对你有用吧。夜深人静,Bigod还在Dota,哥睡不着额,怎麽办怎麽拌,明天白天注定又困,伤不起。。。。
Javascript实现打字效果的更多相关文章
- javascript queue 打字效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript实现键盘自动打字效果
最近在网上看到一个字符逐个出现的打字效果,觉得挺有趣的,想一想基本实现思路就是设置一个定时器逐然后逐个向容器中添加字符,于是就基于jQuery写了一个简单版的. <!DOCTYPE html&g ...
- JavaScript实现动态打字效果
废话不多说,上代码~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- jQuery模仿人类打字效果插件typetype
typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...
- JS打字效果的动态菜单代码分享
这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...
- canvas打字效果
运用fillText,写的打字效果. 唯一麻烦的地方是,换行问题, 我是把字符串转化为数组,数组一个单位完成,就换行,继续下一个单位. <!doctype html> <html&g ...
- JS让网页上文字出现键盘打字的打字效果
一个挺简单的网页特效:JS让网页上文字出现键盘打字的打字效果实现 演示地址:http://codepen.io/guihailiuli/pen/jPOYMZ 以代码形式实现过程分析: <html ...
- CSS 实现打字效果
JS实现 最近做项目的时候需要实现一个字符逐个出现的打字效果,在网上一搜有个不错的jQuery插件Typed.js,效果很赞 <div class="element"> ...
- JavaScript 省市级联效果
JavaScript 省市级联效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
随机推荐
- javascript/jquery给动态加载的元素添加click事件
/** 这种写法:在重新加载数据后事件依然有效*/$(document).on('click', '#district_layer ul li', function () { });
- [记录]ns_error_unexpected firefox tinymce
参考: Form not saving, NS_ERROR_UNEXPECTED Error: NS_ERROR_UNEXPECTED #794 NS_ERROR_UNEXPECTED on Fir ...
- confirm的用法
内容换行:第一种方法:var str = "aaaaa\\n11111";confirm(str.replace("\\n","\n")); ...
- kettle中Get Data from XML , Jason Input , 文本文件输入 使用示例
1.Get Data from XML xml文件内容: <head> <img id="1">菜||焦溜丸子||2013-03-28/image/0/00 ...
- ubuntu下aircrack-ng的wifi破解
首先安装aircrack-ng,apt-get install aircrack-ng. 然后打开shell,输入airmon-ng start wlan0. 输入airodump-ng mon0. ...
- LaTeX中用BibTex管理参考文献
BibTeX 是一种用来规范参考文献列表的一种文献管理软件,定义了一种比较通用的管理文献的格式, 用于协调LaTeX的参考文献处理. BibTeX 使用数据库的的方式来管理参考文献. BibTeX 文 ...
- 第十篇、自定义UIBarButtonItem和UIButton block回调
// 自定义导航栏左边按钮 self.navigationItem.leftBarButtonItem = [JQBlockedBarButtonItem blockedBarButtonItemWi ...
- java多线程之停止线程
/*1.让各个对象或类相互灵活交流2.两个线程都冻结了,就不能唤醒了,因为根据代码要一个线程活着才能执行唤醒操作,就像玩木游戏3.中断状态就是冻结状态4.当主线程退出的时候,里面的两个线程都处于冻结状 ...
- MVC异步 导入excel文件
View页面 js文件.封装到一个js文件里面 (function ($) { //可以忽略 var defaultSettings = { url: "http://upload.zhtx ...
- python 自动化之路 day 05
内容目录: 列表生成式.迭代器&生成器 装饰器 软件目录结构规范 模块初始 常用模块 1.列表生成式,迭代器&生成器 列表生成式 需求:列表[0, 1, 2, 3, 4, 5, 6, ...