DDR爱好者之家

基于js实现逐步显示文字输出代码实例
站长资源 2024/4/28 佚名
77 1538
DDR爱好者之家 Design By 杰米

今天清理chrome书签，突然就点到了一个关于 知乎五周年的网页，这帮程序员的脑子真有趣，就算是保存一年后再看也还是觉得好有趣，下边是一个截图图片描述

基于js实现逐步显示文字输出代码实例

这个网页展示了一个类似ide接口的小窗口，文字逐步输入，并且还伴随一些有点炫的css动画，为个人生成专属数据。当然这个展示还包括了其他一些数据的传输啦，特殊效果（类似触发一个标签的js回调啦），css那个一堆波浪的动画啦等等一些有意思的，这些暂时不管，我们今天就来看看这个逐步显示的文字是怎么做到的，我首先想到的就是做一个简单的demo

由于没有读过这个网页的源码所以不保证思路相同，所以做法很简单就是：

把一段文字用定时器回显到网页上，

最后有一个一闪一闪的游标，那个是需要单独拿出来的做一个定时器的，下边给出代码参考：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<title>逐个显示</title> 
<style type="text/css">
#fuck{
  visibility:visible;
}
</style>


<body> 
<div id="content" style="float:left"></div><span id="fuck">|</span>
</body> 
<script type="text/javascript"> 
window.onload=function(){
//首先要干的就是：先把后边的span初始化好
function toggleSpan(){
  var HIDspan=document.getElementById("fuck");
  HIDspan.style.visibility=(HIDspan.style.visibility=="visible")"hidden":"visible";
}
setInterval(toggleSpan,500);


//开始初始化基础文本
 var ocontent=document.getElementById("content");
 var str="你猜我们会写几个字，不管我写几个字反正不会超过一行就对了";
 var i=0;
 var flag=null;
 
 
 function done(){
  if(i<str.length){
   ocontent.innerHTML=str.substring(0,i+1);
   i=i+1;
  } 
  else{
   clearInterval(flag);
  } 
 }
 flag=setInterval(done,200);
}
</script> 
</html>

这样一个简单的js控制回显就完成了，是不是超级简单？ ^V^

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
DDR爱好者之家 Design By 杰米