JavaScript实现打字效果的方法
本文实例讲述了JavaScript实现打字效果的方法。分享给大家供大家参考。具体实现方法如下:
<input type="button" onclick='start("高考了")' value="start"/> <input type="text" id="here" /> <script type="text/javascript"> function start(str1) { str=str1; len=str.length; i=0; dwrite(); } function dwrite() { document.getElementById('here').value=document.getElementById('here').value + str.charAt(i); if( i++ ==len ) { i=0; return true; } setTimeout('dwrite()',500); } </script>
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
原生js实现打字动画游戏
这是昨天用原生的js写的打字动画游戏,主要用的间歇定时器,对象,还有Math方法,感觉还行,主要看消除字母的时间快慢,但是也有bug,就是字母都是一次性生成的,所以一开始,看起来感觉会有种爆炸的感觉,如果能够一次性生成一批,然后分批往下掉就好了,求大神帮忙改改,大家也可以参考参考. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <ti
-
JavaScript打字小游戏代码
功能模块: 程序设计: 1.可选择游戏时间,显示倒计时 1.定义全局变量 2.可选择英文字母出现个数 2.控制游戏时间函数 3.统计得分 3.动画效果 4.菜单选项 4.设定字母图片出现的时间 5.判断函数 6.游戏菜单 7.游戏时间选项 8.显示游戏时间 9.游戏难度选项 10.游戏得分 先上效果图:(PS:美工是硬伤) 主要代码设计: 复制代码 代码如下: //-------全局变量------- var data={ "10":["<img src='images
-
JS模拟键盘打字效果的方法
本文实例讲述了JS模拟键盘打字效果的方法.分享给大家供大家参考.具体如下: 这里使用JS模拟实现软键盘及打字效果,点击软键盘年的字母键,文本框中即可显示文字,像是键盘打字的效果,美工不太好,没怎么美化,CSS高手可美化一下按钮,看上去还挺不错吧,我觉得. 先来看看运行效果图: 具体代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb23
-
js实现键盘自动打字效果
最近在网上看到一个字符逐个出现的打字效果,觉得挺有趣的,想一想基本实现思路就是设置一个定时器逐然后逐个向容器中添加字符,于是就基于jQuery写了一个简单版的. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no,
-
JS实现的自动打字效果示例
本文实例讲述了JS实现的自动打字效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>js typing</title> </head> <body> <div id='divTyping'></div> <script> var str = 'js 实现的 打字效果,感
-
JS实现在状态栏显示打字效果完整实例
本文实例讲述了JS实现在状态栏显示打字效果.分享给大家供大家参考,具体如下: 这里演示JS实现带有打字特效的状态栏,在状态栏显示打字效果的文字,注意,此效果存在浏览器兼容性问题,在IE7或更高的浏览器下貌似不显示效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-status-bar-show-txt-print-demo/ 具体代码如下: <html> <head> <script language="J
-
JavaScript模拟实现键盘打字效果
$(function () { var input_type = { init:function ($obj) { this.name = $obj.html().split("") this.length = this.name.length; this.i = 0; }, pri:function () { var $this = this //在此处只能使用闭包,因为windown.settimeout使函数的this指向object windown,而非原型链的this对象.而
-
JS实现简单的键盘打字的效果
以代码形式实现过程分析: <html> <head> <title>打字效果</title> <meta http-equiv="Content-Type" Content="text/html;charset=gb2312" /> <style type="text/css"> body{ font-size:14px; font-color:#purple; font-w
-
Js 打字效果 逐一出现的文字
第一种:打印多个文字 逐个出现的文字 var layers =document.layers,style=document.all,both=layers||style,idme=908601; if(layers){layerRef='document.layers';styleRef ='';}if(style){layerRef='document.all';styleRef = '.style';} function writeOnText(obj,str){ if(layers)wit
-
javascript实现自动输出文本(打字特效)
主要利用了setTimeout(),递归和String.substring(); 做出的效果就像是有一个打字员在打字. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name=&quo
-
javascript 打字效果的文字特效
本节代码主要使用了 onMousedown 事件和 event.button 属性,主要功能和用法如下. • setTimeout 方法,在执行时是在载入后延迟指定时间后,去执行一次表达式,仅执行一次. • charAt 方法返回一个字符值,该字符位于指定索引位置.字符串中的第一个字符的索引为0,第二个的索引为1,等等.超出有效范围的索引值返回空字符串. 打字效果的文字特效 var layers = document.layers; var style = document.all; var b
-
仿打字特效的JS逐字出现的信息文字
逐字出现的信息文字 function makeArray() { this.length = makeArray.arguments.length for (var i = 0; i 3) y=0; document.form1.news2.value=' '; msg1 = fArray[y]; x=0; } document.form1.news2.value=msg1.substring(0,x); x+=1; setTimeout("newsFeed() ",200); } [
-
JS实现的打字机效果完整实例
本文实例讲述了JS实现的打字机效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the
随机推荐
- 基于C++中setiosflags()的用法详解
- 简单谈谈vue的过渡动画(推荐)
- 详谈Angular 2+ 的表单(一)之模板驱动型表单
- 关于document.cookie的使用javascript
- Discuz 5.0 中读取纯真IP数据库函数分析
- php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
- Python中类型检查的详细介绍
- Python中的闭包总结
- 字符串和十六进制之间的转换方法实例
- C++中的移动构造函数及move语句示例详解
- js中一维数组和二位数组中的几个问题示例说明
- php微信支付接口开发程序
- 利用JavaScript检测CPU使用率自己写的
- 利用jQuery实现一个简单的表格上下翻页效果
- 使用ThinkPHP+Uploadify实现图片上传功能
- smarty的section嵌套循环用法示例
- JS自动适应的图片弹窗实例
- Win 2003自带防火墙的设置
- springboot 用监听器统计在线人数案例分析
- php往mysql中批量插入数据实例教程