本例中使用的是jq和es6的语法,代码如下:

html:

<div id="box">
this is test <br/>
 这是测试用的
</div>

css样式表:

  <style>
#box {
display: none;
border: 1px solid #ccc;
margin: 20px 30em;
padding: 20px;
line-height: 1.8;
font: 14px/1.8 "microsoft yahei";
} #box:after {
content: "_";
animation: flash .6s steps(2, start) infinite;
} @keyframes flash {
0% {
visibility: visible;
}
100% {
visibility: hidden;
}
} </style>

 jq:

<script src="http://g.ydbcdn.com/jquery/latest/jquery.min.js"></script>
<script>
$(() => {
let index = 0;
let code = $("#box").html();
$("#box").html("").css("display","block");
let start = () => {
index++;
if (index <= code.length) {
switch (code.charAt(index)) {
case "<":
index = code.indexOf(">", index);
break;
case "&":
index = code.indexOf(";", index);
break;
}
$("#box").html(code.substring(0, index));
setTimeout(start, 100)
}
};
start();
})
</script>

  效果如下:

使用jq实现打印机的效果的更多相关文章

  1. JQ实现accordion(可折叠)效果

    先看效果--这个就是手风琴的效果:          原理:首先默认section1下面的dd可见,其他的全部隐藏:当点击某个obj时候,  快速隐藏全部的dd,然后只有obj.NEXT().show ...

  2. jq实现楼层切换效果

    <!DOCTYPE html> <html> <head> <style> * { margin: 0; padding: 0; box-sizing: ...

  3. jq封装-无缝滚动效果

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

  4. jq的图片放大镜效果

    <div class="imgbox"> <div class="probox"> <img src="" a ...

  5. jq PC做滚动效果经常用到的各类参数【可视区判断】

    获取 浏览器显示区域 (可视区域)的高度 :  $(window).height();  获取浏览器显示区域(可视区域)的宽度 :  $(window).width();  获取页面的文档高度: $( ...

  6. jq数字翻页效果,随机数字显示,实现上下翻动效果

    最近在做一个项目,需要实时展示一串数字,要有类似于日历翻页的效果,在网上找寻了一番,发现dataStatistics这个插件http://www.jq22.com/jquery-info8141能实现 ...

  7. jq实现多级手风琴效果

    /*左侧*/ .wrapper, .main { height: 100%; z-index: 9 } .main { position: relative; } .main_L { width: 2 ...

  8. jq 全选/取消效果

    //全选框$('#btnbutton').live('click',function(){ var data = $(this).attr('data'); if(data=='on'){ $(&qu ...

  9. jq实现地址级联效果

    (function ($) { $.fn.Address = function (options) { var defaults = { divid: "Address", cal ...

随机推荐

  1. Javascript遍历页面控件

    function validate(){ //var Elements = document.all;  var Elements = document.getElementsByTagName(&q ...

  2. c# 操作Word总结

    在医疗管理系统中为保存患者的体检和治疗记录,方便以后的医生或其他人查看.当把数据保存到数据库中,需要新建很多的字段,而且操作很繁琐,于是想到网页的信息创建到一个word文本中,在显示的时,可以在线打开 ...

  3. 加解密(校验哈希值、MD5值)

    1.计算文本哈希值: public static string ComputeHash(string password) { byte[] buffer = System.Text.Encoding. ...

  4. 类模板、Stack的类模板实现(自定义链栈方式,自定义数组方式)

    一.类模板 类模板:将类定义中的数据类型参数化 类模板实际上是函数模板的推广,可以用相同的类模板来组建任意类型的对象集合 (一).类模板的定义 template  <类型形参表> clas ...

  5. FPGA管脚分配文件保存方法

    使用别人的工程时,有时找不到他的管脚文件,但可以把他已经绑定好的管脚保存下来,输出到文件里. 方法一: 查看引脚绑定情况,quartus -> assignment -> Pins,打开F ...

  6. Spring Cloud(四):熔断器Hystrix

    熔断器 雪崩效应 在微服务架构中通常会有多个服务层调用,基础服务的故障可能会导致级联故障,进而造成整个系统不可用的情况,这种现象被称为服务雪崩效应.服务雪崩效应是一种因“服务提供者”的不可用导致“服务 ...

  7. List<T>做数据源绑定的问题

    List<C_Pinpai> lc;// = new List<C_Pinpai>(); private void BindGrid() { //if (lc.Count &g ...

  8. oracle db_*和v$*表

    dba_开头    dba_users     数据库用户信息    dba_segments  表段信息    dba_extents    数据区信息 dba_objects 数据库对象信息    ...

  9. hdu4675 GCD of Sequence 莫比乌斯+组合数学

    /** 题目:hdu4675 GCD of Sequence 链接:http://acm.hdu.edu.cn/showproblem.php?pid=4675 题意:给定n个数的a数组,以及m,k: ...

  10. ES-PHP向ES批量添加文档报No alive nodes found in your cluster

    ES-PHP向ES批量添加文档报No alive nodes found in your cluster 2016年12月14日 12:31:40 阅读数:2668 参考文章phpcurl 请求Chu ...