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. vj线段树专题

    vj线段树专题题解 单点更新模板 void build(int x,int l,int r){//sum[x]控制l-r区域 if(l==r){Sum[x]=num[l];return ;} int ...

  2. 用haproxy实现nginx的proxy_pass转发功能

    公司的网站有个需求,主站点上有两个URL,没有在本地nginx上配置,而是在另一台主机的nginx上配置的站点.如果使用nginx作为反向代理,可以使用proxy_pass指令转发对这两个URL的请求 ...

  3. 素数（Prime）

    素数的判断: #include<math.h> bool IsPrime(int n) { ) return false; int sqr = (int)sqrt(1.0*n); ; i& ...

  4. [bzoj2662 BeiJing wc2012] 冻结 (分层图+最短路)

    传送门 Description "我要成为魔法少女!" "那么,以灵魂为代价,你希望得到什么?" "我要将有关魔法和奇迹的一切,封印于卡片之中„„&q ...

  5. [tyvj-1071]LCIS 动态规划

    LCIS模板 #include <cstdio> #include <cstring> #include <iostream> using namespace st ...

  6. linux github 添加ssh

    1.本地生成key,  xxx 是github 的账号, 执行下面命令一路下一步 ssh-keygen -t rsa -C "xxx" 2.复制下面的public key 到git ...

  7. 轻量级Java EE开发框架设计系统应用架构

    首先来说一下Java EE 概述 其中常说的三大框架即是:ssh Spring:功能强大的组件粘合济,能够将你的所有的java功能模块用配置文件的方式组合起来(还让你感觉不到spring的存在)成为一 ...

  8. Objective-C - 改变NSMutableArray的特定元素

    NSMutableArray改动元素, 使用-insertObject: atIndex: 和-replaceObjectAtIndex: withObject: 都能够, 即通过插入(insert) ...

  9. Android Cursor浅析

    1. 本文目的 Android ContentProvider提供了进程间数据交换的一种机制.而数据库的查询就是这样的机制的应用.那么app通过Uri查询数据库而得到的Cursor到底是个什么东西?为 ...

  10. C/C++知识要点5——智能指针原理及自己定义实现

    智能指针概述: 智能指针用来管理动态对象.其行为类似于常规指针,重要的差别是:它负责自己主动释放所指向的对象. C++ 11标准库提供两种智能指针:shared_ptr.unique_ptr 差别是: ...