5月最近在学Django，所以所有的Demo都没有PO出去

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script type="text/javascript"></script>

    <title>打印机效果</title>

</head>

<body>

<pre class="aa"></pre>

<div style="display:none" class="w">Hello World

</div>

<script>

  var index=0;

var word=document.getElementsByClassName("w")[0].innerHTML;

function type(){

    document.getElementsByClassName("aa")[0].innerText = word.substring(0,index++);

}

setInterval(type, 200);

</script>

<!--记得引入jquery文件哦-->

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

JS实现HTML打印机效果的更多相关文章

  1. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  2. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. [JS,NodeJs]个人网站效果代码集合

    上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...

  4. turn.js实现翻书效果

    JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...

  5. 面向对象原生js幻灯片代淡出效果

    面向对象原生js幻灯片代淡出效果 下面是代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  6. Turn.js 实现翻书效果的学习与总结

    最近CTO给我分配了一个移动端H5开发的任务,主要功能是需要实现翻书效果,我听过主要需求后,当时是呀!!!接下来自己尝试使用fullPage.js和Swiper来实现翻书效果,结果效果都不是非常的理想 ...

  7. JS 文本输入框放大镜效果

    JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...

  8. 原生js实现的放大镜效果

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...

  9. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

随机推荐

  1. centos7的编译安装php5.3 （针对老系统必须安装php5.3才能运行）

    大家都知道,centos6以上yum都自带5.4以上的php版本,可是一些老系统必须安装 php-5.3该怎么办呢.下面我来教大家一步步编译安装.看看我踩过的坑. 第一步: 网上下载php5.3的源码 ...

  2. jemeter参数化读取文件

    1.新建一个123.csv文件 如图 2.添加http请求 3.添加一个查看结果树 二.通过函数助手 (1)打开函数助手 ......... 在json属组中引入变量  这是别人参考的

  3. select的option触发事件

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  4. 【Computer Vision】 复现分割网络(1)——SegNet

    目录 Tags: ComputerVision 编译 数据处理 训练结果 Reference Tags: ComputerVision 编译 src/caffe/layers/contrastive_ ...

  5. Maven Hibernate

    1.使用maven管理Hibernate实现自动装配jar包 2.需要在配置文件pom.xml中引入 如:引入hibaernate5.2.11.Final版本的jar包,需要做如下配置: <!- ...

  6. V$INSTANCE 字段说明

    http://blog.csdn.net/wyzxg/article/details/4728622 http://blog.csdn.net/warden2010/article/details/6 ...

  7. 看云-git类的书籍写作

    看云-git类的书籍写作 https://www.kancloud.cn/explore 测试一本:https://www.kancloud.cn/stono/b001/501901

  8. HDOJ 5099 Comparison of Android versions 坑题

    现场赛的时候错了十四次. . ... Comparison of Android versions Time Limit: 2000/1000 MS (Java/Others)    Memory L ...

  9. 使用CSStickyHeaderFlowLayout实现头部固定的CollectionView

    近期流行的一种界面效果,是瀑布流的header固定,也叫sticky header或者parallax.对于UITableView,能够比較方便地让table header固定,可是对于UIColle ...

  10. sql查询语句中的乱码 -- 前面加N

    直接运行sql出出现乱码,在中文字符前加N就能够正常显示了.N的含义就是用nvarchar格式显示.