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


Posted in Javascript onApril 02, 2020

今天清理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^

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DOM精简教程
Oct 03 Javascript
js Html结构转字符串形式显示代码
Nov 15 Javascript
JavaScript中OnLoad几种使用方法
Dec 15 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
15位和18位身份证JS校验的简单实例
Jul 18 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 #Javascript
Javascript模块化机制实现原理详解
Apr 02 #Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 #Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 #jQuery
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 #Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 #Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 #Javascript
You might like
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
解析CodeIgniter自定义配置文件
2013/06/18 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
jquery实现简单拖拽效果
2020/07/20 jQuery
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
Python实现批量修改文件名实例
2015/07/08 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
初中生学习生活的自我评价
2013/11/20 职场文书
2014年自我评价
2014/01/04 职场文书
最新奶茶店创业计划书
2014/01/25 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
购房个人委托书范本
2014/10/11 职场文书
实习科室评语
2015/01/04 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS