<!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. 2017年11月27日 C#MDI窗体创建&记事本打印&记事本查找、自动换行

    MDI窗体第一个父窗体 把属性里的IsMdiContainer设置为true就可以了 父窗体连接子窗体 //创建一个新的类,用来连接别的窗体,并且别的窗体为唯一窗体 List<Form> ...

  2. 一：Linux知识整理

    一.文件系统的管理 tips:输入命令的时候要常用tab键来补全 ls 查看目录信息 ( ls / ) ls -l 等价于 ll pwd 查看当前所处的路径 cd 切换目录 (cd /) ,如果不带参 ...

  3. Linux+Git命令

    Linux 文件与目录 cd命令: $ cd [path] //path为路径名称,这只是常规语法 1 详细用法如下: $ cd /d //进入d盘 $ cd d: //进入d盘 $ cd D: // ...

  4. MyBatis入门篇

    一.什么是MyBatis MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改 ...

  5. MySQL数据备份与还原(mysqldump)

    一 mysqldump指令实现数据备份.mysql指令实现数据还原 经常有朋友问我,DBA到底是做什么的,百科上说:数据库管理员(Database Administrator,简称DBA),是从事管理 ...

  6. MySQL--localhost、局域网、外网访问MySQL

    安装环境: MySQL版本:mysql-installer-community-5.7.22.1.msi,64位 计算机:Windows7旗舰版,64位 本机的局域网IP为:192.168.2.230 ...

  7. 用 State Pattern 来实现一个简单的 状态机

    首先要理解 State Pattern 模式. http://www.dofactory.com/net/state-design-pattern Definition Allow an object ...

  8. Java链接 Oracle11g R2

    菜鸟学习Oracle数据库,使用Java代码链接数据库. 首先要配置Eclipse,在新建的工程中,Package Explorer->工程名->Build path->Add ex ...

  9. 完美解决Office2003、Office2007、Office2010、Office2013共存方法

    原文:http://www.360doc.com/content/14/0903/16/7555793_406799011.shtml 微软Office深受广大用户的青睐,特别是经典的Office 2 ...

  10. Android 快速切换到主线程更新UI的几种方法

    此最近看了网上,在子线程更新UI的方法,说法很多,但都不是很全面.在此我争取做到总结的全面一些,希望以后对自己,对大家都有一些帮助. 方法一: view.post(Runnable action) 假 ...