模拟打字

直接上代码

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟打字效果</title>
    <script src="./jquery-2.2.4.js"></script>
    <style>
        div.container { position: relative; width: 60%; margin: auto; height: 900px; background-image: url('http://t1.niutuku.com/960/24/24-617747.jpg'); background-size: 100% auto; background-repeat: no-repeat; }
        div.text-box { position: absolute; width: 80%; height: 75%; left: 10%; top: 10%; }
        div.text-box .write-h1 {text-align: center; font-family: '宋体';}
        div.text-box p {text-indent: 2em; line-height: 2em;}
        div.text-box .write-signature {width: 10em; margin-left: 70%;}
        div.container span.cursor { border-bottom: 2px solid #333; animation: twinkle 1s infinite ;}
        @keyframes twinkle {
            from { border-color: #333; }
            50% { border-color: #333; }
            50.01% { border-color: transparent; }
            to { border-color: transparent; }
        }
    </style>
    <script src="./write.js"></script>
</head>
<body>
    <div class="container">
        <div class="text-box"></div>
        <!-- 打字声音频 -->
        <audio loop>
            <source src="./6865.wav" type="audio/ogg">
            <source src="./6865.wav" type="audio/mpeg">
        </audio>
    </div>
    <script>
        var text = '我听见雨滴落在青青草地,我听见远方下课钟声响起,可是我没有听见你的声音,认真呼唤我姓名。\n爱上你的时候还不懂感情,离别了才觉得刻骨铭心,为什么没有发现遇见了你,是生命最好的事情。也许当时忙着微笑和哭泣,忙着追逐天空中的流星。\n人理所当然的忘记,是谁风里雨里一直默默守护在原地。\n原来你是我最想留住的幸运,原来我们和爱情曾经靠得那么近,那为我对抗世界的决定,那陪我淋的雨,一幕幕都是你,一尘不染的真心。\n与你相遇好幸运,可我已失去为你泪流满面的权利,但愿在我看不到的天际,你张开了双翼,遇见你的注定 (oh--),她会有多幸运。\n青春是段跌跌撞撞的旅行,拥有着后知后觉的美丽,来不及感谢是你给我勇气,让我能做回我自己,也许当时忙着微笑和哭泣,忙着追逐天空中的流星,人理所当然的忘记,是谁风里雨里一直默默守护在原地。\n原来你是我最想留住的幸运,原来我们和爱情曾经靠得那么近,那为我对抗世界的决定,那陪我淋的雨,一幕幕都是你,一尘不染的真心,与你相遇好幸运,可我已失去为你泪流满面的权利,但愿在我看不到的天际,你张开了双翼,遇见你的注定 (oh--),她会有多幸运。'        

        var xxyObj = {
            title: '小幸运',
            box: '.text-box',
            signature: '田馥甄',
            text: text
        }

        var xiaoxingyun = new WRITE(xxyObj)
    </script>
</body>
</html>

write.js:

/**
 * boxClass: 放置容器class
 * textArray:文本数组
 * title: 文章标题
 * signature: 署名
 * text: 文本
 * textArray: 文本截取的数组
 * isEnd: 是否结束
 * paragraphLength:段落长度
 * paragraphIndex:当前所在段落
 * textLength:当前文本长度
 * textIndex:当前所在文本的位置
*/

// 创建书写文章构造函数
function WRITE (obj) {
    this.boxClass = obj.box
    this.title = obj.title || null
    this.signature = obj.signature || null
    this.text = obj.text || 'Hello World!'
    this.textArray = this.text.split('\n')
    this.paragraphLength = this.textArray.length
    this.paragraphIndex = 0
    this.textLength = this.textArray[this.paragraphIndex].length
    this.textIndex = 0
    this.isEnd = false
    
    var _this = this
    if(this.title && this.title != '') {
        this.newTitle()
    }else{
        this.newParagraph()
    }
}

// 标题方法
WRITE.prototype.newTitle = function () {
    var h = '<h1 class="write-h1"><span class="cursor">&nbsp;</span></h1>'
    $(this.boxClass).append(h)
    var timer = window.setTimeout(function(){
        this.addText(this.title)
    }.bind(this),3000)
}

// 段落方法
WRITE.prototype.newParagraph = function () {
    var p = '<p class="write-p" data-index="' + this.paragraphIndex + '"><span class="cursor">&nbsp;&nbsp;&nbsp;</span></p>'
    $(this.boxClass).append(p)
    var timer = window.setTimeout(function(){
        this.addParagraph()
    }.bind(this),3000)
}

// 署名方法
WRITE.prototype.newSignature = function () {
    if(this.isEnd === false){
        var p = '<p class="write-signature">——&nbsp;<span class="cursor">&nbsp;&nbsp;&nbsp;</span></p>'
        $(this.boxClass).append(p)
        var timer = window.setTimeout(function(){
            this.addText(this.signature)
            this.isEnd = true
        }.bind(this),3000)
    }
}

// 添加段落内容
WRITE.prototype.addParagraph = function () {
    if (this.textArray[this.paragraphIndex]) {
        this.addText(this.textArray[this.paragraphIndex])
    }else if(this.signature){
        $('.cursor').remove()
        this.newSignature()
    }
}


// 添加文本内容
WRITE.prototype.addText = function (text) {
    if (text && text.length > 0) {
        var _this = this
        var $cursor = $('.cursor')
        var length = text.length
        var timer2 = null
        var audio = $('audio')[0]
        var timer = window.setInterval( function () {
            if(_this.textIndex < length && (text[_this.textIndex] == ',' || text[_this.textIndex] == ',' || text[_this.textIndex] == '.') || text[_this.textIndex] == '。'){
                audio.pause()
                clearInterval(timer)
                timer = null
                $cursor.before(text[_this.textIndex])
                _this.textIndex++
                timer2 = setTimeout(function(){
                    _this.addText(text)
                },1300)
            }else if(_this.textIndex < length){
                audio.play()
                $cursor.before(text[_this.textIndex])
                _this.textIndex++
            }else{
                audio.pause()
                clearInterval(timer)
                timer = null
                _this.paragraphIndex++
                _this.textIndex = 0
                $cursor.remove()
                _this.newParagraph()
            }
        }, 150)
    } else {

    }
}
  • demo 使用jq只是图个方便,大部分是原生js的内容
  • 没有做浏览器兼容处理,部分浏览器可能会无法发出声音
  • 打字声音频可以网上现在一个

效果

打字.gif
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 22、JQ的基础语法、核心原理和项目实战 jQ的版本和下载 jQuery版本 1.x:兼容IE6-8,是目前PC端...
    萌妹撒阅读 1,773评论 0 0
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,611评论 0 7
  • 你很坏 所以我把猪肉刀 架在你的脖子上。
    留子尧阅读 328评论 0 1
  • 00.课程介绍部分 01.课程知识回顾部分 02.ARP协议原理: 03.IP地址概念 04. 课程知识总结 作业:
    木孑楊阅读 297评论 0 0
  • 18日凌晨12点起,胃病又犯了,胃酸反流,烧心。近1年,患上了这个胃病,反反复复的,一直好不了。吃上药就没事,一旦...
    炼器师J阅读 997评论 0 1