原生js打字效果(修正)

Html

Css

* {
	margin:0;
	padding:0;
}
.d1 {
	width:100%;
	height:600px;
	background:#000;
	position:relative;
}
.zhezhao {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.zhezhao {
	background:rgba(0,0,0,.1);
}
.font {
	position:absolute;
	top:0;
	left:140px;
	bottom:0;
	margin:auto 0;
	font-size:55px;
	height:70px;
	width:max-content;
	color:#fff;
	z-index:2;
	text-align:left;
}
.font::after {
	content:'';
	display:inline-block;
	width:2px;
	height:100%;
	background:#fff;
	position:absolute;
	top:0;
	right:-5px;
	animation:dh .8s ease-in-out infinite;
}
@keyframes dh {
	0% {
	opacity:0;
}
50% {
	opacity:1;
}
100% {
	opacity:0;
}
}

var arr = ['测试1111', '测试22222', '测试333333', '测试444444', '测试5555555']
var index = 0
var i = 0
var str2 = ''
var time1, time2
var font = document.getElementsByClassName('font')[0]

function add(index) {
    str2 = this.str.slice(0, index)
    console.log(str2)
    font.innerHTML = str2
    if (index <= this.str.length) {
        setTime('add', 170)
    } else {
        clearTimeout(time1)
        setTime('reduce', 1000)
    }
}

function reduce(index) {
    str2 = this.str.slice(0, index)
    font.innerHTML = str2
    if (index > 0) {
        setTime('reduce', 50)
    } else {
        index = 0
        clearTimeout(time1)
        if (i < arr.length - 1) {
            i++
        } else i = 0
        change(i)
    }
}
// 定时器
function setTime(type, time) {
    var that = this
    time1 = setTimeout(function() {
        if (type == 'add') {
            index++
            add(index)
        } else {
            index = index > 0 ? index - 1 : 0
            reduce(that.index)
        }
    }, time);
}

function change(i) {
    if (i < arr.length) {
        this.str = arr[i]
        add(index)
    }
}
change(0)

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

原生js打字效果(修正)

代码描述：原生js打字效果修正

打字机，新手都看得懂的写法，之前一个简化的时候有点问题，现在修正了

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

Become_Ape

相关代码

原生js打字效果(修正)

最新