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" " ...
随机推荐
- Quartus II 11.0 开始使用
一.Altera Quartus II 11.0套件介绍 所谓巧妇难为无米之炊,再强的软硬件功底,再多的思维创造力,没有软件的平台,也只是徒劳.因此,一切创造的平台——Quartus II 软件安装, ...
- JDBC入门try/catch型
package com.itheima.domain; import java.sql.Connection; import java.sql.DriverManager; import java.s ...
- dagger和butterknife使用冲突
两者会冲突的主要原因是因为两者都有:javax.annotation.processing.Processor 于是在build.gradle中添加如下配置即可: // 注释冲突 packagingO ...
- PHP实现http与https转化
http://zyan.cc/post/142/ 最近在写PHP程序时,需要使浏览器在https和http之间转化,上网搜索相关信息,无奈只有最近在写PHP程序时,需要使浏览器在https和http之 ...
- Java_Web___字符串转码String.getBytes()和new String()——(转)
转载自:http://zhuhuide2004.iteye.com/blog/562739:转载请注明原作者地址: 在Java中,String.getBytes(String decode)方法会根据 ...
- Loadrunner测试json接口
1. loadrunner + json说明 使用lr测试json接口,向服务端发送json格式请求,接收处理返回响应数据. 主要用到函数: 1)web_custon_request 2)web_re ...
- c#解析Josn(解析多个子集,数据,可解析无限级json)
首先引用 解析类库 using System; using System.Collections.Generic; using System.Linq; using System.Text; name ...
- nodejs-fs使用
(1)读取文本文件时须添加上'encoding'才能输出可读的内容. 02.txt hello,world! nodejs_readfile.js var fs = require('fs'); fs ...
- 采用thinkphp框架实现添加管理员功能
最近由于忙于期中和期末考试没有写新的随笔了,另外内心也在纠结要不要考研,直到昨天终于痛下决心,才突然间觉得豁然开朗. 由于做老师留的课程设计作业采用thinkPHP框架频繁,最近的几篇随笔将都从thi ...
- 【转】如何编译安装PHP扩展
本文参考 一开始安装PHP的时候,我们并不知道需要哪些扩展,所以只有等到我们真正用到的时候才想办法去安装. 安装PHP扩展最简单的办法就是 sudo apt-get install php5-xxx ...