<!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. JavaScript中 运算符

    运算符对一个或多个变量或值(操作数)进行运算,并返回一个新值 根据所执行的运算,运算符可分为以下类别: (1) 算术运算符 (2) 比较运算符 运算符 说 明 示 例 ==  等于. 如果两个操作数相 ...

  2. ssm架构添加maven、shiro、lucene、ueditor、druid支持

    1.pom.xml文件配置: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http: ...

  3. WPF MVVM 之理解（数据绑定）

    (申明:最近在做一个练习,写点东西,谨供参考.) 1.界面展示:其中的布局和样式就不说了,重点在MVVM架构和数据绑定(Model层使用EF(Entity Framework)实体框架,不做介绍). ...

  4. SSRS使用MySql作为数据源遇到的问题。

    因为工作需求,SSRS需要取到MySql数据源,还好有了ODBC. 谷歌了很多,都是不完整的Solution,放上完整版的供大家评价参考. 下面是StepByStep. 问题1.使用ODBC数据源,填 ...

  5. Spring学习笔记：Spring整合Mybatis（mybatis-spring.jar）（一：知识点回顾）

    一.知识点回顾 1.Mybatis环境搭建(DAO层的实现)(使用maven项目管理工具) 需要引入的依赖包: <!-- 单元测试junit --> <dependency> ...

  6. 合理使用线程池 ThreadPool.QueueUserWorkItem()

    //==>自建线程 new Thread(() => { //线程任务 Console.WriteLine(Thread.CurrentThread.ManagedThreadId); } ...

  7. chrome中常用的快捷键

    ctrl+n 新建窗口ctrl+shift+n 无痕模式新建窗口ctrl+t 打开新标签页ctrl+shift+t 打开最近关闭的标签页ctrl+tab 标签页之间切换ctrl+w/ctrl+F4 关 ...

  8. Java Struts2 （一）

    一.Struts2简介 1.Struts2概述 Struts2是Apache发行的MVC开源框架.注意:它只是表现层(MVC)框架. 2.Struts2的来历 Struts1:也是apache开发的一 ...

  9. 如何定位 Node.js 的内存泄漏

    基础知识 Node.js 进程的内存管理,都是有 V8 自动处理的,包括内存分配和释放.那么 V8 什么时候会将内存释放呢? 在 V8 内部,会为程序中的所有变量构建一个图,来表示变量间的关联关系,当 ...

  10. 【Udacity】误差原因——方差variance与偏差bias

    偏差造成的误差-准确率和欠拟合 方差-精度和过拟合 Sklearn代码 理解bias &variance 在模型预测中,模型可能出现的误差来自两个主要来源,即:因模型无法表示基本数据的复杂度而 ...