<!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. Java - USC2字符串截取

    Java内部采用UTF-16(USC2)编码,比如:"我" 为 98 17,"a" 为 0 97," " 为 0 32,"1&qu ...

  2. 三：Mybatis知识整理(3)

    一:mybatis中模糊查询的方法: 1.直接传参法:在java传参时进行拼接 -- %keyword% 2.mysql内置函数:concart('%',#{keyword},'%') -- 拼接sq ...

  3. Spring事务不起作用原因

    首先声明: Checked异常继承java.lang.Exception类.Unchecked异常继承自java.lang.RuntimeException类. 而,Spring的事务实现采用基于AO ...

  4. JBPM学习第5篇:Mysql配置

    1.工作台用户Authentication配置 JBPM web工作台预安装了用户认证与授权模块,位于jbpm-console-7.1.0.Final-wildfly-10.1.0.Final.war ...

  5. java 阿里云接口实现发送短信验证码

    此刻自己做的小项目中,需要用到手机发送短信验证码实现注册功能,于是就去阿里云注册了账号,并实现随机发送验证码的功能 第一步:在阿里云官网登录注册   已有支付宝或淘宝的账号可以直接登录,最后需要实名认 ...

  6. csharp:Optical Character Recognition

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  7. mockito測試框架

    1. code package com.springinaction.knights; import static org.mockito.Mockito.*; import org.junit.Te ...

  8. cf449D. Jzzhu and Numbers(容斥原理 高维前缀和)

    题意 题目链接 给出\(n\)个数,问任意选几个数,它们\(\&\)起来等于\(0\)的方案数 Sol 正解居然是容斥原理Orz,然而本蒟蒻完全想不到.. 考虑每一种方案 答案=任意一种方案 ...

  9. Repeat Number（数论）

    Repeat Number 题目描述: Definition: a+b = c, if all the digits of c are same ( c is more than ten), then ...

  10. world特殊控制符输入

    特殊符号的输入表示法. 1,“^l”表示软回车(象这种“↓”). 2,“^p”表示硬回车. 3,“^t”表示制表符. 4,“^m”表示手动分页符. 5,“^+”表示长划线(—). 6,“^=”表示短划 ...