基于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 相关文章推荐
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
vue 实现锚点功能操作
Aug 10 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
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
HTML node相关的一些资料整理
2010/01/01 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
python实现局域网内实时通信代码
2019/12/22 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
大学生自我鉴定
2013/12/08 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
个人工作表现评语
2014/04/30 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python