JS实现简单的键盘打字的效果


Posted in Javascript onApril 24, 2015

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

<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] = "https://3water.com/guihailiuli/";
  
  newstitle[1] = "https://3water.com/guihailiuli/";
  newshref[1] = "https://3water.com/guihailiuli/";
  
  newstitle[2] = "博客园欢迎你哦";
  newshref[2] = "https://3water.com";
  
  newstitle[3] = "ByeBye~~";
  newshref[3] = "https://3water.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>

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

Javascript 相关文章推荐
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
Javascript !!的作用
Dec 04 Javascript
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
vue路由前进后退动画效果的实现代码
Dec 10 Javascript
js不常见操作运算符总结
Nov 20 Javascript
javascript中replace( )方法的使用
Apr 24 #Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 #Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 #Javascript
原生js制作简单的数字键盘
Apr 24 #Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 #Javascript
Node.js实现Excel转JSON
Apr 24 #Javascript
js中for in语句的用法讲解
Apr 24 #Javascript
You might like
php.ini 中文版
2006/10/28 PHP
PHP编实现程动态图像的创建代码
2008/09/28 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
Python实现文件按照日期命名的方法
2015/07/09 Python
python实现AES加密解密
2019/03/28 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
使用Django清空数据库并重新生成
2020/04/03 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
小学生暑假感言
2014/02/06 职场文书
教师个人鉴定材料
2014/02/08 职场文书
中学生寄语大全
2014/04/03 职场文书
出国签证在职证明范本
2014/11/24 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
学校运动会简讯
2015/07/20 职场文书
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript