<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>打印效果 测试</title>

    <style>

        body{

            background: #000;

        }

        #demo{

            font-family: helvetica;

            text-transform: uppercase;

            text-align: center;

            color: #fefefe;

            font-size: 200px;

            text-shadow: #e7e7e7 3px 5px 0, #999 4px 6px 3px, #ccc 8px 11px 10px;　　

        }

    </style>

</head>

<body>

    <div id="demo">

    </div>

    <script>

        var  str = "for example,再有几天都该七夕节了，你为她准备了什么礼物？"，

        　　 i =0，

        　　 cal；

        function demoStr(){

            if(i < str.length){

                cal = str.substring(0, i++) + "_";

                document.getElementById("demo").innerHTML = cal;

                setTimeout(demoStr,500);

            }else{

                document.getElementById("demo").innerHTML = str;　　//相当于清除下划线以及计时器效果

            }

        }

        demoStr();

    </script>

</body>

</html>

js 实现 文字打印效果的更多相关文章

  1. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  2. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  3. js拖拽效果

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

  4. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  5. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  6. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...

  7. js弹窗登录效果(源码)--web前端

    1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  8. 原生JS实现弹幕效果

    纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的.   首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...

  9. JS添加标签效果

    JS添加标签效果 在豆瓣网上添加自己的标签是一种常见的效果,今天也就做了一个简单的demo.由于时间的问题 我不多原理,大家可以试着操作几遍就能明白其中的原理了. JSFiddle的效果如下: 点击我 ...

随机推荐

  1. 浅谈MES系统SMT的JIT功能（二）：JIT流程

    上周说到JIT的原理,今天就说说JIT功能的基本流程:从维护基本信息——>生产人员排程——>仓库人员发料——>生产上料——>JIT物料配送看板拉到仓库人员发第二次料,循环上料发 ...

  2. document文档流详解

    html页面下载完默认会打开一个文档流document对象(调用document.open,此时浏览器标题左边会显示加载中图标),开始从上往下渲染内容,渲染完成调用document.close关闭渲染 ...

  3. svg基础知识体系建立

    一.简介:SVG 是使用 XML 来描述二维图形和绘图程序的语言. SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使 ...

  4. ccf-201709-2 公共钥匙盒

    问题描述 有一个学校的老师共用N个教室,按照规定,所有的钥匙都必须放在公共钥匙盒里,老师不能带钥匙回家.每次老师上课前,都从公共钥匙盒里找到自己上课的教室的钥匙去开门,上完课后,再将钥匙放回到钥匙盒中 ...

  5. Luogu4234：最小差值生成树

    题面 luogu Sol 好久没写\(LCT\) 然而写跪了\(TAT\) 把边从小到大加入森林 如果形成环,就替换最小的边 如果已经是树,更新答案 \(LCT\)维护 # include <b ...

  6. VueJS开发所用到的技术栈

    1. 主要使用vue.js2. 使用vue-cli脚手架搭建项目3. 使用vue-router来做路由,实现单页面跳转4. 使用iView UI作为前端UI框架,Mouse UI作为手机端UI框架5. ...

  7. 关于webstorm启动后闪退

    总是提示内存不足,就把内容该成了2048 在启动时候就闪退,无法进去编辑器 找到安装目录下的bin文件夹打开找到WebStorm.exe.vmoptions文件打开 把下面选项设置为 -Xmx1024 ...

  8. Tesseract-OCR-02-Tesseract-OCR 的安装与 环境变量配置

    Windows 下 Tesseract-OCR 的安装与 环境变量配置 本篇介绍Windows下Tesseract-OCR的安装与环境配置,然后做一个图片的文字识别测试 Windows下 Tesser ...

  9. Java基础之异常处理机制

    在Java中,异常分为编译时异常和运行时异常. 编译时异常又叫编译时被监测的异常:在程序编译过程中监测到非运行时异常的异常,出现该异常要么向上抛出,要么捕获处理.运行时异常(runtimeExcept ...

  10. idea基础操作

    idea 类和方法注释模板生成 设置教程:https://blog.csdn.net/xiaoliulang0324/article/details/79030752