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-weight:bolder;
}
</style>
</head>
<body>
最新内容: <a id = "Hotnews" href="" target="_blank"> </a>
<script language="javascript">
  var NewsTime = 2000;    //每条信息完整出现后停留时间
  var TextTime = 100;    //每条信息中的字出现的间隔时间

  var newsi = 0;
  var txti = 0;
  var txttimer;   //调用setInterval的返回值,用于取消对函数的周期性执行
  var newstimer;

  var newstitle = new Array();    //以数组形式保存每个信息的标题
  var newshref = new Array();   //以数组形式保存信息标题的链接

  newstitle[0] = "欢迎来到我的博客";   //显示在网页上的文字内容和对应的链接
  newshref[0] = "http://www.jb51.net/guihailiuli/";

  newstitle[1] = "http://www.jb51.net/guihailiuli/";
  newshref[1] = "http://www.jb51.net/guihailiuli/";

  newstitle[2] = "博客园欢迎你哦";
  newshref[2] = "http://www.jb51.net";

  newstitle[3] = "ByeBye~~";
  newshref[3] = "http://www.jb51.net";

  function shownew(){
    hwnewstr=newstitle[newsi];    //通过newsi传递,依次显示数组中的内容
    newslink=newshref[newsi];     //依次显示文字对应的链接

    if(txti>=hwnewstr.length){
      clearInterval(txttimer);  //一旦超过要显示的文字长度,清除对shownew()的周期性调用
      clearInterval(newstimer);
      newsi++;   //显示数组中的下一个

      if(newsi>=newstitle.length){
        newsi = 0;  //当newsi大于信息标题的数量时,把newsi清零,重新从第一个显示
      }
      newstimer = setInterval("shownew()",NewsTime);   //间隔2000ms后重新调用shownew()
      txti = 0;
      return;
    }
    clearInterval(txttimer);
    document.getElementById("Hotnews").href = newslink;
    document.getElementById("Hotnews").innerHTML = hwnewstr.substring(0,txti+1);   //截取字符,从第一个字符到txti+1个字符

    txti++;  //文字一个个出现
    txttimer = setInterval("shownew()",TextTime);
  }
  shownew();

</script>
</body>
</html>

以上所述就是本文的全部内容了,希望能够给大家学习javascript有些帮助。

时间: 2015-04-22

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

JS模拟键盘打字效果的方法

本文实例讲述了JS模拟键盘打字效果的方法.分享给大家供大家参考.具体如下: 这里使用JS模拟实现软键盘及打字效果,点击软键盘年的字母键,文本框中即可显示文字,像是键盘打字的效果,美工不太好,没怎么美化,CSS高手可美化一下按钮,看上去还挺不错吧,我觉得. 先来看看运行效果图: 具体代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb23

原生js实现打字动画游戏

这是昨天用原生的js写的打字动画游戏,主要用的间歇定时器,对象,还有Math方法,感觉还行,主要看消除字母的时间快慢,但是也有bug,就是字母都是一次性生成的,所以一开始,看起来感觉会有种爆炸的感觉,如果能够一次性生成一批,然后分批往下掉就好了,求大神帮忙改改,大家也可以参考参考. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <ti

javascript 打字效果的文字特效

本节代码主要使用了 onMousedown 事件和 event.button 属性,主要功能和用法如下. • setTimeout 方法,在执行时是在载入后延迟指定时间后,去执行一次表达式,仅执行一次. • charAt 方法返回一个字符值,该字符位于指定索引位置.字符串中的第一个字符的索引为0,第二个的索引为1,等等.超出有效范围的索引值返回空字符串. 打字效果的文字特效 var layers = document.layers; var style = document.all; var b

JavaScript打字小游戏代码

功能模块: 程序设计: 1.可选择游戏时间,显示倒计时 1.定义全局变量 2.可选择英文字母出现个数 2.控制游戏时间函数 3.统计得分 3.动画效果 4.菜单选项 4.设定字母图片出现的时间 5.判断函数 6.游戏菜单 7.游戏时间选项 8.显示游戏时间 9.游戏难度选项 10.游戏得分 先上效果图:(PS:美工是硬伤) 主要代码设计: 复制代码 代码如下: //-------全局变量------- var data={ "10":["<img src='images

js实现键盘自动打字效果

最近在网上看到一个字符逐个出现的打字效果,觉得挺有趣的,想一想基本实现思路就是设置一个定时器逐然后逐个向容器中添加字符,于是就基于jQuery写了一个简单版的. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no,

JavaScript实现打字效果的方法

本文实例讲述了JavaScript实现打字效果的方法.分享给大家供大家参考.具体实现方法如下: <input type="button" onclick='start("高考了")' value="start"/> <input type="text" id="here" /> <script type="text/javascript"> funct

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

仿打字特效的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

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对象.而

javascript实现自动输出文本(打字特效)

主要利用了setTimeout(),递归和String.substring(); 做出的效果就像是有一个打字员在打字. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name=&quo

用javascript实现自动输出网页文本

用javascript实现自动输出网页文本,用了setTimeout(),递归和String.substring();两个函数实现此功能,下面把实现代码分享给大家. 做出的效果就像是有一个打字员在打字. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content=&q

JavaScript实现自动生成网页元素功能(按钮、文本等)

创建元素的方法: 1.利用createTextNode()创建一个文本对象 2.利用createElement()创建一个标签对象 3.直接利用容器标签中的一个属性:innerHTML-----本质上改该标签容器中的"html代码",不是我们认为的对象树的操作 详解代码: <body> <input type="button" value="创建并添加节点1" onclick="addNode1()"/>

JavaScript实现简单的文本逐字打印效果示例

本文实例讲述了JavaScript实现简单的文本逐字打印效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE> <html> <head> <title>www.jb51.net js打字效果</title> <meta charset="utf-8"> </head> <style type="text/css"> div {

Delphi实现图像文本旋转特效完整实例代码

本文以实例讲述了Delphi实现图像文本旋转特效的解决方法,在本程序中利用的控件主要是Panel 控件.Image 控件.Edit 控件.Label 控件和Button 控件.本程序的关键是利用Delphi 的bmp_rotate()函数来实现旋转图像的功能.并巧妙地调用相关Windows API 函数来实现对文本的旋转特效. 完整的实例代码如下: unit Unit1; interface uses Windows, Messages, SysUtils, Classes, Graphics,

JavaScript实现自动对页面上敏感词进行屏蔽的方法

本文实例讲述了JavaScript实现自动对页面上敏感词进行屏蔽的方法.分享给大家供大家参考.具体如下: <html> <head> <title>Bad Words Example</title> <script type="text/javascript"> function filterText(sText) { var reBadWords = /badword|anotherbadword/gi; return sT

javascript模拟map输出与去除重复项的方法

本文实例讲述了javascript模拟map输出与去除重复项的方法.分享给大家供大家参考.具体方法如下: 1.Javascriptmap输出 function Map(){ // private var obj = {} ;// 空的对象容器,承装键值对 // put 方法 this.put = function(key , value){ obj[key] = value ;// 把键值对绑定到obj对象上 } // size 方法 获得map容器的个数 this.size = functio

JavaScript实战(原生range和自定义特效)简单实例

今天我又码了两个特效:一个是用原生input[type=range]的,另一个完全自定义的:下面是完整代码和演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #tip{ position: absolute; top: 30px; left: 0; ri

JavaScript实现自动切换图片代码

本文给大家分享一段js代码实现自动切换图片的实例代码,代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

纯javascript实现自动发送邮件

描述: 此JavaScript将帮助你的电子邮件的人.只要按一下电子邮件,有人!和JavaScript会要求的电子邮件地址,主题,等等然后你,新的邮件,是向你打开了. <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function mailsome1(){ who=prompt("Enter recipient's email address: ","antispammer@earthling.net