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. [NOI2005]维护数列_Splay

    真的毫无算法可言,就是比谁的码力强罢了... Code: #include<stack> #include<cstdio> #include<algorithm> ...

  2. python之openpyxl模块

    一 . Python操作EXCEL库的简介 1.1 Python官方库操作excel Python官方库一般使用xlrd库来读取Excel文件,使用xlwt库来生成Excel文件,使用xlutils库 ...

  3. BZOJ 4951 [WF2017]Money for Nothing (决策单调优化DP+分治)

    题目大意:略 题目传送门 不愧是$World final$的神题,代码短,思维强度大,细节多到吐..调了足足2h 贪心 我们利用贪心的思想,发现有一些工厂/公司是非常黑心的 以工厂为例,对于一个工厂$ ...

  4. Python学习笔记（3）for循环和while循环

    2019-02-25 (1)break语句:终止当前循环,跳出循环体. (2)continue语句:终止本轮循环并开始下一轮循环(在下一轮循环开始前,会先测试循环条件). (3)for循环 ① ran ...

  5. Django入门--创建项目及应用

    Django是用于后台处理的web应用框架.用户通过浏览器输入网址,向http服务器发起访问网页的请求,http服务器(Apache/Nginx)接收到用户请求后,把请求发送给web应用框架进行处理, ...

  6. 利用Tensorflow训练自定义数据

    很多正在入门或刚入门TensorFlow机器学习的同学希望能够通过自己指定图片源对模型进行训练,然后识别和分类自己指定的图片.但是,在TensorFlow官方入门教程中,并无明确给出如何把自定义数据输 ...

  7. https://stackoverflow.com/questions/16130292/java-lang-outofmemoryerror-permgen-space-java-reflection

    https://stackoverflow.com/questions/16130292/java-lang-outofmemoryerror-permgen-space-java-reflectio ...

  8. Apach配置本地域名

    分三步: 一,开启虚拟域名设置,在路径中找到(apache\apache2.4.9\conf)httpd.conf 配置文件, 去掉 " Include conf/extra/httpd-v ...

  9. hrift does not support polymorphic data types

    hrift does not support polymorphic data types Exception in thread "main" com.facebook.swif ...

  10. 开发效率必备之Mac双屏显示

    自从2015年9月苹果公布EI Captain,带来了一个新的功能,叫做分屏,也就是在一块屏幕上分成左右两部分,能够分别进行操作,互不影响. 例如以下图所看到的: watermark/2/text/a ...