使用jq实现打印机的效果
本例中使用的是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实现打印机的效果的更多相关文章
- JQ实现accordion(可折叠)效果
先看效果--这个就是手风琴的效果: 原理:首先默认section1下面的dd可见,其他的全部隐藏:当点击某个obj时候, 快速隐藏全部的dd,然后只有obj.NEXT().show ...
- jq实现楼层切换效果
<!DOCTYPE html> <html> <head> <style> * { margin: 0; padding: 0; box-sizing: ...
- jq封装-无缝滚动效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- jq的图片放大镜效果
<div class="imgbox"> <div class="probox"> <img src="" a ...
- jq PC做滚动效果经常用到的各类参数【可视区判断】
获取 浏览器显示区域 (可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度: $( ...
- jq数字翻页效果,随机数字显示,实现上下翻动效果
最近在做一个项目,需要实时展示一串数字,要有类似于日历翻页的效果,在网上找寻了一番,发现dataStatistics这个插件http://www.jq22.com/jquery-info8141能实现 ...
- jq实现多级手风琴效果
/*左侧*/ .wrapper, .main { height: 100%; z-index: 9 } .main { position: relative; } .main_L { width: 2 ...
- jq 全选/取消效果
//全选框$('#btnbutton').live('click',function(){ var data = $(this).attr('data'); if(data=='on'){ $(&qu ...
- jq实现地址级联效果
(function ($) { $.fn.Address = function (options) { var defaults = { divid: "Address", cal ...
随机推荐
- Javascript遍历页面控件
function validate(){ //var Elements = document.all; var Elements = document.getElementsByTagName(&q ...
- c# 操作Word总结
在医疗管理系统中为保存患者的体检和治疗记录,方便以后的医生或其他人查看.当把数据保存到数据库中,需要新建很多的字段,而且操作很繁琐,于是想到网页的信息创建到一个word文本中,在显示的时,可以在线打开 ...
- 加解密(校验哈希值、MD5值)
1.计算文本哈希值: public static string ComputeHash(string password) { byte[] buffer = System.Text.Encoding. ...
- 类模板、Stack的类模板实现(自定义链栈方式,自定义数组方式)
一.类模板 类模板:将类定义中的数据类型参数化 类模板实际上是函数模板的推广,可以用相同的类模板来组建任意类型的对象集合 (一).类模板的定义 template <类型形参表> clas ...
- FPGA管脚分配文件保存方法
使用别人的工程时,有时找不到他的管脚文件,但可以把他已经绑定好的管脚保存下来,输出到文件里. 方法一: 查看引脚绑定情况,quartus -> assignment -> Pins,打开F ...
- Spring Cloud(四):熔断器Hystrix
熔断器 雪崩效应 在微服务架构中通常会有多个服务层调用,基础服务的故障可能会导致级联故障,进而造成整个系统不可用的情况,这种现象被称为服务雪崩效应.服务雪崩效应是一种因“服务提供者”的不可用导致“服务 ...
- List<T>做数据源绑定的问题
List<C_Pinpai> lc;// = new List<C_Pinpai>(); private void BindGrid() { //if (lc.Count &g ...
- oracle db_*和v$*表
dba_开头 dba_users 数据库用户信息 dba_segments 表段信息 dba_extents 数据区信息 dba_objects 数据库对象信息 ...
- hdu4675 GCD of Sequence 莫比乌斯+组合数学
/** 题目:hdu4675 GCD of Sequence 链接:http://acm.hdu.edu.cn/showproblem.php?pid=4675 题意:给定n个数的a数组,以及m,k: ...
- 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 ...