一个挺简单的网页特效：JS让网页上文字出现键盘打字的打字效果实现

　　演示地址：http://codepen.io/guihailiuli/pen/jPOYMZ

以代码形式实现过程分析：

<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.cnblogs.com/guihailiuli/";

    newstitle[1] = "http://www.cnblogs.com/guihailiuli/";

    newshref[1] = "http://www.cnblogs.com/guihailiuli/";

    newstitle[2] = "博客园欢迎你哦";

    newshref[2] = "http://www.cnblogs.com";

    newstitle[3] = "ByeBye~~";

    newshref[3] = "http://www.cnblogs.com";

    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>

JS让网页上文字出现键盘打字的打字效果的更多相关文章

  1. Progress.js – 为页面上的任意对象创建进度条效果

    Progress.js 是一个 JavaScript 和 CSS3 的库,它帮助开发人员为网页上的每个对象创建和管理进度条效果.你可以设计自己的模板,进度条或者干脆定制. 您可以使用 Progress ...

  2. JS为网页添加文字水印【原创】

    最近需要实现为网页添加水印的功能,由于水印的信息是动态生成的,而百度谷歌上的方法往往都是为网页添加图片水印或为图片添加水印,而为网页添加文字水印相关资料较少,于是就自己动手写了这个代码. 通常加动态水 ...

  3. 使用js在网页上记录鼠标划圈的小程序

    Spin-Wheel 实现鼠标在网页上转圈时记录转动圈数的小程序,每转一圈记录一次,同时要是顺时针方向的. 问题分析与实现 这个小程序的难点在于如何知道鼠标完成了一个转圈的动作,而且人工使用鼠标划圈时 ...

  4. 原生JS在网页上复制的所有文字后面自动加上一段版权声明

    不少技术博客有这样的处理,当我们复制代码的时候,会自动加上一段本信息版权为XXXX,这是怎么实现的呢? 其实实现的方式很简单,可以在我的网站页面上绑定一个copy事件,当你复制文章内容的时候,自动在剪 ...

  5. js实现网页上图片循环播放

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/T ...

  6. css和js禁止网页选择文字

    user-select有两个值: none:用户不能选择文本 text:用户可以选择文本 需要注意的是:user-select并不是一个W3C的CSS标准属性,浏览器支持的不完整,需要对每种浏览器进行 ...

  7. js获取网页上选中的部分，包含html代码

    function getSelectedContents(){     if (window.getSelection) { //chrome,firefox,opera         var ra ...

  8. 使用js在网页上显示时间

    <html> <script> function getDate(){ var d,s,t; d = new Date(); s = d.getFullYear().toStr ...

  9. 利用JS 在网页上获取并显示当前日期 星期

    下边的HTML代码,可以取出日期与星期 <html><body><h1><script language=JavaScript>var d, s = & ...

随机推荐

  1. javascript 中数组的创建 添加 与将数组转换成字符串 页面三种提交请求的方式

    创建js数组 var array=new Array(); Java中创建数组 private String[] array=new String[3]; 两个完全不同的,js中是可变长度的 添加内容 ...

  2. Linux入门-第五周

    1.磁盘lvm管理,完成下面要求,并写出详细过程: 1) 创建一个至少有两个PV组成的大小为20G的名为testvg的VG;要求PE大小 为16MB, 而后在卷组中创建大小为5G的逻辑卷testlv; ...

  3. 微信小程序数据传递基本

    1.从后台服务器获取数据,然后存在JS,通过数据绑定显示在页面 后台获取数据: getUser: function () { var that = this; //function 里面已经不是thi ...

  4. 高级同步器：信号量Semaphore

    引自:https://blog.csdn.net/Dason_yu/article/details/79734425 一.信号量一个计数信号量.从概念上讲,信号量维护了一个许可集.Semaphore经 ...

  5. 关于antd-mobile中列表上拉加载PullToRefresh的使用

    相信有很多小伙伴发现antd-mobile中的下拉刷新组件,也发现例子挺难的,其实这个组件并没有那么复杂,只是demo例子不好理解,给大家提供一个简单的demo,或许可以帮到你 上拉刷新下拉加载 - ...

  6. Ubuntu 16.04 swoole扩展安装注意！！！

    前言:目前很多项目估计常常会用到swoole扩展,如个人使用Ubuntu虚拟机安装扩展,这里总结一下遇到的问题: 一.先保证服务器时间同步当前地区时间,如北京时间: 1.设定时区 如:设定时区:dpk ...

  7. ECSHOP和SHOPEX快递单号查询EMS插件V8.6专版

    发布ECSHOP说明: ECSHOP快递物流单号查询插件特色 本ECSHOP快递物流单号跟踪插件提供国内外近2000家快递物流订单单号查询服务例如申通快递.顺丰快递.圆通快递.EMS快递.汇通快递.宅 ...

  8. 4.2 执行环境及作用域【JavaScript高级程序设计第三版】

    执行环境(execution context,为简单起见,有时也称为“环境”)是JavaScript 中最为重要的一个概念.执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为.每个执行环 ...

  9. PHP-入门指引1

    PHP("PHP: Hypertext Preprocessor",超文本预处理器的字母缩写)是一种被广泛应用的开放源代码的多用途脚本语言,它可嵌入到 HTML中,尤其适合 web ...

  10. 消费滚动滴log日志文件(flume监听,kafka消费,zookeeper协同)

    第一步:数据源 手写程序实现自动生成如下格式的日志文件: 15837312345,13737312345,2017-01-09 08:09:10,0360 打包放到服务器,使用如下命令执行,模拟持续不 ...