JS实现简单的键盘打字的效果
更新时间：2015年04月24日 10:37:21 投稿：hebedich
本文给大家分享的是使用javascript实现的简单的键盘打字效果，十分的简单实用，推荐给有需要的小伙伴参考下。
以代码形式实现过程分析：
<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://www.jb51.net/guihailiuli/";
newstitle[1] = "https://www.jb51.net/guihailiuli/";
newshref[1] = "https://www.jb51.net/guihailiuli/";
newstitle[2] = "博客园欢迎你哦";
newshref[2] = "https://www.jb51.net";
newstitle[3] = "ByeBye~~";
newshref[3] = "https://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有些帮助。
相关文章
在项目中遇到错误提示“No 'Access-Control-Allow-Origin' header is present on the requested resource.”查了下度娘，这个问题和安全机制有关，默认不允许跨域调用，这里记录一下解决方案，防止以后再犯相同的错误。2014-11-11
为了满足用户的方便，提供良好的自动提示功能就成为定级公司努力方向。废话少说，看例子2012-01-01
在Web前端开发中,定时执行某个任务是常见的需求之一,无论是为了实现轮询服务器获取最新数据、定期更新用户界面还是其他周期性操作,JavaScript提供了多种方法来设置定时循环,本文将深入探讨如何使用setTimeout和setInterval来定时执行任务,需要的朋友可以参考下2025-02-02
在开发中我们经常会遇到对于字符串的部分取舍问题，本文主要介绍了js裁剪(分隔)字符串的三种常用方法，今天我们来看看3中常用的方法来解决这个问题，感兴趣的可以一起了解一下2022-02-02
因为想自动定位到子元素，所以一直在找各种找寻元素位置的代码。 不过总是找不到可以定位子元素相对位置的代码2012-07-07
用JavaScript 处理 URL 的两个函数代码...2007-08-08
这篇文章主要介绍了详解webpack解惑：require的五种用法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
下面小编就为大家分享一篇仿京东快报向上滚动的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了JS控制日期显示的小例子，有需要的朋友可以参考一下2013-11-11
这篇文章主要为大家详细介绍了微信小程序云开发实现数据添加、查询和分页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
最新评论