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

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

这个网页展示了一个类似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^

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

赞 (0)

相关推荐

  • 图片文字识别（OCR）插件Ocrad.js教程

    Ocrad.js 相当于是 Ocrad 项目的纯 JavaScript 版本,使用 Emscripten 自动转换.这是一个简单的 OCR (光学字符识别)程序,可以扫描图像中的文字回文本. 不像 GOCR.js,Ocrad.js 被设计成一个端口,而不是围绕可执行的包装.这意味着后续的图像处理,并不涉及重新初始化可执行代码,以便处理图像尽可能少的进行,因此它需要的时间仅为 GOCR.js 的八分之一. GOCR.js 已在 github 进行开源,下载地址 ocrad.js 的csdn资源下载

  • 原生JS实现旋转轮播图+文字内容切换效果【附源码】

    废话不多说,直接上图看效果: 需求: 点击左右按钮实现切换用户图片与信息: 原理: 点击右侧左侧按钮,把3号的样式给2号,2号的给1号,1号的给5号,5号的给4号,4号的样式给3号,然后根据现在是第几张图片切换成对应的文字: 步骤: 1.让页面加载出所有盒子的样式: 2.把两侧按钮绑定事件(调用同一个方法,只有一个参数,true为正向旋转,false为反向旋转): 3.书写函数: 操作函数:左按钮:删除第一个,添加到最后一个: 右按钮:删除最后一个,添加到第一个: 4.定义变量,根据对应变量切换

  • javascript（基于jQuery）实现鼠标获取选中的文字示例【测试可用】

    javascript（基于jQuery）实现鼠标获取选中的文字示例【测试可用】

    本文实例讲述了javascript实现鼠标获取选中的文字.分享给大家供大家参考,具体如下: HTML部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> &l

  • JS实现简单的文字无缝上下滚动功能示例

    本文实例讲述了JS实现简单的文字无缝上下滚动功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="" /> <title>文字列表无缝滚动代码</title> <style type="text/cs

  • JS实现排行榜文字向上滚动轮播效果

    JS实现排行榜文字向上滚动轮播效果

    最近在一个抽奖活动中需要在页面上对中奖名单做排行榜的轮播,故根据下面的简单列子修改实现了滚动效果. 效果图(文字向上轮播): demo如下: <!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="

  • HTML+JS实现“代码雨”效果源码（黑客帝国文字下落效果）

    我们先看看HTML+JS实现"代码雨"的最终效果 1.绿色: 2.彩色: 3.背景色: 4.绿色逐渐变浅: 源代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Code -by ZhenYu.Sha</title>

  • js实现鼠标点击页面弹出自定义文字效果

    js实现鼠标点击页面弹出自定义文字效果

    本文实例为大家分享了js鼠标点击页面弹出文字的具体代码,供大家参考,具体内容如下 效果: 实现代码: (function(e){ // 点击事件触发生生元素等一系列动作的初始状态 var bombFlag = true; // body节点 var elBody = document.getElementsByTagName("body")[0]; // 初始化文字数组下标 var a_idx = 0; elBody.onclick = function(e) { if(bombFla

  • 解决Python下json.loads()中文字符出错的问题

    Python:2.7 IDE:Pycharm5.0.3 今天遇到一个问题,就是在使用json.load()时,中文字符被转化为Unicode码的问题,解决方案找了半天,无解.全部代码贴出,很简单的一个入门程序,抓的是有道翻译的,跟着小甲鱼的视频做的,但是他的版本是python3.4,所以有些地方还需要自己改,不多说,程序如下: import urllib#python2.7才需要两个urllib url="http://fanyi.youdao.com/translate?smartresult

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

    今天清理chrome书签,突然就点到了一个关于 知乎五周年的网页,这帮程序员的脑子真有趣,就算是保存一年后再看也还是觉得好有趣,下边是一个截图图片描述 这个网页展示了一个类似ide接口的小窗口,文字逐步输入,并且还伴随一些有点炫的css动画,为个人生成专属数据.当然这个展示还包括了其他一些数据的传输啦,特殊效果(类似触发一个标签的js回调啦),css那个一堆波浪的动画啦等等一些有意思的,这些暂时不管,我们今天就来看看这个逐步显示的文字是怎么做到的,我首先想到的就是做一个简单的demo 由于没有读

  • 基于js实现抽红包并分配代码实例

    这篇文章主要介绍了基于js实现抽红包并分配代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 将 50000元随机分给10个人,其中3个人必须分到百位数,4个人分到千位数,3个人分到万位数,每个人所得金额 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name=&

  • 基于JS实现计算24点算法代码实例解析

    前言 休息的时候无意间看到群里有人发出了华为的校招题,一开始看题目的时候觉得很简单,于是晚上就试着写了一下,结果写的过程中打脸,不断的整理逻辑不断的重写,但我的性格又是不做出来晚上睡不好的那种,于是在做出来的时候就分享给大家(快凌晨三点了有木有,这校招题难度都达到这级别了?o(╥﹏╥)o) 题目描述 审题要注意:1+2+3*4是前面三个已经相加为6再乘4,没有括号!! 代码: <!DOCTYPE html> <html lang="en"> <head&g

  • 基于JS实现新闻列表无缝向上滚动实例代码

    当新闻较多,并且空前有限的时候,使用滚动是一个不错的选择,本章节就通过代码实例介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>文字列表无缝向上滚动代码<

  • 基于JS实现无缝滚动思路及代码分享

    原理: 1.给ul一个绝对定位使其脱离文档流,left设置为0,把图片塞进ul里,编写一个"移动"函数,函数功能能够使ul的left以一个正速度向右跑动, 2.设置一个定时器,让"移动"函数每30(参数可变)毫秒执行一次 3.因为ul的长度会"跑"完,此时可以使ul的content也就是img增加一倍, oUl.innerHTML +=oUl.innerHTML; 4.此时因为ul的content增加,其width也会随着增大,根据实际项目展示图

  • js实现日期显示的一些操作(实例讲解)

    js实现日期显示的一些操作(实例讲解)

    1.js获取当前日期(yyyy-mm-dd) 以下代码是获取到的当前日期: var myDate = new Date(); var year = myDate.getFullYear(); //获取完整的年份(4位,1970-????) var month = myDate.getMonth()+1; //获取当前月份(1-12) var day = myDate.getDate(); //获取当前日(1-31) //获取完整年月日 var newDay = year + "-" +

  • python基于FTP实现文件传输相关功能代码实例

    这篇文章主要介绍了python基于FTP实现文件传输相关功能代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 本实例有文件传输相关功能,包括:文件校验.进度条打印.断点续传 客户端示例: import socket import json import os import hashlib CODE = { '1001':'重新上传文件' } def file_md5(file_path): obj = open(file_path,'rb

  • 基于Python批量生成指定尺寸缩略图代码实例

    基于Python批量生成指定尺寸缩略图代码实例

    这篇文章主要介绍了基于Python批量生成指定尺寸缩略图代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 最近我们商城上架的应用越来越丰富了.但在应用上传的过程中遇到这样的一个问题:每一个上架的应用需要配置一个应用封面图片,并且封面的图片大小有指定的范围:300*175.而 我们制作完的图片一般都会大于这个尺寸.所以每次手动调整大小,又让我产生了偷懒的想法,想法有了那就开始行动吧. 代码 import requests as req fr

  • Python字符串格式化输出代码实例

    这篇文章主要介绍了Python字符串格式化输出代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 使用占位符%s name = '小飞' print('姓名是: %s' % name) format()函数 格式:"{} {}".format(value,value) 示例: name = 'Tom' age = 7 hobby = '玩滑滑梯!' money = 8.5 message= '{}今年{}岁,最喜欢{},有零花钱:

  • python基于plotly实现画饼状图代码实例

    python基于plotly实现画饼状图代码实例

    这篇文章主要介绍了python基于plotly实现画饼状图代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码 import pandas as pd import numpy as np import plotly.plotly as py import plotly.graph_objs as go path = '/home/v-gazh/PycharmProjects/us_data/limit_code.csv' df = p

随机推荐