javascript实现自动输出文本(打字特效)
作者:hebedich 发布时间:2024-02-25 18:25:14
标签:javascript,打字效果
主要利用了setTimeout(),递归和String.substring();
做出的效果就像是有一个打字员在打字.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body bgcolor="#ccc" onload="printer();">
<h2 align="center">文本自动输出</h2>
<br>
<br>
<hr width="400" color="black">
<br>
<form align="center">
<textarea cols="50" rows="30" id="text" style="background-color:#FF99CC; color: #330033; cursor: default; font-family: Arial; font-size: 18px" wrap=virtual></textarea>
</form>
</body>
<script type="text/javascript">
//获取textarea对象
var text=document.getElementById("text");
//要输出的内容
var str=" 传统的HTML语言不能开发交互式的 * 页,而JavaScript却能很好的做到这一点。JavaScript是一门相当简单易学的网络化编程语言,通过把她和HTML语言相互结合起来,能够实现实时的 * 页特效,这给网页浏览者在浏览网页的同时也提供了某些乐趣。";
var pos=0;
//利用递归和setTimeout()实现文字输出
function printer(){
text.value=str.substring(0,pos)+"|";
//判断是否到达结尾.如果是则一秒后再来一遍.
if(pos++>str.length){
pos=0;
setTimeout("printer()",1000);
}else{
setTimeout("printer()",50);
}
}
</script>
</html>
方法二:JavaScript实现打字电脑打字效果
<span id="demo"></span>
<script defer>
var text="JavaScript实现的打字效果" //预定文字
var delay=200 //文字出现的时间间隔
var i=0 //初始化变量 i
function scrollit(){
//设置 id 为 demo 的对象内的文字为从变量 text 的 0 开始到 i 间的文字加"_"
demo.innerText=text.slice(0,i++)+"_"
if(i>text.length){ //当 i 大于 text 的文本长度时
i=0 //重设 i 为 0,使文字重新从第一个文字出现
//延时执行scrollit()函数,delay*10是为了让显示完整文字的时间长一点
setTimeout("scrollit()",delay*10)
}
//否则在delay毫秒后再次执行scrollit()函数
else setTimeout("scrollit()",delay)
}
scrollit() //调用scrollit()函数
</script>
方法三:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
<script language=javascript>
var layers =document.layers;
var style=document.all;
var both=layers||style;
var idme=908601;
if(layers)
{ layerRef='document.layers';styleRef ='';}
if(style)
{ layerRef='document.all';styleRef = '.style';}
//开始参数的定义
function writeOnText(obj,str)
{
if(layers)with(document[obj])
{ document.open();document.write(str);document.close();}
if(style)eval(obj+'.innerHTML=str');
}
var dispStr=new Array("证监会称将严查利用内幕信息牟取不当利益行为!"); //要出现的文本
var overMe=0;
//逐字显示的方法
function txtTyper(str,idx,objId,objStyle,color1,color2,delay,plysnd)
{
var mystr='',strchar='';
var skip=200;
if (both && idx<=str.length) {
if (str.charAt(idx)=='<'){ while(str.charAt(idx)!='>') idx++;}
if (str.charAt(idx)=='&'&&str.charAt(idx+1)!=' '){ while (str.charAt(idx)!= ';')idx++;}
mystr = str.slice(0,idx); //返回数组从开始到指定位置的字符串
strchar = str.charAt(idx++);//当前地址的字符
if (overMe==0 && plysnd==1)
{
//针对浏览器的不同,调用不同的显示方法
if (navigator.plugins[0]){
if(navigator.plugins["LiveAudio"][0].type=="audio/basic" && navigator.javaEnabled())
{document.embeds[0].stop();
setTimeout("document.embeds[0].play(false)",100);}
} else if (document.all){
ding.Stop();
setTimeout("ding.Run()",100);}
overMe=1;}else overMe=0;
writeOnText(objId, "<span class="+objStyle+"><font color='"+color1+"'>"+mystr+"</font><font color='"+color2
+"'>"+strchar+"</font></span>");
setTimeout("txtTyper('"+str+"', "+idx+", '"+objId+"', '"+objStyle+"', '"+color1+"', '"+color2+"', "+delay+" ,"+plysnd+")",delay);}}
function init()
{txtTyper(dispStr[0], 0, 'div1', 'style1', '#66CCBB', '#000000', 400, 0);}
</script>
<BODY onload=init()>
<DIV class=style1 id=div1></DIV>
</BODY>
</html>
0
投稿
猜你喜欢
- K线图概念股市及期货市bai场中的K线图的du画法包含四个zhi数据,即开盘dao价、最高价、最低价zhuan、收盘价,所有的shuk线都是
- Python读取配置文件-ConfigParser二次封装直接上上代码test.conf[database]connect = mysqls
- 总经一下前段时间用于的jQuery方法:find及children。需要的朋友可以参考下。首先看看英文解释吧: children方法:fin
- Windows上安装mysql-8.0.29-winx64,供大家参考,具体内容如下1.进入官网找到自己所需的安装包:https://dev
- CSS3的box-shadow属性可以让我们轻松实现图层阴影效果。我们来实战详解一下这个属性。1. box-shadow属性的浏览器兼容性先
- 将ubk_vhost_list表中的字段userid中的字符10005替换成10010 UPDATE `table_name` SET `f
- 一、renderer<meta name="renderer" content="webkit|ie-c
- 环境搭建准备工具:pyton3.5,selenium,phantomjs我的电脑里面已经装好了python3.5安装Seleniumpip3
- 在我的电脑中存在多个版本的Python,实际工作中也时常需要切换Python版本来进行相关工作。在Pycharm的终端中使用python和i
- 今天看了一个优化案例觉的挺有代表性,这里记录下来做一个标记,来纪念一下随便的字段定义的问题。回忆一下,在表的设计中很多人习惯的把表的结构设计
- xlsxwriter 简介用于以 Excel 2007+ XLSX 文件格式编写文件,相较之下 PhpSpreadsheet 支持更多的格式
- 代码如下:SELECT * FROM Orders WHERE OrderGUID IN('BC71D821-9E25-
- 图像边缘信息主要集中在高频段,通常说图像锐化或检测边缘,实质就是高频滤波。我们知道微分运算是求信号的变化率,具有加强高频分量的作用。在空域运
- Protobuf是google开发的一个序列化和反序列化的协议库,我们可以自己设计传递数据的格式,通过.proto文件定义我们的要传递的数据
- baiduclient.pyimport urllib.parseimport gzipimport jsonimport refrom h
- 1.使用场景定时执行jmeter脚本,通过python定时器隔一段时间执行命令行命令。2.库os、datetime、threading(1)
- 在开始做mysql分页功能组件前,便设定的是要有一定可复用性。先在项目里Views文件夹下右键新建名为_PaginationComponen
- SQL Server 2019 Enterprise (x64) - DVD (Chinese-Simplified)企业版ed2k://|
- 一、加载库首先加载torch库,进入python后加载库使用import导入【import 库名】二、sin值计算方法pytorch中的si
- 1、注册一个新浪应用,得到appkey和secret,以及token,将这些信息写入配置文件sina_weibo_config.ini,内容